<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="chooseVisiblex = true;">选择</el-button>
          <div class="boxlist">
            <MyTable :tableData="listQuery.xsList" :tableColumn="tableDate.tableColumn"
              :tableHeight="tableDate.tableHeight" :key="tableDate.keyCount" :tableConfiger="tableDate.tableConfiger"
              :controlsWidth="tableDate.controlsWidth" @chooseData="chooseData">
              <template #qbLy="{ row }">
                <DictTag :tag="false" :value="row.qbLy" :options="props.dic.D_GS_XS_LY" />
              </template>
              <template #controls="{ row }">
                <el-link size="small" type="danger" @click="delDictItem(row.id)">删除</el-link>
              </template>
            </MyTable>
          </div> -->
          <div class="boxlist">
            <MyTable :tableData="listQuery.xsList" :tableColumn="tableDate.tableColumn"
              :tableHeight="tableDate.tableHeight" :key="tableDate.keyCount" :tableConfiger="tableDate.tableConfiger"
              :controlsWidth="tableDate.controlsWidth" @chooseData="chooseData">
              <template #qbLy="{ row }">
                <DictTag :tag="false" :value="row.qbLy" :options="props.dic.D_GS_XS_LY" />
              </template>
              <template #controls="{ row }">
                <el-link size="small" type="danger" @click="delDictItem(row.id)">删除</el-link>
                <!-- 弹窗 -->
                <el-link size="small" type="danger" @click="delDictItem(row.id)">详情</el-link>
              </template>
            </MyTable>
          </div>
        </template>
      </FormMessage>
      <!-- 列表弹窗 -->
      <Xslist :Single="false" v-model="chooseVisiblex" @choosed="choosed" :roleIds="roleIdsxs"></Xslist>
    </div>
  </div>
</template>

<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import Xslist from '@/components/ChooseList/ChooseXs/index.vue'
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance } from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
  dic: Object
});
const roleIdsxs = ref([]); //角色id
const chooseVisiblex = ref(false);
const { proxy } = getCurrentInstance();
const tableDate = reactive({
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    border: true
  },
  tableHeight:300,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 120, //操作栏宽度
  tableColumn: [
    // { label: "线索名称", prop: "xsMc" },
    // { label: "线索编号", prop: "xsBh"},
    // { label: "线索来源", prop: "qbLy", showSolt: true},
    // { label: "开始时间", prop: "zxkssj"},
    // { label: "结束时间", prop: "zxjssj"},
    // { label: "指向地点", prop: "zxdz"},
    // { label: "线索内容", prop: "xsNr",showOverflowTooltip:true },
    // { label: "处置状态", prop: "czzt", showSolt: true },
      { label: "反馈单位", prop: "xsMc" },
    { label: "反馈民警", prop: "xsBh"},
    { label: "反馈时间", prop: "qbLy", showSolt: true},
    { label: "反馈内容", prop: "zxkssj" },
    { label: "图片", prop: "czzt", showSolt: true },
    { label: "处置状态", prop: "czzt", showSolt: true },
  ]
});
const dialogForm = ref(false); //弹窗

const rules = reactive({
  bsDwDm: [{ required: true, message: "请选择报送单位", trigger: "change" }],
  ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change"}],
  rwBt: [{ required: true, message: "请输入任务标题", trigger: "blur" }],
  rwBh: [{ required: true, message: "请输入任务编号", trigger: "blur" }],
  rwLy: [{ required: true, message: "请选择任务来源", trigger: "change" }],
  rwSjKs: [{ required: true, message: "请选择反馈开始时间", trigger: "change" }],
  rwSjFkjz: [{ required: true, message: "请选择反馈截止时间", trigger: "change" }],
  rwYzcd: [{ required: true, message: "请选择严重程度", trigger: "change" }],
  rwNr: [{ required: true, message: "请输入任务内容", trigger: "blur" }],
});
const formData = ref([
  { label: "所属部门", prop: "ssbmdm", depMc: 'ssbmmc', type: "department" },
  { label: "任务标题", prop: "rwBt", type: "input" },
  { label: "任务编号", prop: "rwBh", type: "input" },
  { label: "任务类型", prop: "rwLx", type: "select", options: props.dic.D_GS_RLQB_RWDD_LX },
  { label: "任务来源", prop: "rwLy", type: "select", options: props.dic.D_GS_RLQB_RWDD_LY },
  { label: "反馈开始时间", prop: "rwSjKs", type: "datetime" },
  { label: "反馈截止时间", prop: "rwSjFkjz", type: "datetime" },
  { label: "严重程度", prop: "rwYzcd", type: "select", options: props.dic.D_GS_RLQB_RWDD_YZCD },
  { label: "报送单位", prop: "bsDwDm", depMc: 'bsDwMc', type: "department", multiple: true, width: '100%' },
  { label: "任务内容", prop: "rwNr", type: "textarea", width: "100%" },
  // { label: "线索列表", prop: "xsList", type: "slot", width: "99%" }
  { label: "反馈内容", prop: "xsList", type: "slot", width: "99%" }
]);
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : "编辑";
  // 根据id查询详情
  if (row) {
    qcckGet({}, "/mosty-gsxt/tbGsxtRlqbRwdd/selectVoById/" + row.id).then((res) => {
      res.xsList = res.xsList || [];
      roleIdsxs.value = res.xsList.map(v=>v.id);
      listQuery.value = res;
    });
  }
};

// 提交
const submit = () => {
  elform.value.submit((data) => {
    let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtRlqbRwdd/save" : "/mosty-gsxt/tbGsxtRlqbRwdd/update";
    let params = { ...data };
    loading.value = true;
    // params.xsList = params.xsList.map((item) => item.id);
    qcckPost(params, url).then(() => {
      loading.value = false;
      proxy.$message({ type: "success", message: title.value + "成功" });
      emit("updateDate");
      close();
    }).catch(()=>{
      loading.value = false;
    })
  });
};

const choosed = (data) => {
  listQuery.value.xsList = data;
  roleIdsxs.value = data.map(item => item.id);
};


// 关闭
const close = () => {
  listQuery.value = {};
  loading.value = false;
  dialogForm.value = false;
};
// 删除
const delDictItem = (id) => {
  listQuery.value.xsList = listQuery.value.xsList.filter((item) => item.id !== id);
  roleIdsxs.value = roleIdsxs.value .filter((v) => v !== id);
};
defineExpose({ init });
</script>

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

.boxlist {
  width: 99%;
  margin-top: 10px;
}
</style>
