<template>
  <StatisticsTemplate
    title="规则统计"
    :list="state.forwardCount"
  />
<a-card style="margin-top: 20px;" >
  <a-row justify="space-between"   >
    <a-col :span="18" >
      <a-row style="width: 100%"  :gutter="[8,8]" >
        <a-col :xs="20" :md="12" :xl="5">
          <a-input  allowClear v-model:value="queryParams.ruleId" placeholder="请输入规则id"></a-input>
        </a-col>
        <a-col :xs="20" :md="12" :xl="5">
          <a-input allowClear v-model:value="queryParams.ruleLabel" placeholder="请输入规则名称" ></a-input>
        </a-col>
        <a-col :xs="20" :md="12" :xl="5" >
              <a-select allowClear style="width: 100% !important;" v-model:value="queryParams.subjectResource"    placeholder="选择数据来源">
                <a-select-option
                  v-for="item in subjectResourceList"
                  :key="item.key"
                  :value="item.value"
                >
                {{item.name}}
                </a-select-option>
              </a-select>
        </a-col>
        <a-col :xs="20" :md="12" :xl="5" >
              <a-select allowClear style="width: 100% !important;" v-model:value="queryParams.subjectEvent"  placeholder="选择触发事件">
                <a-select-option
                  v-for="item in Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))"
                  :key="item.key"
                  :value="item.value"
                >
                {{item.name}}
                </a-select-option>
              </a-select>
        </a-col>
        <a-col :xs="20" :md="12" :xl="4" >
              <a-select allowClear style="width: 100% !important;" v-model:value="queryParams.status" >
                <a-select-option
                  v-for="item in statusList"
                  :key="item.key"
                  :value="item.value"
                >
                {{item.name}}
                </a-select-option>
              </a-select>
        </a-col>
      </a-row>
    </a-col>
    <a-col>
      <a-space>
        <a-button  type="primary" @click="search">搜索</a-button>
        <a-button type="primary" @click="openModal('add', {})" >创建规则</a-button>
      </a-space>

    </a-col>
  </a-row>
  <a-table
    style="margin-top: 20px;"
    :columns="columns"
    :data-source="state.dataSource"
    :loading="state.loading"
    :pagination="queryParams"
    @change="changePage"
  >
    <template #bodyCell="{column, record}" >
      <template v-if="column.key === 'id'" >
          <a  @click="openDetailModal(record.id)">{{record.id}}</a>
        </template>
      <template v-if="column.key === 'subjectResource'" >
        <a-tag >{{RuleController.SubjectResourceMap.get(record.subjectResource)?.name}}</a-tag>
      </template>
      <template v-if="column.key === 'subjectEvent'" >
        <a-tag >{{RuleController.SubjectEventMap.get(record.subjectEvent)?.name}}</a-tag>
      </template>
      <template v-if="column.key === 'status'" >
        <a-switch
          v-model:checked="record.status"
          checked-children="运行中"
          un-checked-children="已停止"
          @click="changeStatus(record)"
        />
      </template>
      <template v-if="column.key === 'action'" >
        <a-space>
              <a @click="openModalDebug(record.id)">调试</a>
              <a @click="openDetailModal(record.id)">详情</a>
              <a @click="openModal('update', record)">编辑</a>
              <a-popconfirm
                  title="确实要删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="delForwardRule(record.id)"
                >
                  <a>删除</a>
              </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</a-card>

<!-- 创建规则 -->
<modal-pro
  width="1000px"
  label="创建规则"
  :open="state.visible"
  @cancel="state.visible = false"
  @ok="ok('visible')"
