<template>
<a-card>
  <a-form>
    <a-form-item label="选择产品"  v-bind="validateInfos.modelId">
        <a-select
        allowClear
          placeholder="请选择产品"
          v-model:value="modalRef.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="选择设备" v-bind="validateInfos.deviceId">
        <a-select
        allowClear
          placeholder="请选择产品"
          v-model:value="modalRef.deviceId"
        >
          <a-select-option
            v-for="device in state.deviceList"
            :key="device.id"
            :value="device.id"
          >
            {{device.deviceLabel}}
          </a-select-option>
        </a-select>
    </a-form-item>
    <a-form-item label="选择状态" v-bind="validateInfos.sessionEvent">
        <a-select
        allowClear
          placeholder="请选择状态"
          v-model:value="modalRef.sessionEvent"
        >
          <a-select-option
            v-for="sessionEvent in sessionEvents"
            :key="sessionEvent.key"
            :value="sessionEvent.key"
          >
            {{sessionEvent.label}}
          </a-select-option>
        </a-select>
    </a-form-item>
    <a-form-item label="填写数据" v-bind="validateInfos.payloads" >
      <a-row :gutter="[8, 8]" >
        <a-col  v-for="(item, index) in modalRef.payload" :key="index" >
            <a-space>
              <a-select allowClear style="width: 100px" v-model:value="item.dataType">
                <a-select-option
                  v-for="dataType in dataTypes"
                  :key="dataType"
                  :value="dataType"
                >
                  {{dataType}}
                </a-select-option>
              </a-select>
              <a-input allowClear style="width: 170px" v-model:value="item.key" ></a-input>
              <a-input allowClear style="width: 170px" v-model:value="item.value" ></a-input>
          </a-space>
        </a-col>
      </a-row>

      <a-button style="margin-top: 20px;" type="primary" @click="pushPayloads">
        添加
      </a-button>
    </a-form-item>

  </a-form>
</a-card>
</template>
<script lang='ts' setup >
import { DeviceContriller, ModelCmdController, ModelController } from '@/controller'
import { onMounted, reactive } from 'vue'
import { Form } from 'ant-design-vue'

interface IPorps {
  visible?: boolean
}

const props = defineProps<IPorps>()

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

const dataTypes = ['STRING', 'LONG', 'BOOLEAN', 'DOUBLE']

const state = reactive({
  modelList: [],
  deviceList: []
})

const modalRef = reactive({
  ruleId: '',
  modelId: '',
  deviceId: '',
  sessionEvent: [],
  payload: [{
    key: '',
    value: '',
    dataType: ''
  }]
})

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
  payloads: [{ required: true, message: '请填写任务描述' }],
  sessionEvent: [{ required: true, message: '请选择设备连接状态' }],
  modelId: [{ required: true, message: '请选择产品' }],
  deviceId: [{ required: true, message: '请选择设备' }]
}))

const pushPayloads = () => {
  modalRef.payload.push({
    key: '',
    value: '',
    dataType: ''
  })
}

const getModelList = async () => {
  const { data } = await ModelController.list()
  state.modelList = data
}

const getDeviceList = async () => {
  const { data } = await DeviceContriller.list()
  state.deviceList = data
}

defineExpose({
  getValue: async () => {
    return new Promise((resolve) => {
      validate().then(async () => {
        resolve(await modalRef)
      })
    })
  }
})

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

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

</style>
