<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }} 重点群体管理 </span>
      <div>
        <el-button type="primary" v-if="!disabled" size="small" :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" labelWidtth="" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
        <template #bqList>
          <div class="marks pointer" @click="handleChooseMarks">
            <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="disabled ? false:true" v-for="(it,idx) in listQuery.bqList" :key="idx">{{ it.bqMc }}</el-tag >
            </span>
        </div>
        </template>  
        <template #lqxxList>
          <div class="ww100">
            <div class="ww100 mb10"><el-button type="primary" v-if="!disabled" @click="handleCjlr('add',null)">新增</el-button></div>
            <div style="width:99.5%">
              <MyTable
                :tableData="listQuery.lqxxList"
                :tableColumn="pageData.qcjListColumn"
                :key="pageData.keyCountCj"
                :tableConfiger="pageData.qcjConfiger"
                :controlsWidth="pageData.controlsWidth">
                <template #controls="{ row }">
                  <el-link type="danger" @click="delDictItem(row)">删除</el-link>
                </template>
              </MyTable>
            </div>
          </div>
        </template>
       </FormMessage>
      <div class="ml50 mr50"><span class="mr10">管理重点人 : </span><el-button v-if="!disabled" @click="chooseVisible_RY = true" type="primary" >选择</el-button></div>
      <div class="boxlist ml50 mr50">
        <MyTable
          :tableData="listQuery.zdryList"
          :tableColumn="pageData.zdryColumn"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger"
          :controlsWidth="pageData.controlsWidth">
          <template #ryXb	="{ row }">
            <DictTag :value="row.ryXb	" :tag="false" :options="props.dic.D_BZ_XB" />
          </template>
          <template #controls="{ row }">
            <el-link type="danger" @click="deleteRow(row)">删除</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.shrSsbmdm" clearable :placeholder="listQuery.shrSsbmmc ? listQuery.shrSsbmmc : '' "  />
                </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.sprSsbmdm" clearable :placeholder="listQuery.sprSsbmmc ? listQuery.sprSsbmmc : '' "  />
                </div>
              </template>
            </el-step>
        </el-steps>
      </div>
    </div>
  </div>
  <!-- 采集录入 -->
  <Addcjlr ref="cjlrDialog" @change="addEdteCj"></Addcjlr>
  <!-- 标签选择 -->
  <ChooseMarks v-model="chooseMarksVisible" @choosed="addMarks" :roleIds="roleIds" />
  <!-- 选择布控人员 -->
  <BkryDialod v-model="chooseVisible_RY" @choosed="choosedPeo" @choosedAdd="choosedAdd" :roleIds="roleIds_RY" />
</template>

<script setup>
import { getItem } from "@/utils/storage";
import * as MOSTY from "@/components/MyComponents/index";
import Addcjlr from './addcjlr.vue'
import BkryDialod from '@/components/ChooseList/ChooseZdr/index.vue';
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import {ref,defineExpose,reactive,onMounted,defineEmits,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["updateDate"]);
const props = defineProps({
  dic: Object
});
const cjlrDialog = ref()
const chooseMarksVisible = ref(false)
const chooseVisible_RY = ref(false)
const roleIds = ref([])
const roleIds_RY = ref([])
const addPerson = ref([]) //单独新增的数据
const dialogForm = ref(false); //弹窗
const rules = reactive({
  qtMc: [{ required: true, message: "请输入群体名称", trigger: "blur" }],
  qtFxdj: [{ required: true, message: "请选择风险等级", trigger: "change" }],
  qtLb: [{ required: true, message: "请选择群体类别", trigger: "change" }],
  qtClsj: [{ required: true, message: "请选择群体成立时间", trigger: "change" }],
  bqList: [{ required: true, message: "请选择群体标签", trigger: "change" }],
  zdrLkyy: [{ required: true, message: "请输入列控原因", trigger: "blur" }],
});
const formData = ref([
  { label: "群体名称", prop: "qtMc", type: "input" },
  { label: "风险等级", prop: "qtFxdj", type: "select", options: props.dic.D_GS_ZDQT_FXDJ },
  { label: "群体类别", prop: "qtLb", type: "select", options: props.dic.D_GS_ZDQT_LB },
  { label: "群体成立时间", prop: "qtClsj", type: "date" },
  { label: "群体标签", prop: "bqList", type: "slot", width: "100%" },
  { label: "两群采集录入", prop: "lqxxList", type: "slot", width: "100%" },
  { label: "管辖单位", prop: "gxSsdwdm",depMc:'gxSsdwmc', type: "department" },
  { label: "入库开始时间", prop: "zdrRkkssj", type: "datetime" },
  { label: "入库截至时间", prop: "zdrRkjssj", type: "datetime" },
  { label: "列控原因", prop: "zdrLkyy", type: "textarea",width: "100%" },
]);
const pageData = reactive({
  keyCountCj: 0,
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
  },
  qcjConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
  },
  controlsWidth: 120, //操作栏宽度
  zdryColumn: [
    { label: "姓名", prop: "ryXm"},
    { label: "性别", prop: "ryXb", showSolt: true },
    { label: "身份证号 ", prop: "rySfzh"},
    { label: "户籍地", prop: "hjdXz" },
    { label: "现居地", prop: "xzdXz"},
    { label: "手机号", prop: "ryLxdh"},
  ],
  qcjListColumn:[
     { label: "微信群", prop: "wxqId" },
     { label: "QQ群", prop: "qqqId" },
     { label: "群主昵称", prop: "qzNc" },
     { label: "群主姓名", prop: "qzXm" },
     { label: "群主联系电话", prop: "qzLxdh" },
     { label: "群重要内容", prop: "qzynr" },
  ]
});
const disabled = ref(false)
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");