>
    <a-steps :current="state.stepCount">
        <a-step title="设置转发数据" ></a-step>
        <a-step title="设置转发目标"  />
    </a-steps>
    <div style="margin: 20px 0px;" >
      <div v-if="state.stepCount === 0" >针对部分类型数据提供的快速配置，将引导您完成简单的业务设置。您也可以直接编辑过滤语句，实现更复杂的查询要求</div>
      <div v-else-if="state.stepCount === 1" >您可以设置将数据转发至华为云其他服务或私有服务器。</div>
    </div>
    <div v-if="state.stepCount == 0">
      <a-form :label-col="{span: 4 }" :wrapper-col="{ span: 14 }" style="height: 300px; overflow-y: auto;">
        <a-form-item  label="规则名称" v-bind="validateInfosStep1.ruleLabel" >
          <a-input v-model:value="forwardRStateStep1.ruleLabel" ></a-input>
        </a-form-item>
        <a-form-item label="数据来源" v-bind="validateInfosStep1.subjectResource">
            <a-select
            allowClear
            style="width: 100%;"
            v-model:value="forwardRStateStep1.subjectResource"
          >
            <a-select-option
              v-for="item in subjectResourceList"
              :key="item.key"
              :value="item.key"
            >
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="数据来源" v-bind="validateInfosStep1.subjectEvent">
            <a-select
            allowClear
            style="width: 100%;"
            v-model:value="forwardRStateStep1.subjectEvent"
          >
            <a-select-option
              v-for="item in subjectEventList"
              :key="item.key"
              :value="item.key"
            >
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="规则描述" >
          <a-textarea
            v-model:value="forwardRStateStep1.ruleDescription"
            placeholder="请输入规则描述"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </div>
    <div v-if="state.stepCount == 1" >
      <a-row>
        <a-col>
          <a-space>
            <a-button type="primary" @click="addForwardState">添加</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        style="margin-top: 20px;"
        v-if="forwardRuleTargets.length"
        :columns="forwardRuleTargetsColumns"
        :data-source="forwardRuleTargets"
        size="middle"
      >
        <template #bodyCell="{column, record, index}" >
          <template v-if="column.key === 'action'" >
            <a-space>
              <a @click="updateForwardRuleTargets(record, index)">编辑</a>
              <a @click="forwardRuleTargets.splice(index, 1)">删除</a>
            </a-space>
          </template>
        </template>
      </a-table>
      <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
    </div>
    <!-- <div v-if="state.stepCount == 2" >
      <a-button @click="addForwardRule" >启动规则</a-button>
    </div> -->
</modal-pro>

<modal-pro
  style="width: 800px"
  label="转发目标"
  :open="state.targetVisible"
  :ok-text=" state.stepCount === 0 ? '下一步' : '确定'"
  @cancel="closeModal"
  @ok="ok('targetVisible')"
