<template>
  <div class="container">
    <TopNav navTitle="巡访管理" :rightTitle="rightTitle" @clickRight="clickRight" />
    <div>
      <Tabs :checked="isActive" :list="zdModule" @onYjjb="changeTab" />
      <Search placeholder="请输入关键字" v-model="keyWord" :isSx="true" @update:sx="handleSx" @update:modelValue="onSearch">
      </Search>
      <SxPopup :showPopup="showPopup" :list="sxList" :p_top="145" :showTime="isShowTime" @update:close="showPopup = false" @update:onConfirm="onConfirm" @reset="reset">
      </SxPopup>

      <!-- 列表数据 -->
      <ul class="listBox" :loading="isLoading" ref="dateScroll">
        <li style="margin-bottom: 2vw" v-for="(item, idex) in list" :key="idex">
          <CyryItem v-if="isActive == 0" @deletedata="deletedata" :dic="{ D_BZ_XB }" :data="item" />
          <DwglItem v-if="isActive == 1" @deletedata="deletedata" :dic="{ D_BZ_DWLX, D_BZ_DWFL }" :data="item" />
          <RwItem v-if="isActive == 2" @deletedata="deletedata" :data="item" :dic="{ D_BZ_XFLX }" />
          <ZgItem v-if="isActive == 3" @deletedata="deletedata" @chooseData="chooseData" :data="item"
            :dic="{ D_BZ_XFLX }" />
          <!-- <ZgItem v-if="isActive == 3" @deletedata="deletedata" :data="item" :dic="{D_SB_SBLX}" /> -->
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import Tabs from "../../../components/tabs.vue";
import Search from "../../../components/search.vue";
import SxPopup from "../../../components/SxPopupNew.vue";
import ZgItem from "./components/zgItem.vue";
import CyryItem from "./components/cyryItem.vue";
import RwItem from "./components/rwItem.vue";
import DwglItem from "./components/dwglItem.vue";
import { useRouter, useRoute } from "vue-router";
import { Dialog, Notify } from "vant";
import { getdataCyry, deletedataCyry, getdataDwgl, deletedataDw, deletedataZg, getdataRw, plsbData, deletedataRw, getdataZg } from "../../../api/xfgl.js";
import { getDictList, setDict } from "../../../utils/dict";
import { setTimeQuantum, dateFormat, hintToast } from "../../../utils/tools.js";
import { ref, reactive, watch, onMounted, nextTick } from "vue";
const { D_BZ_XB, D_BZ_DWFL, D_BZ_DWLX, D_BZ_XFLX, D_SB_SBLX } = getDictList("D_BZ_XB", "D_BZ_DWFL", "D_BZ_DWLX", "D_BZ_XFLX", "D_SB_SBLX");
const router = useRouter();
const route = useRoute();
const dateScroll = ref(null)
const isLoading = ref(false) //加载
const zdModule = ref([
  { name: "从业人员管理" },
  { name: "单位管理" },
  { name: "巡防任务" },
  { name: "战果管理" },
]);
const keyWord = ref(""); //关键字搜索
const showPopup = ref(false); //赛选条件窗口
const dateForm = ref({
  sblxmc: "",
  sblxdm: "",
});
const isShowTime = ref(true);
const selectList = ref([]); //选择类型
const List1 = ref([
  { label: "类型1", value: "01" },
  { label: "类型2", value: "02" },
  { label: "类型3", value: "03" },
]);

const chooseType = ref(false); //选择类型

const rightTitle = ref('新增')
const sxList = ref([]); //筛选条件数据
const pageCurrent = ref(1); //分页
const total = ref(0); //总数
const showEmpty = ref(false); //数据状态
const list = ref([]); //列表数据
const searchDate = ref({}); //查询条件
const isActive = ref(); //当前位置
const haschooseList = ref([]) //已选中的数据
onMounted(() => {
  let ac = localStorage.getItem('XF_Active')
  isActive.value = ac ? parseInt(ac) : 0;
  rightTitle.value = isActive.value == 3 ? '批量申报' : '新增'
  nextTick(() => { getOtherDate(); })
  scroll()
});

//触底加载
function scroll() {
  let scrollTargetBox = dateScroll.value;
  if (!scrollTargetBox) return false;
  scrollTargetBox.onscroll = (e) => {
    var scrollHeight = scrollTargetBox.scrollHeight; //251
    var scrollTop = scrollTargetBox.scrollTop; //0-18
    var clientHeight = scrollTargetBox.clientHeight; //233
    if (scrollHeight - clientHeight == scrollTop) {
      //滚动条滚到最底部
      if (list.value.length < total.value) {
        pageCurrent.value++;
        getOtherDate(); //根据不同类型掉接口
      }
    }
  };
}