// 初始化数据
const init = async (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" :  type == 'detail' ?  '详情':"编辑";
  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;;
  }
  disabled.value = type == 'detail' ? true : false;
  pageData.tableConfiger.haveControls = type == "detail" ? false: true;
  pageData.qcjConfiger.haveControls = type == "detail" ? false: true;
  if(row) getDataById(row.id)
};

// 根据id查询详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtZdqt/selectVoById/" + id).then((res) => {
    listQuery.value = res;
  });
};

// 采集录入
const handleCjlr = (type,row) =>{
  cjlrDialog.value.init(type,row);
}

const addEdteCj = (val) =>{
  if(!listQuery.value.lqxxList) listQuery.value.lqxxList = [];
  listQuery.value.lqxxList.unshift(val.data);
  pageData.keyCountCj++;
}

const  handleChooseMarks = () =>{
  if(disabled.value) return;
  chooseMarksVisible.value = true
}

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

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

// 选择人员
const choosedPeo = (val) =>{
  roleIds_RY.value = val.map(it=>it.id);
  let arr = val.map(item=>{
      let bqArr = item.bqList || [];
      let bqs = bqArr.map(v=>{
        return { bqZl:v.bqZl , bqId:v.bqId, bqLx:v.bqLx, bqLb:v.bqLb, bqMc:v.bqMc, bqDm:v.bqDm }
      })
      return { id:item.id, fjZp:item.fjZp, ryXm:item.ryXm, ryXb:item.ryXb, rySfzh:item.rySfzh, hjdXz:item.hjdXz, xzdXz:item.xzdXz, ryLxdh:item.ryLxdh, qtXnsf:item.qtXnsf,clCjh:item.clCjh, clCph:item.clCph, qtTzms:item.qtTzms, bqList:bqs }
  })
  listQuery.value.zdryList = [...addPerson.value,...arr]; 
  pageData.keyCount++;
}

// 单独新增的数据
const choosedAdd = (item) =>{
  let obj = { id:item.id, fjZp:item.fjZp, ryXm:item.ryXm, ryXb:item.ryXb, rySfzh:item.rySfzh, hjdXz:item.hjdXz, xzdXz:item.xzdXz, ryLxdh:item.ryLxdh, qtXnsf:item.qtXnsf,clCjh:item.clCjh, clCph:item.clCph, qtTzms:item.qtTzms, bqList:item.bqList }
  addPerson.value.push(obj) ;//缓存的数据
  if(!listQuery.value.zdryList) listQuery.value.zdryList = [];
  listQuery.value.zdryList.unshift(obj);
}

// 删除数据
const deleteRow = (row) => {
  roleIds_RY.value = roleIds_RY.value.filter(id => id != row.id);
  addPerson.value = addPerson.value.filter(it => it.id != row.id);
  listQuery.value.zdryList = listQuery.value.zdryList.filter(it => it.id != row.id);
}


// 提交
const submit = () => {
  elform.value.submit((data) => {
    let params = { ...data }
    loading.value = true;
    let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtZdqt/save" : "/mosty-gsxt/tbGsxtZdqt/update";
    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.shrSsbmmc = val ? val.orgName : ''
}
const getSPdep = (val) =>{
  listQuery.value.sprSsbmmc = val ? val.orgName : ''
}

const delDictItem = (row) =>{
  listQuery.value.lqxxList = listQuery.value.lqxxList.filter(v=>{
    return row.id != v.id
  })
}

// 关闭
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";

.boxlist {
  width: calc(99% - 50px);
  margin-top: 10px;
  overflow: hidden;
}
.marks{
  width: 100%;
  min-height: 32px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
}
.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>
