<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}重点人管理</span>
      <div>
        <el-button type="primary" size="small" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <FormMessage :disabled="disabled" v-model="listQuery" :formList="formData" labelWidth="100px" ref="elform"
        :rules="rules"></FormMessage>
      <div class="ml50 mr50">
        <span class="mr10">人员标签模型 : </span><el-button type="primary" v-if="!disabled"
          @click="chooseMarksVisible = true">选择</el-button>
      </div>
      <div class="boxlist ml50 mr50">
        <MyTable :tableData="listQuery.bqList" :tableColumn="tableDate.tableColumn" :key="tableDate.keyCount"
          :tableConfiger="tableDate.tableConfiger" :controlsWidth="tableDate.controlsWidth">
          <template #bqLb="{ row }">
            <DictTag :value="row.bqLb" :tag="false" :options="props.dic.D_GS_BQ_LB" />
          </template>
          <template #bqLx="{ row }">
            <DictTag :value="row.bqLx" :tag="false" :options="props.dic.D_GS_BQ_LX" />
          </template>
          <template #bqZl="{ row }">
            <DictTag :value="row.bqZl" :tag="false" :options="props.dic.D_GS_BQ_ZL" />
          </template>
          <template #controls="{ row }">
            <el-link type="danger" @click="delDictItem(row.bqId)">删除</el-link>
          </template>
        </MyTable>
      </div>
      <!-- 选择审核人 -->
      <div class="ww100 mt20 ml50 mr50">
        <el-steps direction="vertical" :active="listQuery.wccz" space="500" finish-status="success">
          <el-step title="发起申请">
            <template #description>
              <div class="flex align-center ww100 mt10 mb20">
                <el-input v-model="listQuery.sqrXm" readonly class="ww20"></el-input>
                <el-input v-model="listQuery.sqrSsbmmc" readonly class="ww20 ml10 mr10"></el-input>
                <span class="f12" style="color: #333333">
                  备注发起人和部门根据登陆人自动填写</span>
              </div>
            </template>
          </el-step>
          <el-step title="审核确认">
            <template #description>
              <div class="flex align-center ww100 mt10 mb20 depBox">
                <span class="mr4">审核部门 : </span>
                <MOSTY.Department :isAll="true" @getDepValue="getShdep" v-model="listQuery.shSsbmdm" clearable :placeholder="listQuery.shSsbmmc ? listQuery.shSsbmmc : ''" />
              </div>
            </template>
          </el-step>
          <el-step title="审批确认">
            <template #description>
              <div class="flex align-center ww100 mt10 mb20 depBox">
                <span lass="mr4">审批部门 : </span>
                <MOSTY.Department :isAll="true" @getDepValue="getSPdep" v-model="listQuery.spSsbmdm" clearable :placeholder="listQuery.spSsbmmc ? listQuery.spSsbmmc : ''" />
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
  <ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
</template>

<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import {
  ref,
  defineExpose,
  reactive,
  onMounted,
  defineEmits,
  getCurrentInstance,
  watch
} from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
  dic: Object
});
const { proxy } = getCurrentInstance();
const roleIds = ref([]);
const chooseMarksVisible = ref(false);
const dialogForm = ref(false); //弹窗
const pcsList = ref([]);
const rules = reactive({
  ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  ...rule.identityCardRule({ validator: true },'rySfzh'), //身份证校验
  ...rule.phoneRule({ validator: true }, "ryLxdh"), // 是否必填 是否进行校验,
  rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  ryLxdh: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
  ryMz: [{ required: true, message: "请选择民族", trigger: "change" }],
  ryCsrq: [{ required: true, message: "请选择出生日期", trigger: "change" }],
  ryJg: [{ required: true, message: "请选择籍贯", trigger: "change" }],
  zdrRyjb: [{ required: true, message: "请选择人员级别", trigger: "change" }],
  zdrYjdj: [{ required: true, message: "请选择预警等级", trigger: "change" }]
});
const listQuery = ref({}); //表单
const formData = ref([]);
watch(() => props.dic,(val) => {
    formData.value = [
      { label: "姓名", prop: "ryXm", type: "input" },
      {
        label: "性别",
        prop: "ryXb",
        type: "select",
        options: props.dic.D_BZ_XB
      },
      {
        label: "民族",
        prop: "ryMz",
        type: "select",
        options: props.dic.D_BZ_MZ
      },
      { label: "身份证号", prop: "rySfzh", type: "input" },
      { label: "联系电话", prop: "ryLxdh", type: "input" },
      { label: "出生日期", prop: "ryCsrq", type: "date" },
      {
        label: "籍贯",
        prop: "ryJg",
        type: "select",
        options: props.dic.D_BZ_XZQHDM
      },
      {
        label: "人员级别",
        prop: "zdrRyjb",
        type: "select",
        options: props.dic.D_GS_ZDR_RYJB
      },
      {
        label: "预警等级",
        prop: "zdrYjdj",
        type: "select",
        options: props.dic.D_GS_ZDR_YJDJ
      },
      {
        label: "户籍地区划",
        prop: "hjdQh",
        type: "select",
        options: props.dic.D_BZ_XZQHDM
      },
      { label: "户籍地详址", prop: "hjdXz", type: "input" },
      {
        label: "户籍地派出所",
        prop: "hjdPcsdm",
        type: "select",
        options: pcsList
      },
      {
        label: "现住地区划",
        prop: "xzdQh",
        type: "select",
        options: props.dic.D_BZ_XZQHDM
      },
      { label: "现住地详址", prop: "xzdXz", type: "input" },
      {
        label: "现住地派出所",
        prop: "xzdPcsdm",
        type: "select",
        options: pcsList
      },
      { label: "管辖单位", prop: "gxSsbmdm",depMc:'gxSsbmmc', type: "department" },
      { label: "诉求单位", prop: "sqSsbmdm",depMc:'sqSsbmmc', type: "department" },
      { label: "责任单位", prop: "zrSsbmdm",depMc:'zrSsbmmc', type: "department" },
      {
        label: "所属警种",
        prop: "zdrSsjz",
        type: "select",
        options: props.dic.D_GS_BK_SSJZ
      },
      {
        label: "涉及警种",
        prop: "zdrSjjz",
        type: "select",
        options: props.dic.D_GS_BK_SSJZ,
        multiple: true
      },
      { label: "管控民警姓名", prop: "gkMjXm", type: "input" },
      { label: "管控民警警号", prop: "gkMjJh", type: "input" },
      { label: "管控原因", prop: "zdrLkyy", type: "textarea", width: "100%" },
      {
        label: "处置状态",
        prop: "zdrCzzt",
        type: "select",
        options: props.dic.D_GS_ZDR_CZZT
      },
      { label: "入库开始时间", prop: "zdrRkkssj", type: "datetime" },
      { label: "入库结束时间", prop: "zdrRkjssj", type: "datetime" }
    ];
  },
  { immediate: true, deep: true }
);

