xiaodou-ai-admin/src/pages/Iot/rule/linkRules.vue

<template>
  <a-card>
    <a-row justify="space-between" >
      <a-col :span="12" >
        <a-space>
          <a-input placeholder="请填写规则名称" v-model:value="queryParamsState.ruleLabel" ></a-input>
          <a-button type="primary" @click="getLinkPage()" >搜索</a-button>
        </a-space>
      </a-col>
      <a-col>
        <a-space>
          <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="queryParamsState"
      @change="changePage"
    >
    <template #bodyCell="{column, record}" >
      <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="openModal('update', record)" >编辑</a>
          <a-popconfirm
                  title="确实要删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="delLinkRule(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
        </a-space>
      </template>
    </template>
    </a-table>
  </a-card>

  <modal-pro
    style="width: 1400px;"
    label="创建转发规则"
    :visible="state.visible"
    @cancel="state.visible = false"
    @ok="ok"
  >
    <div style="height: 750px;overflow: hidden;overflow-y: auto;">
      <a-card
        title="基本信息"
        :bordered="false"
      >
        <a-form :labelCol="{span: 2}" :wapperCol="{span: 12}" >
          <a-form-item label="规则名称"  v-bind="validateInfos.ruleLabel">
            <a-input v-model:value="bodyParamsState.ruleLabel" ></a-input>
          </a-form-item >
          <a-form-item  label='规则描述'>
            <a-textarea
              v-model:value="bodyParamsState.ruleDescription"
              placeholder="请输入规则描述"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
        </a-form>

        <!-- <form-pro
          :labelCol="{span: 2}"
          :formProps="formProps"
          ref="formProRef"
        /> -->
      </a-card>
      <a-card
        title="触发条件"
        :bordered="false"
      >
        <a-row class="condition" >
          <a-col span="12" >
            需满足
            <a-dropdown >
              <a class="ant-dropdown-link" @click.prevent>
                {{bodyParamsState.conditionLogic === 'AND' ? '全部' : '任意一个'}}
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="changeConditionLogic('AND')" >
                    <a >全部</a>
                  </a-menu-item>
                  <a-menu-item @click="changeConditionLogic('ALL')">
                    <a >任意一个</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            以下条件：
          </a-col>
          <a-col class="df" span="12" >
            <a-button type="primary" @click="openFormVisible('conditions')">添加条件</a-button>
          </a-col>
          <a-col :span="24"  v-if="deviceDataSource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="conditionColumns.DEVICE_DATA"
              :data-source="deviceDataSource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'conditions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
          <a-col :span="24" v-if="deviceSessionSource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="conditionColumns.DEVICE_SESSION"
              :data-source="deviceSessionSource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'sessionEventType'" >
                {{record.sessionEventType === 'CONNECT' ? '连接' : '断开连接'  }}
                </template>
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'conditions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
          <a-col :span="24" v-if="dailyTimerSource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="conditionColumns.DAILY_TIMER"
              :data-source="dailyTimerSource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'dayOfWeek'" >
                {{record.dayOfWeek.map(item => '周' + item).join(',') }}
                </template>
                <template v-if="column.key === 'time'" >
                {{record.time}}
                </template>
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'conditions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
          <a-col  v-if="bodyParamsState.conditions.length === 0" class="content"  >尚未设置条件</a-col>
        </a-row>
      </a-card>
      <a-card
        title="执行动作"
        :bordered="false"
      >
      <a-row  style="width: 100%;" >
        <a-col :span="24" class="df" ><a-button type="primary" @click="openFormVisible('actions')" >添加动作</a-button></a-col>
        <a-row style="width: 100%;" v-if="bodyParamsState.actions.length">
          <a-col :span="24"  v-if="deviceCmdsource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="actionsColumns.DEVICE_CMD"
              :data-source="deviceCmdsource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'actions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
          <a-col :span="24"  v-if="reportWarnSource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="actionsColumns.REPORT_WARN"
              :data-source="reportWarnSource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'actions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
          <a-col :span="24"  v-if="resumeWarnSource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="actionsColumns.RESUME_WARN"
              :data-source="resumeWarnSource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'actions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
          <a-col :span="24"  v-if="noticeSource.length" >
            <a-table
              style="width: 100%;margin-top: 10px;"
              :columns="actionsColumns.NOTICE"
              :data-source="noticeSource"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{column, record}" >
                <template v-if="column.key === 'action'" >
                  <a @click="delCondiTionsAndActions(record.id, 'actions')" >
                    删除
                  </a>
                </template>
              </template>
            </a-table>
          </a-col>
        </a-row>
        <a-col  class="content"  v-if="bodyParamsState.actions.length === 0"   >尚未设置动作</a-col>
      </a-row>
      </a-card>
    </div>
  </modal-pro>

  <modal-pro
    label="选择"
    :visible="state.formVisible"
    @cancel="state.formVisible = false"
    @ok="selectConditionAndAction"
    style="width: 700px;"
  >
    <div  style="width: 100%;" v-if="state.opraModel === 'conditions'" >
      <a-row :gutter="[8, 8]" style="width: 100%;" >
        <a-form
           style="width: 100%;"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-col>
            <a-form-item label="触发条件" >
              <a-select
                style="width: 170px"
                v-model:value="initConditionsData.conditionType"
              >
                <a-select-option
                  v-for="itemType in conditionTypeList"
                  :key="itemType.key"
                  :value="itemType.key"
                >
                {{itemType.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <span v-if="initConditionsData.conditionType === 'DEVICE_DATA'" >
              <a-form-item label="产品" >
              <a-select
                style="width: 170px"
                placeholder="请选择产品"
                v-model:value="initConditionsData.modelId"
              >
                <a-select-option
                  v-for="model in state.modelList"
                  :key="model.id"
                  :value="model.id"
                >
                  {{model.modelLabel}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="设备类型" >
              <a-space>
                <a-select
                  style="width: 170px"
                  placeholder="请选择设备"
                  v-model:value="initConditionsData.deviceType"
                >
                  <a-select-option
                    v-for="deviceItem in selectDeviceList"
                    :key="deviceItem.key"
                    :value="deviceItem.key"
                  >
                    {{deviceItem.name}}
                  </a-select-option>
                </a-select>
                <a-tag color="blue" v-if="initConditionsData.deviceLabel" >{{initConditionsData.deviceLabel}}</a-tag>
                <a-button
                  type="primary"
                  v-if="initConditionsData.deviceType === 'target'"
                  @click="openDeviceModal('conditions')"
                >
                  {{initConditionsData.deviceId ? '重新选择' : '请选择设备'}}
                </a-button>
              </a-space>
            </a-form-item>
            <a-form-item label="属性key" >
              <a-select
                style="width: 170px"
                placeholder="请选择属性key"
                v-model:value="initConditionsData.attributeKey"
              >
                <a-select-option
                  v-for="attrItem in state.attrList"
                  :key="attrItem.attributeKey"
                  :value="attrItem.attributeKey"
                >
                  {{attrItem.attributeKey}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="操作符" >
              <a-select
                style="width: 170px"
                placeholder="请选择操作符"
                v-model:value="initConditionsData.operator"
              >
                <a-select-option
                  v-for="operaItem in operatorList"
                  :key="operaItem"
                  :value="operaItem"
                >
                  {{operaItem}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="触发值" >
              <a-input
                v-if="initConditionsData.operator !== 'BETWEEN'"
                style="width: 170px;"
                placeholder="请选择触发值"
                v-model:value="initConditionsData.value"
              ></a-input>
              <a-input-group compact v-else >
                <a-input placeholder="值1" v-model:value="initConditionsData.v1" style="width: 20%" />
                <a-input placeholder="值2" v-model:value="initConditionsData.v2" style="width: 30%" />
              </a-input-group>
            </a-form-item>
            </span>
            <span v-else-if="initConditionsData.conditionType === 'DEVICE_SESSION'" >
              <a-form-item label="产品">
                <a-select
                  style="width: 170px"
                  placeholder="请选择产品"
                  v-model:value="initConditionsData.modelId"
                >
                  <a-select-option
                    v-for="model in state.modelList"
                    :key="model.id"
                    :value="model.id"
                  >
                    {{model.modelLabel}}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="设备类型" >
                <a-space>
                  <a-select
                    style="width: 170px"
                    placeholder="请选择设备"
                    v-model:value="initConditionsData.deviceType"
                  >
                    <a-select-option
                      v-for="deviceItem in selectDeviceList"
                      :key="deviceItem.key"
                      :value="deviceItem.key"
                    >
                      {{deviceItem.name}}
                    </a-select-option>
                  </a-select>
                  <a-tag color="blue" v-if="initConditionsData.deviceLabel" >{{initConditionsData.deviceLabel}}</a-tag>
                  <a-button
                    type="primary"
                    v-if="initConditionsData.deviceType === 'target'"
                    @click="openDeviceModal('conditions')"
                  >
                    {{initConditionsData.deviceId ? '重新选择' : '请选择设备'}}
                  </a-button>
                </a-space>
              </a-form-item>
              <a-form-item label="是否连接" >
                <a-select
                  style="width: 170px"
                  placeholder="请选择session"
                  v-model:value="initConditionsData.sessionEventType"
                >
                  <a-select-option
                    v-for="essionEventTypeItem in sessionEventTypeList"
                    :key="essionEventTypeItem.key"
                    :value="essionEventTypeItem.key"
                  >
                    {{essionEventTypeItem.name}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </span>
            <span v-else-if="initConditionsData.conditionType === 'DAILY_TIMER'" >
              <a-form-item label="时间" >
                <a-checkbox-group v-model:value="initConditionsData.dayOfWeek" :options="dayOptions" />
              </a-form-item>
              <a-form-item label="日期" >
                <a-time-picker v-model:value="initConditionsData.time" value-format="HH:mm:ss" />
              </a-form-item>
            </span>
          </a-col>

        </a-form>
      </a-row>
    </div>
    <div v-else  style="width: 100%;" >
      <a-row :gutter="[8, 8]" style="width: 100%;" >
        <a-form
           style="width: 100%;"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-col>
            <a-form-item label="触发动作" >
              <a-select
                style="width: 170px"
                v-model:value="initActionsData.actionType"
              >
                  <a-select-option
                    v-for="actionItem in actionTypeList"
                    :key="actionItem.key"
                    :value="actionItem.key"
                  >
                  {{actionItem.name}}
                  </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <span v-if="initActionsData.actionType === 'DEVICE_CMD'" >
            <a-col>
            <a-form-item label="选择产品" >
              <a-select
                  style="width: 170px"
                  placeholder="请选择产品"
                  v-model:value="initActionsData.modelId"
                >
                <a-select-option
                  v-for="model in state.modelList"
                  :key="model.id"
                  :value="model.id"
                >
                  {{model.modelLabel}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="设备类型" >
              <a-space>
                <a-select
                  style="width: 170px"
                  placeholder="请选择设备"
                  v-model:value="initActionsData.deviceType"
                >
                  <a-select-option
                    v-for="deviceItem in selectDeviceList"
                    :key="deviceItem.key"
                    :value="deviceItem.key"
                  >
                    {{deviceItem.name}}
                  </a-select-option>
                </a-select>
                <a-tag color="blue" v-if="initActionsData.deviceLabel" >{{initActionsData.deviceLabel}}</a-tag>
                <a-button
                  type="primary"
                  v-if="initActionsData.deviceType === 'target'"
                  @click="openDeviceModal('actions')"
                >
                  {{initActionsData.deviceId ? '重新选择' : '请选择设备'}}
                </a-button>
              </a-space>
            </a-form-item>
            <a-form-item label="选择命令" >
              <a-select
                style="width: 170px;"
                v-model:value="initActionsData.cmdId"
              >
                  <a-select-option
                    v-for="cmdItem in state.cmdList"
                    :key="cmdItem.id"
                    :value="cmdItem.id"
                  >
                  {{cmdItem.cmdLabel}}
                  </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="命令参数" >
                <div
                  v-for="(item, index) in initActionsData.cmdParameters"
                  :key="index"
                  style="margin-bottom: 10px;"
                >
                  <a-input-group compact  >
                    <a-input placeholder="key"  disabled v-model:value="item.paramLabel" style="width: 50%" />
                    <a-input placeholder="value" v-model:value="item.dataUnit" style="width: 50%" />
                  </a-input-group>
                </div>
            </a-form-item>
            </a-col>
          </span>
          <span v-else-if="initActionsData.actionType === 'REPORT_WARN'">
            <a-form-item label="设备类型" >
              <a-space>
                  <a-select
                    style="width: 170px"
                    placeholder="请选择设备"
                    v-model:value="initActionsData.deviceType"
                  >
                    <a-select-option
                      v-for="deviceItem in selectDeviceList"
                      :key="deviceItem.key"
                      :value="deviceItem.key"
                    >
                      {{deviceItem.name}}
                    </a-select-option>
                  </a-select>
                  <a-tag color="blue" v-if="initActionsData.deviceLabel" >{{initActionsData.deviceLabel}}</a-tag>
                  <a-button
                    type="primary"
                    v-if="initActionsData.deviceType === 'target'"
                    @click="openDeviceModal('actions')"
                  >
                    {{initActionsData.deviceId ? '重新选择' : '请选择设备'}}
                  </a-button>
                </a-space>
            </a-form-item>
            <a-form-item  label="告警名称" >
              <a-input v-model:value="initActionsData.warnLabel" ></a-input>
            </a-form-item>
            <a-form-item  label="告警描述" >
              <a-input v-model:value="initActionsData.warnDescription" ></a-input>
            </a-form-item>
            <a-form-item  label="告警级别" >
              <a-select  v-model:value="initActionsData.warnSeverity" >
                <a-select-option
                  v-for='warnItem in warnSeverityList'
                  :key="warnItem.key"
                  :value="warnItem.key"
                >
                  {{warnItem.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </span>
          <span v-else-if="initActionsData.actionType === 'RESUME_WARN'">
            <a-form-item label="设备类型" >
              <a-space>
                  <a-select
                    style="width: 170px"
                    placeholder="请选择设备"
                    v-model:value="initActionsData.deviceType"
                  >
                    <a-select-option
                      v-for="deviceItem in selectDeviceList"
                      :key="deviceItem.key"
                      :value="deviceItem.key"
                    >
                      {{deviceItem.name}}
                    </a-select-option>
                  </a-select>
                  <a-tag color="blue" v-if="initActionsData.deviceLabel" >{{initActionsData.deviceLabel}}</a-tag>
                  <a-button
                    type="primary"
                    v-if="initActionsData.deviceType === 'target'"
                    @click="openDeviceModal('actions')"
                  >
                    {{initActionsData.deviceId ? '重新选择' : '请选择设备'}}
                  </a-button>
                </a-space>
            </a-form-item>
            <a-form-item  label="告警名称" >
              <a-input v-model:value="initActionsData.warnLabel" ></a-input>
            </a-form-item>
            <a-form-item  label="告警级别" >
              <a-select v-model:value="initActionsData.warnSeverity" >
                <a-select-option
                  v-for='warnItem in warnSeverityList'
                  :key="warnItem.key"
                  :value="warnItem.key"
                >
                  {{warnItem.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </span>
          <span v-else-if="initActionsData.actionType === 'NOTICE'">
            <a-form-item label="提示名称" >
              <a-input v-model:value="initActionsData.noticeLabel" ></a-input>
            </a-form-item>
            <a-form-item label="提示描述" >
              <a-input v-model:value="initActionsData.noticeDescription" ></a-input>
            </a-form-item>
            <a-form-item label="提示用户" >
              <a-input v-model:value="initActionsData.userId" ></a-input>
            </a-form-item>
          </span>
        </a-form>
      </a-row>
    </div>
  </modal-pro>

  <modal-pro
    style="width: 700px"
    label="选择设备"
    :visible="state.deviceModalVisible"
    @cancel="state.deviceModalVisible = false"
    @ok="selectDevice"
  >
    <SelectDevice
      ref="selectDeviceRef"
    />
  </modal-pro>
</template>
<script lang='ts' setup >
import { FormItemProps } from '@/components/FormPro/index.vue'
import { ModelAttrController, ModelCmdController, ModelController, RuleController } from '@/controller'
import { computed, nextTick, onMounted, reactive, ref, watch, getCurrentInstance } from 'vue'
import { DownOutlined, FacebookFilled } from '@ant-design/icons-vue'
import SelectDevice from './components/selectDevice.vue'
import { useId } from '@/hooks'
import { Form } from 'ant-design-vue'

const {
  proxy: { $forceUpdate }
}: any = getCurrentInstance()

const useForm = Form.useForm

const columns = [
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '规则ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '规则名称',
    dataIndex: 'ruleLabel',
    key: 'ruleLabel'
  },
  {
    title: '规则描述',
    dataIndex: 'ruleDescription',
    key: 'ruleDescription'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const formProps: FormItemProps[] = reactive([
  {
    label: '规则名称',
    key: 'ruleLabel',
    value: '',
    type: 'input',
    rules: true
  },
  {
    label: '规则描述',
    key: 'ruleDescription',
    value: '',
    type: 'textarea',
    rules: false
  }
])

const conditionTypeList = [
  { key: 'DEVICE_DATA', name: '设备数据触发' },
  { key: 'DEVICE_SESSION', name: '设备状态触发' },
  { key: 'DAILY_TIMER', name: '周期时间条件' }
]

const selectDeviceList = [
  { key: 'all', name: '全部设备' },
  { key: 'target', name: '指定设备' }
]

const conditionColumns = reactive({
  DEVICE_DATA: [
    { title: '触发条件', dataIndex: 'conditionType' }, { title: '产品ID', dataIndex: 'modelId' },
    { title: '属性key', dataIndex: 'attributeKey' }, { title: '操作符', dataIndex: 'operator' },
    { title: '触发值', dataIndex: 'value' }, { title: '操作符', dataIndex: 'operator' }, { title: '操作', key: 'action' }
  ],
  DEVICE_SESSION: [
    { title: '触发条件', dataIndex: 'conditionType' }, { title: '产品ID', dataIndex: 'modelId' },
    { title: '设备类型', dataIndex: 'deviceType' }, { title: '设备名称', dataIndex: 'deviceLabel' },
    { title: 'sessionEventType', dataIndex: 'attributeKey', key: 'sessionEventType' }, { title: '操作', key: 'action' }
  ],
  DAILY_TIMER: [
    { title: '触发条件', dataIndex: 'conditionType' }, { title: '时间', dataIndex: 'time', key: 'time' },
    { title: '日期', dataIndex: 'dayOfWeek', key: 'dayOfWeek' }, { title: '操作', key: 'action' }
  ]
})

const actionsColumns = reactive({
  DEVICE_CMD: [
    { title: '触发动作', dataIndex: 'actionType' }, { title: '产品ID', dataIndex: 'modelId' },
    { title: '设备id', dataIndex: 'deviceId' }, { title: '命令名称', dataIndex: 'cmdLabel' },
    { title: '命令参数', dataIndex: 'cmdParameters' }, { title: '操作', dataIndex: 'action', key: 'action' }
  ],
  REPORT_WARN: [
    { title: '触发动作', dataIndex: 'actionType' }, { title: '设备id', dataIndex: 'deviceId' },
    { title: '告警名称', dataIndex: 'warnLabel' }, { title: '告警描述', dataIndex: 'warnDescription' },
    { title: '告警级别', dataIndex: 'warnSeverity' }, { title: '操作', dataIndex: 'action', key: 'action' }
  ],
  RESUME_WARN: [
    { title: '触发动作', dataIndex: 'actionType' }, { title: '告警名称', dataIndex: 'warnLabel' },
    { title: '告警级别', dataIndex: 'warnSeverity' }, { title: '操作', dataIndex: 'action', key: 'action' }
  ],
  NOTICE: [
    { title: '触发动作', dataIndex: 'actionType' }, { title: '提示名称', dataIndex: 'noticeLabel' },
    { title: '提示描述', dataIndex: 'noticeDescription' }, { title: '提示用户', dataIndex: 'userId' },
    { title: '操作', dataIndex: 'action', key: 'action' }
  ]
})

const sessionEventTypeList = [
  { key: 'CONNECT', name: '连接' },
  { key: 'DISCONNECT', name: '断开连接' }
]

const dayOptions = [
  { value: 1, label: '周一' },
  { value: 2, label: '周二' },
  { value: 3, label: '周三' },
  { value: 4, label: '周四' },
  { value: 5, label: '周五' },
  { value: 6, label: '周六' },
  { value: 7, label: '周日' }
]

const actionTypeList = [
  { key: 'DEVICE_CMD', name: '设备命令' },
  { key: 'REPORT_WARN', name: '上报告警' },
  { key: 'RESUME_WARN', name: '恢复告警' },
  { key: 'NOTICE', name: '通知' }
]

const warnSeverityList = [
  { key: 'NOTICE', name: '提示' },
  { key: 'MINOR', name: '次要' },
  { key: 'MJAJOP', name: '重要' },
  { key: 'EMERGENCY', name: '紧急' }
]

const operatorList = [
  'EQ', 'NE', 'GT', 'GE', 'LT', 'LE', 'BETWEEN'
]

const selectDeviceRef = ref('')

const formProRef = ref('')

const queryParamsState = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  ruleLabel: ''
})

const _initConditionsData = {
  conditionType: '',
  modelId: '',
  deviceType: '',
  deviceLabel: '',
  deviceId: '',
  sessionEventType: 'CONNECT',
  dayOfWeek: [],
  time: '',
  noticeLabel: '',
  noticeDescription: '',
  userId: '',
  attributeKey: '',
  operator: 'EQ',
  value: '',
  v1: '',
  v2: ''
}

const initConditionsData = reactive({ ..._initConditionsData })

const _initActionsData = {
  actionType: '',
  modelId: '',
  deviceId: '',
  deviceLabel: '',
  deviceType: '',
  cmdId: '',
  cmdLabel: '',
  cmdParameters: [],
  warnLabel: '',
  warnDescription: '',
  warnSeverity: '',
  noticeLabel: '',
  noticeDescription: '',
  userId: ''
}

const initActionsData = reactive({ ..._initActionsData })

const bodyParamsState = reactive<{
  id: string
  conditions: [],
  actions: [],
  conditionLogic: string
  ruleLabel: string
  ruleDescription: string
}>({
  id: '',
  ruleLabel: '',
  ruleDescription: '',
  conditionLogic: 'AND',
  conditions: [],
  actions: []
})

const state = reactive({
  loading: false,
  dataSource: [],
  visible: false,
  formVisible: false,
  deviceModalVisible: false,
  opraState: 'add',
  modelList: [],
  cmdList: [],
  attrList: [],
  opraModel: '',
  opraIndex: 0, // 点击 条件 与 动作 时的下标
  opraKey: ''
})

watch(
  () => initConditionsData.conditionType,
  () => {
    Object.keys(initConditionsData).forEach(key => {
      if (key !== 'conditionType') {
        initConditionsData[key] = _initConditionsData[key]
      }
    })
  }
)

watch(
  () => initActionsData.actionType,
  () => {
    Object.keys(initActionsData).forEach(key => {
      if (key !== 'actionType') {
        initActionsData[key] = _initActionsData[key]
      }
    })
  }
)

watch(
  () => initConditionsData.modelId,
  () => {
    console.log('我触发吗')
    getAttrList()
  },
  {
    deep: true
  }
)
watch(
  () => initActionsData.modelId,
  () => {
    initActionsData.cmdParameters = []
    initActionsData.cmdLabel = ''
    initActionsData.cmdId = ''
    getCmdList()
  }
)

watch(
  () => initActionsData.cmdId,
  () => {
    const cmdDetail = state.cmdList.find(item => item.id === initActionsData.cmdId)!
    console.log('cmdDetail:', cmdDetail)

    initActionsData.cmdParameters = cmdDetail.cmdParams
    console.log(' initActionsData.cmdParameters:', initActionsData.cmdParameters, initActionsData.cmdId)

    initActionsData.cmdLabel = cmdDetail.cmdLabel
  }
)

const deviceSessionSource = computed(() => bodyParamsState.conditions.filter(item => item.conditionType === 'DEVICE_SESSION'))
const deviceDataSource = computed(() => bodyParamsState.conditions.filter(item => item.conditionType === 'DEVICE_DATA'))
const dailyTimerSource = computed(() => bodyParamsState.conditions.filter(item => item.conditionType === 'DAILY_TIMER'))
const deviceCmdsource = computed(() => bodyParamsState.actions.filter(item => item.actionType === 'DEVICE_CMD'))
const reportWarnSource = computed(() => bodyParamsState.actions.filter(item => item.actionType === 'REPORT_WARN'))
const resumeWarnSource = computed(() => bodyParamsState.actions.filter(item => item.actionType === 'RESUME_WARN'))
const noticeSource = computed(() => bodyParamsState.actions.filter(item => item.actionType === 'NOTICE'))

const { resetFields, validate, validateInfos } = useForm(bodyParamsState, {
  ruleLabel: [{ required: true, message: '请填写联动规则名称' }]
})

const openModal = (_opraState: 'add' | 'update', record: any) => {
  state.visible = true
  state.opraState = _opraState
  getLinkPageById(record.id)
}

const ok = async () => {
  validate().then(async () => {
    bodyParamsState.conditions.forEach(item => {
      if (item.operator === 'BETWEEN') {
        item.value = `{${item.v1}, ${item.v2}}`
      }
    })

    bodyParamsState.actions.forEach(item => {
      if (item.cmdParameters && item.cmdParameters.length) {
        const obj = {}
        item.cmdParameters.forEach(item => {
          obj[item.paramLabel] = item.dataUnit
        })
        item.cmdParameters = obj
      }
    })

    state.opraState === 'add' ? await RuleController.addLink({ ...bodyParamsState }) : await RuleController.updateLink({ ...bodyParamsState })
    state.visible = false
    getLinkPage()
  })
}

// 选择设备
const selectDevice = () => {
  const _device = selectDeviceRef.value.getSelectDevice()
  state.deviceModalVisible = false
  if (state.opraKey === 'conditions') {
    initConditionsData.deviceLabel = _device.deviceLabelß
    initConditionsData.deviceId = _device.id
  } else {
    initActionsData.deviceLabel = _device.deviceLabel
    initActionsData.deviceId = _device.id
  }
}

const changePage = ({ current }) => {
  queryParamsState.page = current
  getLinkPage()
}

// 打开选择设备弹窗
const openDeviceModal = (key: 'conditions' | 'actions') => {
  state.deviceModalVisible = true
  state.opraKey = key
}

const openFormVisible = (model: 'conditions' | 'actions') => {
  state.formVisible = true
  state.opraModel = model
}

// 删除条件或则动作
const delCondiTionsAndActions = (id: string, key: 'conditions' | 'actions') => {
  const index = bodyParamsState[key].findIndex(item => item.id === id)
  bodyParamsState[key].splice(index, 1)
}

const selectConditionAndAction = () => {
  if (state.opraModel === 'conditions') {
    bodyParamsState.conditions.push({ ...initConditionsData, id: useId() })
  } else {
    bodyParamsState.actions.push({ ...initActionsData, id: useId() })
  }
  state.formVisible = false
}

// 获取命令
const getCmdList = async () => {
  const { data } = await ModelCmdController.list({ modelId: initActionsData.modelId })
  state.cmdList = data
}

// 获取属性
const getAttrList = async () => {
  const { data } = await ModelAttrController.list({ modelId: initConditionsData.modelId })
  state.attrList = data
}

// 获取模型
const getModelList = async () => {
  const { data } = await ModelController.list()
  state.modelList = data
}

const getLinkPageById = async (id: string) => {
  const { data } = await RuleController.getLinkById(id)
  console.log(data)
  resetFields({
    ruleLabel: data.ruleLabel,
    ruleDescription: data.ruleDescription
  })
  bodyParamsState.conditionLogic = data.conditionLogic
  bodyParamsState.actions = data.actions.map(item => {
    return {
      ...item,
      id: useId()
    }
  })
  bodyParamsState.conditions = data.conditions.map(item => {
    return {
      ...item,
      id: useId()
    }
  })
  $forceUpdate()
  bodyParamsState.id = data.id
}

const getLinkPage = async () => {
  state.loading = true
  const { data, sum } = await RuleController.pageLink(queryParamsState)
  state.dataSource = data
  queryParamsState.total = sum
  state.loading = false
}

onMounted(() => {
  getLinkPage()
  getModelList()
})

</script>
<style lang='less' scoped >

.content {
  width: 100%;
  height: 45px;
  background-color: #F2F5FC;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.df {
  display: flex;
  justify-content: end;
}

</style>