>
    <a-form :label-col="{span: 4 }" :wrapper-col="{ span: 14 }" style="height: 400px; overflow-y: auto;">
      <a-form-item label="转发目标">
        <a-select
        allowClear
        style="width: 100%;"
        v-model:value="forwardState.targetType"
      >
        <a-select-option
          v-for="item in forwardTatget"
          :key="item.key"
          :value="item.key"
        >
          {{item.name}}
        </a-select-option>
      </a-select>
    </a-form-item>
      <span v-if="forwardState.targetType === 'HTTP'" >
        <a-form-item label="地址" v-bind="validateInfos.endpointUrl">
          <a-input allowClear v-model:value="forwardState.endpointUrl" placeholder="请填写http地址" />
        </a-form-item>
        <a-form-item label="方法" v-bind="validateInfos.requestMethod">
          <a-select
            allowClear
            style="width: 100%;"
            v-model:value="forwardState.requestMethod"
          >
            <a-select-option
              v-for="item in HttpRequestMethods"
              :key="item.key"
              :value="item.key"
            >
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="超时时间" v-bind="validateInfos.defaultTimeout">
          <a-input-number id="inputNumber" v-model:value="forwardState.defaultTimeout" />
        </a-form-item>
        <a-form-item label="请求头" v-bind="validateInfos.requestHeaders">
          <a-input-group style="margin-top: 10px;" size="large" v-for="(item, index) in forwardState.requestHeaders" :key="index">
            <a-row :gutter="8">
              <a-col :span="5">
                <a-input allowClear style="height: 30px;" v-model:value="item.key" placeholder="key" />
              </a-col>
              <a-col :span="8">
                <a-input allowClear style="height: 30px;"  v-model:value="item.value" placeholder="value" />
              </a-col>
              <a-col>
                <a-button type="link" danger @click="forwardState.requestHeaders.splice(index, 1)" >删除</a-button>
              </a-col>
            </a-row>
          </a-input-group>
          <a-button style="margin-top: 20px;" @click="addRequestHeaders('requestHeaders')" type="primary" >添加参数</a-button>
        </a-form-item>
      </span>
      <span v-if="forwardState.targetType === 'KAFKA'" >
        <a-form-item label="主题" v-bind="validateInfos.topic" >
          <a-input allowClear placeholder="请填写主题" v-model:value="forwardState.topic" ></a-input>
        </a-form-item>
        <a-form-item label="地址" v-bind="validateInfos.topic" >
          <a-input allowClear placeholder="请填写地址" v-model:value="forwardState.bootstrapServers" ></a-input>
        </a-form-item>
        <a-form-item label="acks" v-bind="validateInfos.acks" >
          <a-input allowClear placeholder="请填写acks" v-model:value="forwardState.acks"  disabled ></a-input>
        </a-form-item>
        <a-form-item label="重试次数" v-bind="validateInfos.retries" >
          <a-input allowClear placeholder="请填写重试次数" v-model:value="forwardState.retries"></a-input>
        </a-form-item>
        <a-form-item label="batchSize" v-bind="validateInfos.batchSize" >
          <a-input allowClear placeholder="请填写batchSize" v-model:value="forwardState.batchSize"></a-input>
        </a-form-item>
        <a-form-item label="linger" v-bind="validateInfos.linger" >
          <a-input allowClear placeholder="请填写linger" v-model:value="forwardState.linger"></a-input>
        </a-form-item>
        <a-form-item label="bufferMemory" v-bind="validateInfos.bufferMemory" >
          <a-input allowClear placeholder="请填写bufferMemory" v-model:value="forwardState.bufferMemory"></a-input>
        </a-form-item>
        <a-form-item label="keySerializer" v-bind="validateInfos.keySerializer" >
          <a-input allowClear placeholder="请填写keySerializer" v-model:value="forwardState.keySerializer"></a-input>
        </a-form-item>
        <a-form-item label="valueSerializer" v-bind="validateInfos.valueSerializer" >
          <a-input allowClear placeholder="请填写valueSerializer" v-model:value="forwardState.valueSerializer"></a-input>
        </a-form-item>
        <a-form-item label="其他参数">
          <a-input-group style="margin-top: 10px;" size="large" v-for="(item, index) in forwardState.otherProperties" :key="index">
            <a-row :gutter="8">
              <a-col :span="5">
                <a-input allowClear style="height: 30px;" v-model:value="item.key" placeholder="key" />
              </a-col>
              <a-col :span="8">
                <a-input allowClear style="height: 30px;"  v-model:value="item.value" placeholder="value" />
              </a-col>
              <a-col>
                <a-button type="link" danger @click="forwardState.otherProperties.splice(index, 1)" >删除</a-button>
              </a-col>
            </a-row>
          </a-input-group>
          <a-button style="margin-top: 20px;" @click="addRequestHeaders('otherProperties')" type="primary" >添加参数</a-button>
        </a-form-item>
      </span>
      <span v-if="forwardState.targetType === 'MQTT'"  >
        <a-form-item label="主题" v-bind="validateInfos.topic" >
          <a-input allowClear placeholder="请填写主题" v-model:value="forwardState.topic" ></a-input>
        </a-form-item>
        <a-form-item label="broker服务器" v-bind="validateInfos.broker" >
          <a-input allowClear placeholder="请填写broker服务器" v-model:value="forwardState.broker" ></a-input>
        </a-form-item>
        <a-form-item label="连接超时时间" v-bind="validateInfos.connectTimeout" >
          <a-input-number placeholder="请填写连接超时时间" v-model:value="forwardState.connectTimeout" ></a-input-number>
        </a-form-item>
        <a-form-item label="客户端ID" v-bind="validateInfos.clientId" >
          <a-input-number placeholder="请填写客户端ID" v-model:value="forwardState.clientId" ></a-input-number>
        </a-form-item>
        <a-form-item label="保留消息" >
          <a-switch v-model:checked="forwardState.retainedMessage" checked-children="保留" un-checked-children="不保留" />
        </a-form-item>
        <a-form-item label="清除Session" >
          <a-switch v-model:checked="forwardState.cleanSession" checked-children="清除" un-checked-children="不清除" />
        </a-form-item>
        <a-form-item label="qos" v-bind="validateInfos.qos" >
          <a-input allowClear placeholder="请填写qos" v-model:value="forwardState.qos" ></a-input>
        </a-form-item>
        <a-form-item label="用户名" v-bind="validateInfos.userName">
          <a-input allowClear placeholder="请填写用户名" v-model:value="forwardState.userName" ></a-input>
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password" >
          <a-input allowClear placeholder="请填写密码" v-model:value="forwardState.password" ></a-input>
        </a-form-item>
      </span>
      <span v-if="forwardState.targetType === 'RABBIT'" >
        <a-form-item label="exchangeName" v-bind="validateInfos.exchangeName">
          <a-input allowClear v-model:value="forwardState.exchangeName" placeholder="请填写交换名" />
        </a-form-item>
        <a-form-item label="路由密钥" v-bind="validateInfos.routingKey">
          <a-input allowClear v-model:value="forwardState.routingKey" placeholder="请填写路由密钥" />
        </a-form-item>
        <a-form-item label="消息属性" v-bind="validateInfos.messageProperties">
          <a-input allowClear v-model:value="forwardState.messageProperties" placeholder="请填写消息属性" />
        </a-form-item>
        <a-form-item label="域名" v-bind="validateInfos.host">
          <a-input allowClear v-model:value="forwardState.host" placeholder="请填写域名" />
        </a-form-item>
        <a-form-item label="端口" v-bind="validateInfos.port">
          <a-input allowClear v-model:value="forwardState.port" placeholder="请填写端口" />
        </a-form-item>
        <a-form-item label="虚拟主机" v-bind="validateInfos.virtualHost">
          <a-input allowClear v-model:value="forwardState.virtualHost" placeholder="请填写虚拟主机" />
        </a-form-item>
        <a-form-item label="自动恢复" >
          <a-switch v-model:checked="forwardState.automaticRecoveryEnabled" checked-children="启用" un-checked-children="未启用" />
        </a-form-item>
        <a-form-item label="连接超时" >
          <a-input allowClear  v-model:value="forwardState.connectionTimeout" placeholder="请填写连接超时时间" />
        </a-form-item>
        <a-form-item label="握手超时" >
          <a-input allowClear v-model:value="forwardState.handshakeTimeout" placeholder="请填写握手超时" />
        </a-form-item>
        <a-form-item label="用户名" v-bind="validateInfos.userName">
          <a-input allowClear placeholder="请填写用户名" v-model:value="forwardState.userName" ></a-input>
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password" >
          <a-input allowClear placeholder="请填写密码" v-model:value="forwardState.password" ></a-input>
        </a-form-item>
      </span>
    </a-form>
