<template>
  <el-dialog v-model="showDialog" :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 } from 'vue';
const { proxy } = getCurrentInstance();
const { D_GS_ZDR_YJDJ ,BD_BK_CLYJBQ} = proxy.$dict("D_GS_ZDR_YJDJ",'BD_BK_CLYJBQ'); // 获取字典数据
const elform = ref()
const roleIds = ref([])
const showDialog = ref(false)
const chooseMarksVisible = ref(false)
const emit = defineEmits(['change'])
const listQuery = ref({})
const formData = ref([
  { label: "车牌号", prop: "clCph", type: "input" },
  {
    label: "车辆颜色",
    prop: "clYs",
    type: "input",
  },
  { label: "车辆所有人", prop: "clSyr", type: "input" },
  { label: "所有人身份证号", prop: "clSyrsfzh", type: "input" },
  { label: "所属部门", prop: "ssbmdm", type: "department" },
  { label: "预警等级", prop: "yjdj", type: "select", options: D_GS_ZDR_YJDJ },
  { label: "预警标签", prop: "yjbq", type: "select", options: BD_BK_CLYJBQ },
  { label: "车辆照片", prop: "fjdz", type: "upload", width: "100%" },
])
const rules = reactive({
  clCph: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
  yjdj: [{ required: true, message: "请选择预警等级", trigger: "change" }],
  yjbq: [{ required: true, message: "请选择预警标签", trigger: "change" }],
  ssbmdm:[{ required: true, message: "请选择所属部门", trigger: "change" }]
})
const init = () => {
  showDialog.value = 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()
    emit('change', val)
    showDialog.value = false;
  })
}

const close = () => {
  elform.value.reset();
  listQuery.value = {}
  listQuery.value.bqList = []
  roleIds.value = []
  showDialog.value = false;
}

defineExpose({ init })
</script>

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