<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">线索合并</span>
      <el-button @click="close">关闭</el-button>
    </div>
    <div class="form_cnt">
      <!-- 上部 -->
      <div class="top hh48">
        <div class="flex nowrap align-center">
          <span>所属部门：</span><MOSTY.Department width="300px" clearable v-model="listQuery.ssbmdm" />
          <div class="ml20 mr10">数据周期：<el-button @click="chooseTime(it)" v-for="it in btns" :key="it" :type="active == it ? 'primary':''" size="small">{{ it }}</el-button></div>
          <el-date-picker v-model="listQuery.times" type="daterange" range-separator="To" value-format="YYYY-MM-DD" start-placeholder="选择开始时间" end-placeholder="选择结束时间"/>
          <el-button class="ml10 mr20" type="primary" size="small" @click="searchList">查询</el-button>
          <el-button type="primary" size="small" @click="resetList">重置</el-button>
        </div>
        <h3>串并线索</h3>
        <MyTable
          :tableData="pageForm.tableData_hbh"
          :tableColumn="pageForm.tableColumn"
          :tableHeight="pageForm.tableHeight1"
          :key="pageForm.keyCount"
          :tableConfiger="pageForm.tableConfiger1"
          :controlsWidth="pageForm.controlsWidth"
        >
          <template #xlLx="{row}">
            <DictTag :tag="false" :value="row.xlLx" :options="props.dic.D_GS_XS_LX" />
          </template>
          <template #qbLy="{row}">
            <DictTag :tag="false" :value="row.qbLy" :options="props.dic.D_GS_XS_LY" />
          </template>
          <template #czzt="{row}">
            <DictTag :tag="false" :value="row.czzt" :options="props.dic.D_GS_XS_CZZT" />
          </template>
          <template #shzt="{row}">
            <DictTag :tag="false" :value="row.shzt" :options="props.dic.D_BZ_XSSHZT" />
          </template>
          <template #qtlx="{row}">
            <DictTag :tag="false" :value="row.qtlx" :options="props.dic.D_GS_XS_QTLX" />
          </template>
          <template #controls="{ row }">
            <el-link size="small" type="primary" @click="lookDetail(row)">详情</el-link>
          </template>
        </MyTable>
        <div class="flex just-end">
          <Pages  @changeNo="changeNo"  @changeSize="changeSize" :tableHeight="pageForm.tableHeight1"  :pageConfiger="{ ...config }" />
        </div>
      </div>
      <!-- 下部 -->
      <div class="bottom hh48">
        <h3>来源线索</h3>
        <div class="flex align-center mb10">
          <span>线索标题：</span>
          <el-input style="width:300px" placeholder="请输入标题" clearable v-model="keyWords"></el-input>
          <el-button class="ml10 mr20" type="primary" size="small">查询</el-button>
          <el-button class="mr10" type="primary" size="small" @click="handleZdhb">自动合并</el-button>
          <el-button type="primary" size="small" @click="handleSdhb">手动合并</el-button>
        </div>
        <MyTable
          :tableData="pageForm.tableData_hbq"
          :tableColumn="pageForm.tableColumn"
          :tableHeight="pageForm.tableHeight"
          :key="pageForm.keyCount"
          :tableConfiger="pageForm.tableConfiger"
          :controlsWidth="pageForm.controlsWidth"
          @chooseData="chooseData"
        >
          <template #xlLx="{row}">
            <DictTag :tag="false" :value="row.xlLx" :options="props.dic.D_GS_XS_LX" />
          </template>
          <template #qbLy="{row}">
            <DictTag :tag="false" :value="row.qbLy" :options="props.dic.D_GS_XS_LY" />
          </template>
          <template #czzt="{row}">
            <DictTag :tag="false" :value="row.czzt" :options="props.dic.D_GS_XS_CZZT" />
          </template>
          <template #shzt="{row}">
            <DictTag :tag="false" :value="row.shzt" :options="props.dic.D_BZ_XSSHZT" />
          </template>
          <template #qtlx="{row}">
            <DictTag :tag="false" :value="row.qtlx" :options="props.dic.D_GS_XS_QTLX" />
          </template>
        </MyTable>
      </div>
    </div>
  </div>
  <!-- 合并后的详情 -->
  <HbDetail v-model="isOpenDetail" :id="detailId"></HbDetail>
</template>