</modal-pro>

<modal-pro
  style="width: 1000px;"
  label="详情"
  :open="state.detailVisible"
  @cancel="state.detailVisible = false"
  @ok="state.detailVisible  = false"
>
  <a-form  :label-col="{span: 2}" style="height: 400px;overflow: hidden;overflow-y: scroll;">
    <a-form-item label="规则名称"> {{detailForwardRef.ruleLabel}} </a-form-item>
    <a-form-item label="数据来源"> {{RuleController.SubjectResourceMap.get(detailForwardRef.subjectResource)?.name}} </a-form-item>
    <a-form-item label="触发事件"> {{RuleController.SubjectEventMap.get(detailForwardRef.subjectEvent)?.name}} </a-form-item>
    <a-form-item label="状态"> {{detailForwardRef.status ?  '运行中' : '已停止'}} </a-form-item>
    <a-form-item label="HTTP" v-if="detailHTTPList.length">
      <a-table
        :columns="detailColumn['HTTP']"
        :data-source="detailHTTPList"
        :pagination="false"
      />

    </a-form-item>
    <a-form-item label="Kafka"  v-if="detailKAFKAList.length">
      <a-table
        :columns="detailColumn['Kafka']"
        :data-source="detailKAFKAList"
        :pagination="false"
      >

      </a-table>
    </a-form-item>
    <a-form-item label="MQTT" v-if="detailMQTTList.length">
      <a-table
        :columns="detailColumn['MQTT']"
        :data-source="detailMQTTList"
        :pagination="false"
      >
      </a-table>
    </a-form-item>
    <a-form-item label="RabbitMQ" v-if="detailRABBITList.length">
      <a-table
        :columns="detailColumn['RabbitMQ']"
        :data-source="detailRABBITList"
        :pagination="false"
      >
      </a-table>
    </a-form-item>
  </a-form>
