<template>
  <modal-pro
    title="命令下发"
    style="width: 700px;"
    :open="visible"
    @cancel="emits('cancel')"
    @ok="ok"
  >
  <a-alert message="同步命令成功下发后，设备需要在20秒内向平台回复响应，否则会认为命令请求超时。" type="info" show-icon style="margin-bottom: 20px;" />
    <a-form
    :labelCol="{span: 4}"
    :wrapperCol="{span: 14}"
  >
    <a-form-item
      label="命令名称"
      v-bind="validateInfosCmd.cmdId"
    >
      <a-select allowClear v-model:value="cmdState.cmdId" >
        <a-select-option
          v-for="item in state.cmdList"
          :key="item.id"
          :value="item.id"
        >
        {{item.cmdLabel}}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="设置命令参数"
      v-if="cmdDetail?.cmdParams"
    >
      <a-row>
        <a-col v-for="(item, index) in cmdDetail?.cmdParams" :key="index" style="margin: 10px 0px;"  >
          <a-input-group  size="large"  >
            <a-row :gutter="8" align="middle" >
              <a-col :span="8">
                <a-input allowClear placeholder="key" v-model:value="item.paramLabel"  disabled />
              </a-col>
              <a-col :span="8">
                <a-input allowClear placeholder="value" v-model:value="item.dataUnit" />
              </a-col>
            </a-row>
          </a-input-group>
        </a-col>
      </a-row>
    </a-form-item>
    <a-form-item  label="设置命令参数" >
      产品尚未配置命令，请先去 <a @click="pushProductDetail" >产品详情</a> 定义命令。
    </a-form-item>
    </a-form>
  </modal-pro>
</template>

<script setup lang="ts" >
import { computed, reactive, watch } from 'vue'
import { DeviceContriller, ModelCmdController } from '@/controller'
import { useRouter } from 'vue-router'
import { Form } from 'ant-design-vue'

interface IProps {
  visible: boolean
  deviceId: string
  modelId: string
}

const router = useRouter()

const useForm = Form.useForm

const props = defineProps<IProps>()

const emits = defineEmits(['cancel', 'ok'])

const state = reactive<{
  cmdList: Partial<IOT.API.CMD.Cmd[]>
}>({
  cmdList: []
})

const cmdState = reactive<{
  cmdId: string
  deviceId: string,
  cmdLabel: string,
  cmdParameters: {key: string, value: string}[]
}>({
  cmdId: '',
  deviceId: props.deviceId,
  cmdLabel: '',
  cmdParameters: []
})

const cmdDetail = computed(() => state.cmdList.find(item => item.id === cmdState.cmdId))

const { resetFields: resetFieldsCmd, validate: validateCmd, validateInfos: validateInfosCmd } = useForm(cmdState, reactive({
  cmdId: [{ required: true, message: '请填写命令名称' }]
}))

const pushProductDetail = () => {
  router.push({ path: '/product/detail', query: { id: props.modelId } })
}

const getModelCmdList = async () => {
  const { data } = await ModelCmdController.list({ modelId: props.modelId })
  state.cmdList = data
}

const ok = () => {
  validateCmd().then(async () => {
    const _cmdParameters: Record<string, string> = {}

    cmdDetail.value?.cmdParams.forEach(item => {
      _cmdParameters[item.paramLabel] = item.dataUnit
    })

    const $params = {
      ...cmdState,
      cmdLabel: cmdDetail.value!.cmdLabel,
      cmdParameters: _cmdParameters
    }
    await DeviceContriller.addDeviceCmd($params)
    emits('ok')
  })
}

watch(
  () => props.visible,
  () => {
    if (props.visible) {
      cmdState.deviceId = props.deviceId
      getModelCmdList()
    }
  }
)

</script>

<style>
</style>
