<!-- 任务属性模型表单（property 项） -->
<template>
  <el-form-item
    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
    label="数据类型"
    prop="extProperty.dataType"
  >
    <el-select v-model="extProperty.dataType" placeholder="请选择数据类型" @change="handleChange">
      <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） ${option.value}(${option.label}) -->
      <el-option
        v-for="option in getDataTypeOptions"
        :key="option.value"
        :label="`${option.label}`"
        :value="option.value"
      />
    </el-select>
  </el-form-item>
  <!-- 数值型配置 -->
  <TaskAttrModelNumberDataSpecs
    v-if="
      [DataSpecsDataType.DOUBLE].includes(
        extProperty.dataType || ''
      )
    "
    v-model="extProperty.dataType"
  />
  <!-- 枚举型配置 -->
  <TaskAttrModelDropdownDataSpecs
    v-if="extProperty.dataType === DataSpecsDataType.DROPDOWN"
    v-model="extProperty.dropdownList"
  />
  <!-- 时间型配置 -->
  <el-form-item v-if="extProperty.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
    <el-input class="w-255px!" disabled placeholder="String 类型的 UTC 时间戳（毫秒）" />
  </el-form-item>
  <el-form-item v-if="!isStructDataSpecs && !isParams" label="是否必填" prop="extProperty.required">
    <el-radio-group v-model="extProperty.required">
      <el-radio :label="TaskAttrModelRequired.REQUIRED.value">
        {{ TaskAttrModelRequired.REQUIRED.label }}
      </el-radio>
      <el-radio :label="TaskAttrModelRequired.NOT_REQUIRED.value">
        {{ TaskAttrModelRequired.NOT_REQUIRED.label }}
      </el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import {
  DataSpecsDataType,
  dataTypeOptions,
  TaskAttrModelRequired
} from './config'
import { isEmpty } from '@/utils/is'
import { TaskTemplateAttrs } from "@/api/pms/iotprojecttaskattrs";

/** 任务属性模板 属性 */
defineOptions({ name: 'AttrTemplateModelProperty' })

const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean; isParams?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const extProperty = useVModel(props, 'modelValue', emits) as Ref<TaskTemplateAttrs>
const getDataTypeOptions = computed(() => {
  return dataTypeOptions
}) // 获得数据类型列表

/** 属性值的数据类型切换时初始化相关数据 */
const handleChange = (dataType: any) => {
  if (!Array.isArray(extProperty.value.dropdownList)) {
    extProperty.value.dropdownList = []
  }
  // 不是列表型数据才设置 dataSpecs.dataType
  /* ![DataSpecsDataType.DROPDOWN].includes(dataType) &&
    (extProperty.value.dataSpecs.dataType = dataType) */
  switch (dataType) {
    case DataSpecsDataType.DROPDOWN:
      if (extProperty.value.dropdownList.length === 0) {
        extProperty.value.dropdownList.push({
          name: '', // 枚举项的名称
          value: undefined // 枚举值
        })
      }
      break
  }
}

// 默认选中 是否必填
watch(
  () => extProperty.value.required,
  (val: string) => {
    if (props.isStructDataSpecs || props.isParams) {
      return
    }
    isEmpty(val) && (extProperty.value.required = TaskAttrModelRequired.REQUIRED.value)
  },
  { immediate: true }
)

</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