</modal-pro>

<modal-pro
  label="调试"
  :open="state.testVisble"
  @cancel="state.testVisble = false"
  @ok="dispatchDebug"
  style="width: 640px;"
>
  <TestDialog ref="testDialogRef"/>
</modal-pro>
</template>

<script lang='ts' setup >
import { onMounted, reactive, ref } from 'vue'
import { RuleController } from '@/controller/index'
import type { FormItemProps } from '@/components/FormPro/index.vue'
import { Form, Empty, message } from 'ant-design-vue'
import { computed } from '@vue/reactivity'
import TestDialog from './components/testDialog.vue'
import StatisticsTemplate from '@/components/StatisticsTemplate/index.vue'
import { SubjectEventEnum, SubjectResourceEnum } from '@/enum/common'
import { useId } from '@/hooks'

const columns = [
  {
    title: '规则名称',
    dataIndex: 'ruleLabel'
  },
  {
    title: '规则ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '数据来源',
    dataIndex: 'subjectResource',
    key: 'subjectResource'
  },
  {
    title: '触发事件',
    dataIndex: 'subjectEvent',
    key: 'subjectEvent'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const forwardRuleTargetsColumns = [
  {
    title: '转发目标',
    dataIndex: 'targetType'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }

]

const forwardTatget = [
  { name: 'RabbitMQ', key: 'RABBIT' },
  { name: 'Kafka', key: 'KAFKA' },
  { name: 'HTTP编码', key: 'HTTP' },
  { name: 'MQTT', key: 'MQTT' }
]

const HttpRequestMethods = [
  { name: 'GET', key: 'GET' },
  { name: 'POST', key: 'POST' },
  { name: 'PUT', key: 'PUT' }
]

const subjectResourceList = Array.from(RuleController.SubjectResourceMap, ([key, value]) => ({ ...value, value: value.key }))

const subjectEventListByResourceMap = new Map([
  [SubjectResourceEnum.DEVICE, [SubjectEventEnum.DEVICE_CREATE, SubjectEventEnum.DEVICE_DELETE]],
  [SubjectResourceEnum.DEVICE_STATUS, [SubjectEventEnum.DEVICE_STATUS_UPDATE]],
  [SubjectResourceEnum.DEVICE_ATTRIBUTE, [SubjectEventEnum.DEVICE_ATTRIBUTE_REPORT]],
  [SubjectResourceEnum.MODEL, [SubjectEventEnum.MODEL_CREATE, SubjectEventEnum.MODEL_DELETE]]
])

const subjectEventList = computed(() => {
  const subjectevents = Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))
  const keys = subjectEventListByResourceMap.get(forwardRStateStep1.subjectResource as SubjectResourceEnum)
  return subjectevents.filter(subjectevent => keys?.includes(subjectevent.key))
})

const statusList = [
  { name: '所有状态', key: '', value: '' },
  { name: '运行中', key: 'status', value: true },
  { name: '未启动', key: 'status', value: false }
]