// 处理筛选
function handleSx() {
  isShowTime.value = true;
  switch (isActive.value) {
    case 0: //从业人员管理
      isShowTime.value = false;
      sxList.value = [
        {
          title: "身份证号",
          type: "input",
          lebel: "sfzh",
          placeholder: "请输入身份证号",
        },
        {
          title: "姓名",
          type: "input",
          lebel: "xm",
          placeholder: "请输入姓名",
        },
      ];
      break;
    case 1: //单位管理
      D_BZ_DWFL.value.forEach((element) => {
        element.isCheck = false;
        element.key = element.dm;
      });
      D_BZ_DWLX.value.forEach((element) => {
        element.isCheck = false;
        element.key = element.dm;
      });
      isShowTime.value = false;
      sxList.value = [
        {
          title: "单位名称",
          type: "input",
          lebel: "dwmc",
          placeholder: "请输入单位名称",
        },
        {
          title: "单位分类",
          isCheckBox: false,
          type: "checkBox",
          lebel: "dwfl",
          array: D_BZ_DWFL.value,
        },
        {
          title: "单位类型",
          isCheckBox: false,
          type: "checkBox",
          lebel: "dwlx",
          array: D_BZ_DWLX.value,
        },
      ];
      break;
    case 2: //寻巡访任务
      D_BZ_XFLX.value.forEach((element) => {
        element.isCheck = false;
        element.key = element.dm;
      });
      sxList.value = [
        { type: "checkBox", ...setTimeQuantum() },
        {
          type: "checkBox",
          title: "巡防类型",
          array: D_BZ_XFLX.value,
        },
      ];
      break;
    case 3: //战果申报
      sxList.value = [
        { type: "checkBox", ...setTimeQuantum() },
        {
          title: "申报类型",
          type: "checkBox",
          lebel: "sblx",
          array: [
            { isCheck: false, name: "类型1", value: "01", key: "fl1" },
            { isCheck: false, name: "类型2", value: "02", key: "fl2" },
          ],
        },
      ];
      selectList.value = List1.value;
      break;
  }
  showPopup.value = !showPopup.value;
}

// 搜索
function onConfirm(val) {

  searchDate.value = val;
  getOtherDate();
}
// 选择类型
function changeTab(val) {
  pageCurrent.value = 1
  isActive.value = val;
  showPopup.value = false;
  list.value = []
  rightTitle.value = val == 3 ? '批量申报' : '新增'
  getOtherDate() //获取列表数据
}
// 更具类型获取数据
function getOtherDate() {
  switch (isActive.value) {
    case 0:
      _getList_Cyry(); //从业人员管理
      break;
    case 1:
      _getList_Dwgl()//单位管理
      break;
    case 2:
      _getList_Rw()//寻巡访任务
      break;
    case 3:
      _getList_Rw()//寻巡访任务
      //  _getList_Zg()//战果申报
      break;
  }
}

// 获取从业人员列表
function _getList_Cyry() {
  let pramas = {
    pageSize: 10,
    pageCurrent: pageCurrent.value,
    ...searchDate.value.data,
  };
  if (!searchDate.value.data) pramas.xm = keyWord.value;
  if (searchDate.value.data && !searchDate.value.data.xm) pramas.xm = keyWord.value;
  isLoading.value = true
  getdataCyry(pramas).then((res) => {
    let arr = res.records || [];
    isLoading.value = false;
    list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
    total.value = res.total;
  }).catch(() => {
    isLoading.value = false;
  });
}

// 获取单位管理
function _getList_Dwgl() {
  let pramas = {
    pageSize: 10,
    pageCurrent: pageCurrent.value,
    ...searchDate.value.data,
  };
  let brr = searchDate.value.list ? searchDate.value.list : []
  let arr = brr.filter(item => {
    return item.type == 'checkBox'
  })
  arr.forEach(v => {
    v.array.forEach(it => {
      if (it.isCheck) pramas[v.lebel] = it.value
    })
  })

  if (!searchDate.value.data || (searchDate.value.data && !searchDate.value.data.dwmc)) {
    pramas.dwmc = keyWord.value;
  }
  isLoading.value = true;
  getdataDwgl(pramas).then((res) => {
    let arr = res.records || [];
    list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
    total.value = res.total;
    isLoading.value = false;
  }).catch(() => {
    isLoading.value = false;
  });
}

// 获取任务
function _getList_Rw() {
  let pramas = {
    pageSize: 10,
    pageCurrent: pageCurrent.value,
    ...searchDate.value,
  };
  if (!searchDate.value.data) pramas.xfdw = keyWord.value;
  if (searchDate.value.data && !searchDate.value.xfdw) pramas.xfdw = keyWord.value;
  if (isActive.value == 2) {
    pramas.xfnr = keyWord.value;
    delete pramas.xfdw;
    delete pramas.data;
  }
  if (pramas.list) {
    let arr = pramas.list[0].array
    let obj = arr.find(item => { return item.isCheck == true })
    pramas.rwzt = obj.dm
  }
  isLoading.value = true;
  getdataRw(pramas).then((res) => {
    let arr = res.records || [];
    isLoading.value = false;
    arr.forEach(item => {
      item.isCheck = false
      item.xfdw = JSON.parse(item.xfdw)
      item.xfzy = JSON.parse(item.xfzy)
    })
    list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
    total.value = res.total;
  }).catch(() => {
    isLoading.value = false;
  });
}