<script setup>
import { timeSlotChange } from "@/utils/tools.js";
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import HbDetail from './hbDetail.vue'
import Pages from "@/components/aboutTable/Pages.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, nextTick } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
  dic:Object
})
const isOpenDetail = ref(false)
const detailId = ref('')
const active = ref('本周')
const btns = ref(['本周','本月','本季度','本年'])
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const ids = ref([])
const listQuery = ref({
  times:timeSlotChange('本周')
}); //表单
const keyWords = ref('')
const loading = ref(false);
const pageForm = reactive({
  tableData_hbh: [],
  tableData_hbq: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    haveControls:false
  },
  tableConfiger1: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
  },
  controlsWidth: 100,
  tableColumn: [
    { label: "线索编号", prop: "xsBh" },
    { label: "线索名称", prop: "xsMc" },
    { label: "线索来源", prop: "qbLy",showSolt:true  },
    { label: "开始时间", prop: "zxkssj" },
    { label: "截至时间", prop: "zxjssj" },
    { label: "指向地点", prop: "zxdz" },
    { label: "线索内容", prop: "xsNr" },
    { label: "群体类型", prop: "qtlx",showSolt:true  },
    { label: "群体名称", prop: "qtmc" },
    { label: "上报单位", prop: "ssbm" },
    { label: "上报时间", prop: "sxsbsj" },
    { label: "涉及人数", prop: "sjrs" },
    { label: "附件", prop: "fjdz",showSolt: true},
    { label: "处置状态", prop: "czzt",showSolt: true},
    { label: "状态", prop: "shzt",showSolt: true },
  ]
});
const config = reactive({
  pageCurrent:1,
  pageSize:10,
  total:0
})

onMounted(()=>{
  tabHeightFn();
})
// 初始化数据
const init = () => {
  dialogForm.value = true;
  gethb_before()
  gethb_after()
  tabHeightFn()
};

// 获取合并前的数据
const gethb_before = () =>{
  qcckGet({xsMc:keyWords.value},'/mosty-gsxt/qbcj/getXshbFxcx').then(res=>{
    pageForm.tableData_hbq = res || [];
  })
}
// 自动合并
const handleZdhb = () =>{
  proxy.$confirm("是否确定要合并？", "警告", {type: "warning"}).then(() => {
    qcckPost({xsMc:keyWords.value},'/mosty-gsxt/qbcj/getXshbZdhb').then(res=>{
      proxy.$message({ type: "success",  message: "合并成功" });
      gethb_before();
      gethb_after();
    })
  })
}

// 手动合并
const handleSdhb = () =>{
  if(ids.value.length < 2) return proxy.$message({ type: "warning",  message: "请先选择需要合并的数据，并且至少选择 2 条数据。" });
  proxy.$confirm("是否确定要合并？", "警告", {type: "warning"}).then(() => {
    qcckPost(ids.value,'/mosty-gsxt/qbcj/getXshbSdhb').then(res=>{
       proxy.$message({ type: "success",  message: "合并成功" });
       gethb_before();
       gethb_after();
    })
  })
}
// 重置
const resetList = () =>{
  active.value = '本周';
  listQuery.value = {times:timeSlotChange('本周')}
  config.pageCurrent = 1;
  gethb_after();
}
// 搜索
const searchList = () =>{
  config.pageCurrent = 1;
  gethb_after();
}

// 获取合并前的数据
const gethb_after = () =>{
  let params = { sfhb:1,...config,...listQuery.value }
  if(params.times && params.times.length > 0){
    params.startTime = listQuery.value.times[0]
    params.endTime = listQuery.value.times[1]
  }
  delete params.times;
  pageForm.tableConfiger.tableConfiger1 = true;
  qcckGet(params,'/mosty-gsxt/qbcj/selectPage').then(res=>{
    console.log(res);
    pageForm.tableConfiger.tableConfiger1 = false;
    pageForm.tableData_hbh = res.records || [];
    config.total = res.total;
  }).catch(()=>{
    pageForm.tableConfiger.tableConfiger1 = false;
  })
}

// 查看详情
const lookDetail = (row) =>{
  detailId.value = row.id;
  isOpenDetail.value = true;
}

// 分页
const changeNo = (val) => {
 config.pageCurrent = val;
  gethb_after();
};
// 分页
const changeSize = (val) => {
  config.pageSize = val;
  gethb_after();
};

// 选择时间
const chooseTime = (val) =>{
  active.value = val;
  switch(val){
    case '本周':
      listQuery.value.times = timeSlotChange('本周')
      break;
    case '本月':
      listQuery.value.times = timeSlotChange('本月')
      break;
    case '本季度':
      listQuery.value.times = timeSlotChange('本季度')
      break;
    case '本年':
      listQuery.value.times = timeSlotChange('本年')
      break;
  }
}

const chooseData = (val) =>{
  if(!Array.isArray(val)) return;
  ids.value = val.map(v=>v.id);
}
// 关闭
const close = () => {
  active.value = '本周';
  listQuery.value = {times:timeSlotChange('本周')};
  keyWords.value = '';
  ids.value = [];
  config.pageCurrent = 1;
  dialogForm.value = false;
  loading.value = false;
};


// 表格高度计算
const tabHeightFn = () => {
  pageForm.tableHeight = window.innerHeight  - 660;
  pageForm.tableHeight1 = window.innerHeight  - 695;
  window.onresize = function () {
    tabHeightFn();
  };
};

defineExpose({ init });
</script>

<style lang="scss" scoped>

v-deep .el-date-editor .el-range-separator{
  color: #333;
}
::v-deep .el-date-editor .el-range-separator {
  color: #333;
}
</style>
