<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">人力情报信息搜索任务调度{{ title }} </span>
      <div>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="submit"
          >保存</el-button
        >
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <FormMessage
        :formList="formData"
        v-model="listQuery"
        ref="elform"
        :rules="rules"
      >
        <!-- 线索列表-->
        <template #xsList>
          <el-button @click="openDialog()">选择</el-button>
          <div class="boxlist">
            <MyTable
              :tableData="tableDate.xsList"
              :tableColumn="tableDate.tableColumn"
              :tableHeight="tableDate.tableHeight"
              :key="tableDate.keyCount"
              :tableConfiger="tableDate.tableConfiger"
              :controlsWidth="tableDate.controlsWidth"
              @chooseData="chooseData"
            >
              <template #xsLy="{ row }">
                <DictTag :tag="false" :value="row.xsLy" :options="D_GS_XS_LY" />
              </template>
              <template #xsFxdj="{ row }">
                <DictTag
                  :tag="false"
                  :value="row.xsFxdj"
                  :options="D_GS_XS_FXDJ"
                />
              </template>

              <template #xsQtlx="{ row }">
                <DictTag
                  :tag="false"
                  :value="row.xsQtlx"
                  :options="D_GS_ZDQT_LB"
                />
              </template>
              <template #xsZtCz="{ row }">
                <DictTag
                  :tag="false"
                  :value="row.xsZtCz"
                  :options="D_GS_XS_CZZT"
                />
              </template>
              <template #xsZt="{ row }">
                <DictTag :tag="false" :value="row.xsZt" :options="D_GS_XS_ZT" />
              </template>
              <!-- 操作 -->
              <template #controls="{ row }">
                <el-link size="small" type="danger" @click="delDictItem(row.id)"
                  >删除</el-link
                >
                <el-link size="small" type="warning" @click="relevancyClue(row)"
                  >解除关联</el-link
                >
              </template>
            </MyTable>
          </div>
        </template>
      </FormMessage>
      <!-- 列表弹窗 -->
      <DialogList
        :Single="false"
        :roleIds="roleIds"
        v-if="chooseShow"
        @chooseDate="chooseDate"
        :titleValue="chooseTitle"
        v-model="chooseShow"
        :bqLx="chooseType"
        bqDl="02"
      ></DialogList>
    </div>
  </div>
</template>

<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import DialogList from "./dialogList.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import * as rule from "@/utils/rules.js";
import { selectUserDeptPage } from "@/api/user-manage";

import {
  ref,
  defineExpose,
  reactive,
  onMounted,
  defineEmits,
  getCurrentInstance,
  nextTick
} from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
  dic: Object
});
const { proxy } = getCurrentInstance();
const {
  D_GS_RLQB_RWDD_LX,
  D_GS_RLQB_RWDD_LY,
  D_GS_RLQB_RWDD_YZCD,
  D_GS_XS_FXDJ,
  D_GS_XS_CZZT,
  D_GS_XS_ZT,
  D_GS_XS_LY,
  D_GS_ZDQT_LB
} = proxy.$dict(
  "D_GS_RLQB_RWDD_LX",
  "D_GS_RLQB_RWDD_LY",
  "D_GS_RLQB_RWDD_YZCD",
  "D_GS_XS_FXDJ",
  "D_GS_XS_CZZT",
  "D_GS_XS_ZT",
  "D_GS_XS_LY",
  "D_GS_ZDQT_LB"
);
const tableDate = reactive({
  xsList: [], //表格数据
  rykeyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    size: "small",
    border: true
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 220, //操作栏宽度
  tableColumn: [
    { label: "线索名称", prop: "xsMc", width: "100px" },
    { label: "线索编号", prop: "xsBh", width: "100px" },
    { label: "线索来源", prop: "xsLy", showSolt: true, width: "100px" },
    { label: "风险等级", prop: "xsFxdj", showSolt: true, width: "100px" },
    { label: "开始时间", prop: "startTime", width: "100px" },
    { label: "结束时间", prop: "ryXjd", width: "100px" },
    { label: "指向地点", prop: "xsZxdd", width: "100px" },
    { label: "线索内容", prop: "xsNr", width: "100px" },
    { label: "群体类型", prop: "xsQtlx", showSolt: true, width: "100px" },
    { label: "群体名称", prop: "xsQtmc", width: "100px" },
    { label: "上报单位", prop: "sbDwMc", width: "100px" },
    { label: "上报时间", prop: "sbSj", width: "100px" },
    { label: "涉及人数", prop: "xsSjrs", width: "100px" },
    { label: "处置状态", prop: "xsZtCz", width: "100px", showSolt: true },
    { label: "状态", prop: "xsZt", width: "100px", showSolt: true }
  ]
});
const dialogForm = ref(false); //弹窗
const chooseTitle = ref(""); //选择弹窗
const formData = ref([
  { label: "报送单位", prop: "ssbmdm", type: "department" },
  { label: "任务标题", prop: "rwBt", type: "input" },
  { label: "任务来源", prop: "rwLy", type: "select", options: D_GS_RLQB_RWDD_LY },
  { label: "反馈开始时间", prop: "rwSjKs", type: "datetime" },
  { label: "反馈截止时间", prop: "rwSjFkjz", type: "datetime" },
  { label: "严重程度", prop: "rwYzcd", type: "select", options: D_GS_RLQB_RWDD_YZCD},
  { label: "任务内容", prop: "rwNr", type: "textarea", width: "100%" },
  { label: "线索列表", prop: "xsList", type: "slot", width: "80%" }
]);
const listQuery = ref({}); //表单
const roleIds = ref([]); //角色id