const detailColumn = reactive({
  HTTP: [
    { title: 'http地址', dataIndex: 'endpointUrl' },
    { title: 'requestMethod', dataIndex: '请求方法' },
    { title: 'defaultTimeout', dataIndex: '超时时间' },
    { title: 'requestHeaders', dataIndex: '请求头' }
  ],
  Kafka: [
    { title: '主题', dataIndex: 'topic' },
    { title: '地址', dataIndex: 'bootstrapServers' },
    { title: 'acks', dataIndex: 'acks' },
    { title: '重试', dataIndex: 'retries' },
    { title: 'batchSize', dataIndex: 'batchSize' },
    { title: 'linger', dataIndex: 'linger' },
    { title: 'bufferMemory', dataIndex: 'bufferMemory' },
    { title: 'keySerializer', dataIndex: 'keySerializer' },
    { title: 'valueSerializer', dataIndex: 'valueSerializer' },
    { title: '其他属性', dataIndex: 'otherProperties' }
  ],
  MQTT: [
    { title: '主题', dataIndex: 'topic' },
    { title: 'broker服务器', dataIndex: 'broker' },
    { title: '连接超时时间', dataIndex: 'connectTimeout' },
    { title: 'clientId', dataIndex: 'clientId' },
    { title: 'retainedMessage', dataIndex: 'retainedMessage' },
    { title: 'cleanSession', dataIndex: 'cleanSession' },
    { title: 'qos', dataIndex: 'qos' },
    { title: '用户名', dataIndex: 'userName' },
    { title: '密码', dataIndex: 'password' }
  ],
  RabbitMQ: [
    { title: '主题', dataIndex: 'exchangeName' },
    { title: '路由密钥', dataIndex: 'routingKey' },
    { title: '消息属性', dataIndex: 'messageProperties' },
    { title: '域名', dataIndex: 'host' },
    { title: '端口', dataIndex: 'port' },
    { title: '虚拟主机', dataIndex: 'virtualHost' },
    { title: '自动恢复', dataIndex: 'automaticRecoveryEnabled' },
    { title: '连接超时', dataIndex: 'connectionTimeout' },
    { title: '握手超时', dataIndex: 'handshakeTimeout' },
    { title: '用户名', dataIndex: 'userName' },
    { title: '密码', dataIndex: 'password' }
  ]
})

const useForm = Form.useForm

const formProo = ref('')

const testDialogRef = ref('')

let queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  ruleId: '',
  ruleLabel: '',
  status: '',
  subjectEvent: null,
  subjectResource: null
})

const state = reactive({
  loading: false,
  dataSource: [],
  visible: false,
  targetVisible: false,
  detailVisible: false,
  stepCount: 0,
  opraState: 'add',
  forwardId: '',
  testVisble: false,
  forwardCount: [],
  updateIndex: '' // 对规则的编辑时的下标
})

const requestHeader = { key: '', value: '' }

const detailForwardRef = ref<Partial<IOT.API.RULE.ForwardRule>>({})

const detailHTTPList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'HTTP') : [])
const detailRABBITList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'RABBIT') : [])
const detailKAFKAList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'KAFKA') : [])
const detailMQTTList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'MQTT') : [])

const initForwardState = {
  targetType: '',
  endpointUrl: '',
  requestMethod: 'GET',
  defaultTimeout: 6,
  requestHeaders: [],
  topic: '',
  bootstrapServers: '',
  acks: '-1',
  retries: '0',
  batchSize: '65535',
  linger: '0',
  bufferMemory: '33554432',
  keySerializer: '',
  valueSerializer: '',
  otherProperties: [],
  broker: '',
  connectTimeout: '',
  clientId: '',
  retainedMessage: false,
  cleanSession: false,
  qos: '',
  userName: '',
  password: '',
  exchangeName: '',
  routingKey: '',
  messageProperties: '',
  host: '',
  port: '',
  virtualHost: '/',
  automaticRecoveryEnabled: false,
  connectionTimeout: 60000,
  handshakeTimeout: 10000
}

const forwardR1Ref = ref()

const forwardState = reactive(JSON.parse(JSON.stringify(initForwardState)))

const forwardRStateStep1 = reactive({
  ruleLabel: '',
  subjectResource: '',
  subjectEvent: '',
  ruleDescription: ''
})

