<template>
  <el-dialog v-model="modelValue" :destroy-on-close="true" title="新增布控" @close="close" :close-on-click-modal="false">
    <FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
      <template #bqList>
        <div class="marks pointer" @click="chooseMarksVisible = true">
          <span style="color: rgb(175 178 184);padding-left: 10px;"
            v-if="!listQuery.bqList || listQuery.bqList.length == 0">请选择标签</span>
          <span v-else>
            <el-tag @close.stop="closeTag(idx)" type="success" closable v-for="(it, idx) in listQuery.bqList"
              :key="idx">{{ it.bqMc }}</el-tag>
          </span>
        </div>
      </template>
    </FormMessage>
    <template #footer>
      <div class="flex just-center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
</template>

<script setup>
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { reactive, ref, getCurrentInstance, watch } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  bkDx: {
    type: String,
    default: '01'
  }
})
const emits = defineEmits(["update:modelValue", "choosed", "choosedAdd"]);
const { proxy } = getCurrentInstance();
const { D_BZ_XB, D_GS_ZDR_YJDJ } = proxy.$dict("D_BZ_XB", "D_GS_ZDR_YJDJ"); // 获取字典数据
const elform = ref()
const roleIds = ref([])
const chooseMarksVisible = ref(false)
const listQuery = ref({})

const formData = ref()
const rules = ref()
const tableColumnList = {
  '04': [
    { label: "身份证号", prop: "rySfzh", type: "input" },
    { label: "姓名", prop: "ryXm", type: "input", },
    { label: "性别", prop: "ryXb", type: "select", options: D_BZ_XB },
    { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
    { label: "责任部门", prop: "ssbmdm", type: "department" },
    { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  ],

  '05': [
    { label: "车辆识别代码", prop: "clCjh", type: "input" },
    { label: "车牌号", prop: "clCph", type: "input", },
    { label: "姓名", prop: "ryXm", type: "input", },
    { label: "责任部门", prop: "ssbmdm", type: "department" },
    { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
    { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  ],
  '06': [
    { label: "Mac地址", prop: "mac", type: "input" },
    { label: "责任部门", prop: "ssbmdm", type: "department" },
    { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
    { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  ],
  '07': [
    { label: "IMEI", prop: "imei", type: "input" },
    { label: "责任部门", prop: "ssbmdm", type: "department" },
    { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
    { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  ],
  '08': [
    { label: "IMSI", prop: "imsi", type: "input" },
    { label: "责任部门", prop: "ssbmdm", type: "department" },
    { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
    { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  ],
  '09': [
    { label: "电话", prop: "rySjhm", type: "input" },
    { label: "姓名", prop: "ryXm", type: "input", },
    { label: "责任部门", prop: "ssbmdm", type: "department" },
    { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
    { label: "性别", prop: "ryXb", type: "select", options: D_BZ_XB },
    { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  ],
  '10': [{ label: "姓名", prop: "ryXm", type: "input", },
  { label: "身份证号", prop: "rySfzh", type: "input" },
  { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
  { label: "性别", prop: "ryXb", type: "select", options: D_BZ_XB },
  { label: "标签", prop: "bqList", type: "slot", width: '100%' },
  { label: "责任部门", prop: "ssbmdm", type: "department" },
  { label: "人员照片", prop: "fjZp", type: "upload", width: '100%' },
  ],
}
const rulesList = {
  '04': {
    rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],

  },
  '03': {
    fjZp: [{ required: true, message: "请选择附件", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  },
  '05': {
    clCjh: [{ required: true, message: "请输入车辆识别代码", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  },
  '06': {
    mac: [{ required: true, message: "请输入Mac地址", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  },
  '07': {
    imei: [{ required: true, message: "请输入IMEI", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  },
  '08': {
    imsi: [{ required: true, message: "请输入IMSI", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  },
  '09': {
    dh: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
    ssbmdm: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    yjdj: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  }
}
watch(() => props.bkDx, (val, oldval) => {
  formData.value = tableColumnList[val]
  rules.value = rulesList[val]
}, { immediate: true })


// 选择标签
const choosed = (val) => {
  listQuery.value.bqList = val.map(v => {
    return { bqZl: v.bqLb, bqId: v.id, bqLx: v.bqLx, bqLb: v.bqLb, bqMc: v.bqMc, bqDm: v.bqDm }
  });
  roleIds.value = val.map(v => v.id)
}

// 删除数据
const closeTag = (idx) => {
  listQuery.value.bqList.splice(idx, 1)
  roleIds.value.splice(idx, 1)
}

const submitForm = () => {
  elform.value.submit((val) => {
    val.id = new Date().getTime()
    emits('choosedAdd', val)
    close()
  })
}

const close = async () => {
  roleIds.value = []
  listQuery.value = {}
  listQuery.value.fjZp = []
  await emits("update:modelValue", false);

}

</script>

<style lang="scss" scoped>
.marks {
  width: 100%;
  min-height: 32px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
}
</style>