// 点击内容
function chooseData(item) {
  if (isActive.value == 3) {
    list.value.forEach(it => {
      if (it.id == item.id) it.isCheck = !it.isCheck;
    })
    haschooseList.value = list.value.filter(v => { return v.isCheck == true })
  }
}
// 获取任务
function _getList_Zg() {
  let pramas = {
    pageSize: 10,
    pageCurrent: pageCurrent.value,
  };
  if (searchDate.value) {
    let kssj = searchDate.value.startTime
    let jssj = searchDate.value.startTime
    pramas.kssj = kssj ? kssj + ' 00:00:00' : '';
    pramas.kssj = jssj ? jssj + ' 23:59:59' : '';
    let arr = searchDate.value.list
    if (arr) {
      let list = arr[0].array.filter(v => { return v.isCheck == true }).map(it => { return it.value })
      pramas.sblx = list.join(',');
    }
  }
  isLoading.value = true;
  getdataZg(pramas).then((res) => {
    let arr = res.records || [];
    isLoading.value = false;
    list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
    total.value = res.total;
  }).catch(() => {
    isLoading.value = false;
  });
}


// 点击新增
function clickRight() {
  localStorage.setItem('XF_Active', isActive.value)
  switch (isActive.value) {
    case 0: //从业人员管理
      router.push({ path: "/Declaration/addEditCyry" });
      break;
    case 1: //单位管理
      router.push({ path: "/Declaration/addEditDw" });
      break;
    case 2: //寻巡访任务
      router.push({ path: "/Declaration/addEditRw" });
      break;
    case 3: //战果申报
      plsbDate()// 批量申报
      // router.push({ path: "/Declaration/addEdit"});
      break;
  }
}

// 批量申报
function plsbDate() {
  if (haschooseList.value.length == 0) return Notify({ type: 'warning', message: '请选择申报的内容' });
  let isTrue = true; //判断内容是否填完
  haschooseList.value.forEach(item => {
    if (!item.sbyy) isTrue = false
  })
  if (!isTrue) Notify({ type: 'warning', message: '请核实申报数据核实原因是否填写!' });
  if (isTrue) {
    let ids = haschooseList.value.map(it => { return it.id })
    plsbData(ids).then(res => {
      hintToast('申报成功')
      _getList_Rw()
    })
    // 查询接口
  }
}
//关键字查询
function onSearch(e) {
  keyWord.value = e;
  pageCurrent.value = 1;
  showEmpty.value = false;
  getOtherDate();//更具类型获取数据
}
// 选择类型
function chooseItem(val) {
  dateForm.value.sblxmc = val.label;
  dateForm.value.sblxdm = val.value;
  chooseType.value = false;
}
// 重置
function reset() {
  dateForm.value.sblxmc = "";
  dateForm.value.sblxdm = "";
  searchDate.value = {};
  keyWord.value = ''
  getOtherDate();
}
// 删除数据
function deletedata(id) {
  Dialog.confirm({
    title: "提示",
    message: "是否确认删除该数据！",
    confirmButtonColor: "#3e6ee8",
  }).then((res) => {
    switch (isActive.value) {
      case 0: //从业人员管理
        deletedataCyry([id]).then(res => {
          hintToast('删除成功')
          _getList_Cyry()
        })
        break;
      case 1: //单位管理
        deletedataDw([id]).then(res => {
          hintToast('删除成功')
          _getList_Dwgl()
        })
        break;
      case 2: //寻巡访任务
      case 3: //战果申报
        deletedataRw([id]).then(res => {
          hintToast('删除成功')
          _getList_Rw()
        })
        break;
      // case 3: //战果申报
      //   deletedataZg([id]).then(res=>{
      //     hintToast('删除成功')
      //     _getList_Zg()
      //   })
      //   break;
    }
  });
}


</script>
<style lang="less" scoped>
.chooseBox {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-content: center;
  padding: 2vw 1vw;
  box-sizing: border-box;
  border: 1px solid #507ce9;
  border-radius: 4px;
  color: #d3d0d0;
  font-size: 14px;

  .outBox {
    width: 100%;
    position: absolute;
    top: 38px;
    background: #fff;
    padding-top: 4vw;
    z-index: 999;
    border-radius: 4px;

    .selectBox {
      width: 100%;
      padding: 4vw;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;

      .selectItem {
        padding-left: 4vw;
        box-sizing: border-box;
        border-bottom: 1px solid #e9e9e9;
        line-height: 30px;
        color: #4a4646;
      }
    }

    .selectBox::before {
      position: absolute;
      content: "";
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: transparent transparent #ccc transparent;
    }
  }

  .hoverClose {
    display: none;
  }
}

.listBox {
  height: calc(100vh - 20vw);
  overflow: hidden;
  overflow-y: auto;
  padding: 1vw 4vw;
  padding-bottom: 0;
  box-sizing: border-box;

  .listItem {
    background-color: rgba(241, 241, 241, 0.5);
    padding: 2vw;
    border: 1px solid;
  }
}
</style>