const forwardRuleState = reactive({
  HTTP: {
    endpointUrl: [{ required: true, message: '请填写http地址' }],
    requestMethod: [{ required: true, message: '请填写请求方法' }],
    defaultTimeout: [{ required: true, message: '请填写超时时间' }],
    requestHeaders: [{ required: true, message: '请填写请求头参数' }]
  },
  KAFKA: {
    topic: [{ required: true, message: '请填写主题' }],
    bootstrapServers: [{ required: true, message: '请填写地址' }],
    acks: [{ required: true, message: '请填写acks' }],
    retries: [{ required: true, message: '请填写retries' }],
    batchSize: [{ required: true, message: '请填写batchSize' }],
    linger: [{ required: true, message: '请填写linger' }],
    bufferMemory: [{ required: true, message: '请填写bufferMemory' }],
    keySerializer: [{ required: true, message: '请填写keySerializer' }],
    valueSerializer: [{ required: true, message: '请填写valueSerializer' }]
  },
  RABBIT: {
    exchangeName: [{ required: true, message: '请填写交换名' }],
    routingKey: [{ required: true, message: '请填写路由密钥' }],
    messageProperties: [{ required: true, message: '请填写消息属性' }],
    host: [{ required: true, message: '请填写域名' }],
    //  pattern: '^\d+$',
    port: [{ required: true, message: '端口号必须由纯数字组成', pattern: /^\d+$/ }],
    virtualHost: [{ required: true, message: 'virtualHost' }],
    automaticRecoveryEnabled: [{ required: true, message: 'automaticRecoveryEnabled' }],
    connectionTimeout: [{ required: true, message: 'connectionTimeout' }],
    handshakeTimeout: [{ required: true, message: 'handshakeTimeout' }]
  },
  MQTT: {
    topic: [{ required: true, message: '请填写主题' }],
    broker: [{ required: true, message: '请填写broker服务器' }],
    connectTimeout: [{ required: true, message: '请填写连接超时时间' }],
    clientId: [{ required: true, message: '请填写客户端id' }],
    qos: [{ required: true, message: '请填写qos' }],
    userName: [{ required: true, message: '请填写用户名' }],
    password: [{ required: true, message: '请填写密码' }]
  }
})

let forwardRuleTargets = reactive([])

const forwardRuleStateComputed = computed(() => forwardState.targetType === '' ? {} : forwardRuleState[forwardState.targetType])

const { resetFields, validate, validateInfos } = useForm(forwardState, forwardRuleStateComputed)
const { resetFields: resetFieldsStep1, validate: validateStep1, validateInfos: validateInfosStep1 } = useForm(forwardRStateStep1, reactive({
  ruleLabel: [{ required: true, message: '请填写转发规则名称' }],
  subjectResource: [{ required: true, message: '请填写转发规则名称' }],
  subjectEvent: [{ required: true, message: '请填写转发规则名称' }]
}))

const updateForwardRuleTargets = (record, index) => {
  state.targetVisible = true
  state.updateIndex = index
  resetFields({ ...record })
}

const changePage = ({ current }) => {
  queryParams.page = current
  getForwardList()
}

const openDetailModal = async (id: string) => {
  state.detailVisible = true
  const { data } = await RuleController.forwardById(id)
  detailForwardRef.value = data
  // const _forwardRuleTargets = data.forwardRuleTargets
}

const openModalDebug = (id: string) => {
  state.testVisble = true
  state.forwardId = id
}

const closeModal = () => {
  state.stepCount = 1
  state.targetVisible = false
  resetFields(JSON.parse(JSON.stringify(initForwardState)))
  resetFieldsStep1({
    ruleLabel: '',
    subjectResource: '',
    subjectEvent: '',
    ruleDescription: ''
  })
  forwardRuleTargets = []
}