const chooseShow = ref(false); //选择弹窗
const loading = ref(false);
const elform = ref();
const title = ref("");
const deptList = ref([]); //部门列表
const chooseType = ref("01"); //选择弹窗类型

const rules = reactive({
  rwbt: [{ required: true, message: "请输入任务标题", trigger: "blur" }]
});
const editpeo = ref();
onMounted(() => {
  getdepartmentList();
});
// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : "编辑";
  if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtRlqbRwdd/selectVoById/" + id).then((res) => {
    listQuery.value = res;
    tableDate.xsList = listQuery.value.xsList;
  });
};
//解除关联
const relevancyClue = (row) => {
  qcckPut({ id: row.id }, "/mosty-gsxt/tbGsxtRlqbRwdd/cancelXsGl/{id}").then(
    (res) => {
      tableDate.xsList = tableDate.xsList.filter((item) => item.id !== row.id);
      listQuery.value.xsList = tableDate.xsList.map((item) => item.id);
      proxy.$message({ type: "success", message: "解除关联成功" });
    }
  );
};

// 获取部门列表
const getdepartmentList = () => {
  selectUserDeptPage().then((res) => {
    deptList.value = res?.records.map((item) => ({
      label: item.deptName,
      value: item.deptId
    }));
  });
};
// 提交
const submit = () => {
  elform.value.submit((data) => {
    data.xsList = tableDate.xsList.map((item) => item.id);
    let url =
      title.value == "新增"
        ? "/mosty-gsxt/tbGsxtRlqbRwdd/save"
        : "/mosty-gsxt/tbGsxtRlqbRwdd/update";
    let params = { ...data };
    qcckPost(params, url)
      .then((res) => {
        proxy.$message({ type: "success", message: title.value + "成功" });
        emit("updateDate");
        close();
      })
      .catch(() => {});
  });
};

// 打开弹窗
const openDialog = (type) => {
  chooseShow.value = true;
  chooseTitle.value = "请选择线索列表";
  roleIds.value = tableDate.xsList.map((item) => item.id);
};
const handleAdd = () => {
  dialogFormVisible.value = true;
  dialogTitle.value = "新增信息";
};

// 接收父组件传入的数据并回显
const setFormData = (data) => {
  tableDate.xsList = data.xsList ?? [];
  listQuery.value = {
    ...data // 假设 data 包含所有需要的字段
  };
  tableDate.tableData = data.bkdxList;
  console.log(listQuery.value);
};
// 选择数据
const chooseDate = (data) => {
  console.log(data, "选择数据");
  tableDate.xsList = data;
  listQuery.value.xsList = tableDate.xsList.map((item) => item.id);
};
// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
};
// 删除
const delDictItem = (id) => {
  tableDate.xsList = tableDate.xsList.filter((item) => item.id !== id);
  listQuery.value.xsList = tableDate.xsList.map((item) => item.id);
};
defineExpose({ init, setFormData });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.boxlist {
  width: 99%;
  height: 225px;
  margin-top: 10px;
  overflow: hidden;
}
</style>