const tableDate = reactive({
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  controlsWidth: 90, //操作栏宽度
  keyCount: 0,
  tableColumn: [
    { label: "标签名称", prop: "bqMc" },
    { label: "标签代码", prop: "bqDm" },
    { label: "标签种类", prop: "bqZl", showSolt: true },
    { label: "标签类型", prop: "bqLx", showSolt: true },
    { label: "标签类别", prop: "bqLb", showSolt: true }
  ]
});
const loading = ref(false);
const elform = ref();
const title = ref("");
const showInfo = ref(false);
const disabled = ref(false);

onMounted(() => {
  chooseDep();
});

const chooseDep = () => {
  qcckPost({ orgLevel: 40 }, "/mosty-base/deptFeign/queryListByDept").then(
    (res) => {
      pcsList.value = res.map((item) => {
        return { zdmc: item.orgName, dm: item.orgCode, value: item.orgCode };
      });
    }
  );
};

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : type == "detail" ? "详情" : "编辑";
  disabled.value = type == "detail" ? true : false;
  tableDate.tableConfiger.haveControls = type == "detail" ? false : true;
  if (type == "add") {
    listQuery.value.sqrXm = getItem("USERNAME");
    listQuery.value.bkfqrSfzh = getItem("idEntityCard");
    listQuery.value.sqrSsbmmc = getItem("deptId")[0].deptName;
    listQuery.value.sqrSsbmdm = getItem("deptId")[0].deptCode;
  }
  setTimeout(() => {
    showInfo.value = true;
  }, 5);
  if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtZdry/selectVoById/" + id).then((res) => {
    listQuery.value = res;
    listQuery.value.zdrSjjz = listQuery.value.zdrSjjz.split(",");
    tableDate.bqList = res.bqList;
    listQuery.value.sqrXm = getItem("USERNAME");
    listQuery.value.bkfqrSfzh = getItem("idEntityCard");
    listQuery.value.sqrSsbmmc = getItem("deptId")[0].deptName;
    listQuery.value.sqrSsbmdm = getItem("deptId")[0].deptCode;
  });
};

// 选择标签
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 delDictItem = (bqId) => {
  listQuery.value.bqList = listQuery.value.bqList.filter((v) => v.bqId != bqId);
  tableDate.keyCount++;
};

// 提交
const submit = () => {

  elform.value.submit((data) => {
  console.log("xxxxx");

    console.log(data);

    data.zdrSjjz = data.zdrSjjz.join(",");
    let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtZdry/save" : "/mosty-gsxt/tbGsxtZdry/update";
    let params = { ...data };
    if (params.hjdPcsdm) {
      let obj = pcsList.value.find((v) => v.dm == params.hjdPcsdm);
      params.hjdPcsmc = obj ? obj.zdmc : "";
    }
    if (params.xzdPcsdm) {
      let obj1 = pcsList.value.map((v) => v.dm == params.xzdPcsdm);
      params.xzdPcsmc = obj1 ? obj1.zdmc : "";
    }
    loading.value = true;
    qcckPost(params, url).then(() => {
      loading.value = false;
      proxy.$message({ type: "success", message: title.value + "成功" });
      emit("updateDate");
      close();
    }).catch(() => {
      loading.value = false;
    });
  });
};


const getShdep = (val) =>{
  listQuery.value.shSsbmmc = val ? val.orgName : ''
}
const getSPdep = (val) =>{
  listQuery.value.spSsbmmc = val ? val.orgName : ''
}

// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  color: #0072ff;
  background: rgba(0, 114, 255, 0.3);
}

.boxlist {
  width: calc(99% - 50px);
  margin-top: 10px;
  overflow: hidden;
}

.depBox {
  border: 1px solid #e9e9e9;
  width: 305px;
  padding: 0 0 0 4px;
  border-radius: 4px;

  ::v-deep .el-input__inner {
    border: none;
  }

  ::v-deep .el-cascader .el-input.is-focus .el-input__inner {
    border-color: transparent !important;
  }

  ::v-deep .el-input__inner:focus {
    box-shadow: none;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    border-color: transparent !important;
  }
}
</style>