const openModal = async (opraState: 'add' | 'update', record) => {
  state.opraState = opraState

  if (opraState === 'update' && record.status) {
    message.error('规则运行中，停止后可编辑')
    return
  }

  if (opraState === 'update') {
    state.forwardId = record.id
    state.stepCount = 1
    const { data } = await RuleController.forwardById(record.id)
    resetFieldsStep1(data)

    const _forwardRuleTargets = data.forwardRuleTargets!.map(item => {
      return {
        ...item,
        id: useId()
      }
    })

    _forwardRuleTargets.forEach(item => {
      const _requestHeaders = item.requestHeaders
        ? Object.keys(item.requestHeaders).map(key => {
          return {
            key: key,
            value: item!.requestHeaders[key]
          }
        })
        : []
      const _otherProperties = item.otherProperties
        ? Object.keys(item.otherProperties).map(key => {
          return {
            key: key,
            value: item!.otherProperties[key]
          }
        })
        : []
      item.requestHeaders = _requestHeaders
      item.otherProperties = _otherProperties
    })

    console.log('_forwardRuleTargets:', _forwardRuleTargets)

    forwardRuleTargets = reactive(JSON.parse(JSON.stringify(_forwardRuleTargets)))
  }

  if (opraState === 'add') {
    state.stepCount = 0
  }
  state.visible = true
}

const addRequestHeaders = (key: 'requestHeaders' | 'otherProperties') => forwardState[key].push({ ...requestHeader })

const search = (record) => {
  queryParams = { ...queryParams, ...record }
  getForwardList()
}

const addForwardState = () => {
  state.targetVisible = true
  state.updateIndex = ''
  resetFields(JSON.parse(JSON.stringify(initForwardState)))
}

const changeStatus = async (record) => RuleController.updateForwardStatus({ id: record.id, status: record.status })

// 获取统计规则
const getCount = async () => {
  const { data } = await RuleController.forwardCount()
  state.forwardCount = Object.keys(data).map(key => {
    const item = RuleController.forwardStatisticMap.get(key)
    return {
      ...item,
      value: data[key]
    }
  })
}

/** 提交转发规则 */
const ok = async (visibleKey: string) => {
  if (state.stepCount === 1) {
    if (state.targetVisible) {
      validate().then(() => {
        if (typeof state.updateIndex === 'number') {
          forwardRuleTargets.splice(state.updateIndex, 1, { ...forwardState })
        } else {
          forwardRuleTargets.push({ ...forwardState })
          resetFields(JSON.parse(JSON.stringify(initForwardState)))
        }
        state.targetVisible = false
      })
    } else {
      const _otherProperties: Record<string, string> = {}

      forwardRuleTargets.forEach(item => {
        const _requestHeaders: Record<string, string> = {}
        const _otherProperties: Record<string, string> = {}

        item.requestHeaders.forEach(item => {
          _requestHeaders[item.key] = item.value
        })
        item.requestHeaders = _requestHeaders

        item.otherProperties.forEach(item => {
          _otherProperties[item.key] = item.value
        })
        item.otherProperties = _otherProperties
      })

      forwardState.otherProperties.forEach(item => {
        _otherProperties[item.key] = item.value
      })
      if (state.opraState === 'add') {
        await RuleController.postForward({ ...forwardRStateStep1, forwardRuleTargets })
      } else {
        await RuleController.updateForward({ ...forwardRStateStep1, forwardRuleTargets, id: state.forwardId })
      }

      state.visible = false
      closeModal()
      getForwardList()
    }
  }

  if (state.stepCount === 0) {
    validateStep1().then((r) => {
      if (r) {
        state.stepCount = 1
      }
    })
  }
}

// 开始调试
const dispatchDebug = async () => {
  const value = await testDialogRef.value.getValue()
  await RuleController.forwardDebug({
    ...value,
    ruleId: state.forwardId
  })
  state.testVisble = false
}

const delForwardRule = async (id: string) => {
  await RuleController.delForwardRule(id)
  getForwardList()
}

const getForwardList = async () => {
  state.loading = true
  const { data, sum } = await RuleController.pageForward(queryParams)
  state.loading = false
  state.dataSource = data
  queryParams.total = sum
}

onMounted(() => {
  getForwardList()
  getCount()
})
</script>
<style lang='less' scoped >

::v-deep ant-form {
  height: 200px!;
}
</style>
