<template>
  <div>
    <TopNav navTitle="信息交互" :showRight="true" :showLeft="true" rightIcon="add-o" @clickRight="onClickRight" />
    <van-sticky>
      <div class="sticky_box">
        <van-tabs v-model:active="activeTabName" class="top_tabs" :class="activeTabName == '01' ? 'left_top_tabs' : ''"
          @change="changeTab">
          <van-tab :title="item.name" :name="item.type" v-for="item in toptabs" :key="item"></van-tab>
        </van-tabs>
        <Tabs v-if="activeTabName == '01'" :list="tabs" @onYjjb="onSelect" :key="tabsIndex"></Tabs>
        <Search placeholder="请输入关键字" v-model="kwd" :isSx="true" @update:sx="showPopup = !showPopup"
          @update:modelValue="onSearch"></Search>
      </div>
    </van-sticky>
    <van-pull-refresh v-model="loadingPull" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text=" " @load="onLoad" offset="1"
        :immediate-check="false">
        <ZlList v-for="(item, index) in zlList.list" :key="index" :item="item" :dict="{ D_BZ_ZXZTAI }"
          :path="`/yyzx/zlzx/zlDetail?id=${item.zlId}`"></ZlList>
        <van-empty description="暂无指令信息" image="default" v-if="zlList.list.length <= 0 && loadingPull == false" />
      </van-list>
    </van-pull-refresh>
    <SxPopup :showPopup="showPopup" :list="zlList.sxTypeList" :p_top="145" @update:close="showPopup = false"
      @update:onConfirm="onConfirm" />
  </div>
</template>
<script setup>
import { getTrsToken } from "@/api/common";
import Tabs from "../../../components/tabs.vue";
import TopNav from "../../../components/topNav.vue";
import Search from "../../../components/search.vue";
import ZlList from "../../../components/zlList.vue";
import SxPopup from "../../../components/SxPopup.vue";
import { dateFormat, setTimeQuantum } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, onMounted, reactive, watch } from "vue";
import router from "@/router";
import { Toast } from "vant";
import { getZlList, getZlTotal } from "../../../api/zlzx.js";
import store from "../../../store";
const { D_BZ_ZXZTAI } = getDictList("D_BZ_ZXZTAI"); //字典信息
const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
const kwd = ref(""); //搜索关键字
const showPopup = ref(false); //赛选条件窗口
const zlztIndex = ref(-1); //选中的指令状态下标
const timeShow = ref(false); //时间选择器
const presentTime = ref(new Date()); //当前时间
const timeType = ref(""); //选择的时间类型
const startTime = ref(""); //开始时间
const endTime = ref(""); //结束时间
const loading = ref(false);
const loadingPull = ref(false);
const finished = ref(false);
const pageSize = ref(10);
const pageCurrent = ref(1);
const zllx = ref(""); // 指令类型
const zlTypeIndex = ref(""); //选中的查询类型下标
const total = ref(0); //
const tabsIndex = ref(1);
const activeTabName = ref('01');
const listQuery = ref({
  zlly: '01,02,03,04,05,06,07,08,09'
})
const zlList = reactive({
  list: [], //指令列表数据
  sxTypeList: [], //筛选项数据
});
const toptabs = ref([
  {
    name: "任务下达",
    type: "01",
  },
  {
    name: "任务需求",
    type: "02",
  },
])
const tabs = ref([
  {
    name: "全部",
    count: 0,
    zllx: "",
  },
  {
    name: "巡逻",
    count: 0,
    zllx: "01",
  },
  {
    name: "人员",
    count: 0,
    zllx: "02",
  },
  {
    name: "车辆",
    count: 0,
    zllx: "03",
  },
  {
    name: "事件",
    count: 0,
    zllx: "04",
  },
  {
    name: "警情",
    count: 0,
    zllx: "05",
  },
  {
    name: "人工指令",
    count: 0,
    zllx: "06",
  },
  {
    name: "人员管控",
    count: 0,
    zllx: "07",
  },
  {
    name: "事务",
    count: 0,
    zllx: "08",
  },
]);
watch(D_BZ_ZXZTAI, (newValue) => {
  //设置筛选值
  let array = [];
  for (let i = 0; i < newValue.length; i++) {
    array.push({
      name: newValue[i].text,
      key: newValue[i].dm,
      isCheck: false,
    });
  }
  zlList.sxTypeList = [
    {
      title: "指令进行状态",
      isCheckBox: false,
      array: array,
    },
  ];
  zlList.sxTypeList[1] = setTimeQuantum();
});
onMounted(() => {
  _getZlTotal();
  _getZlList();
});
//下拉刷新
function onRefresh() {
  reset()
  _getZlTotal();
  _getZlList();
}
const reset = () => {
  zlList.list = [];
  pageCurrent.value = 1;
  zlTypeIndex.value = "";
  kwd.value = "";
  startTime.value = "";
  endTime.value = "";
  loading.value = false;
  loadingPull.value = false;
  finished.value = false;
  tabsIndex.value++;
}
// 切换tab
const changeTab = (val) => {
  console.log(val, 'val');
  reset()
  if (val == '01') {
    listQuery.value.zlly = '01,02,03,04,05,06,07,08,09';
  } else if (val == '02') {
    listQuery.value.zlly = '10';
  }
  _getZlList();
}
//关键字查询
function onSearch(e) {
  kwd.value = e;
  zlList.list = [];
  pageCurrent.value = 1;
  _getZlTotal();
  _getZlList();
}
// //类型查询
function onSelect(val) {
  zlList.list = [];
  pageCurrent.value = 1;
  zllx.value = tabs.value[val].zllx;
  loading.value = false;
  loadingPull.value = false;
  finished.value = false;
  _getZlList();
}
//获取指令数据列表
function _getZlList() {
  loading.value = true;
  let data = {
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value,
    zlzxzt: zlTypeIndex.value,
    zlnr: kwd.value,
    kssj: startTime.value,
    jssj: endTime.value,
    zllx: zllx.value,
    zlly: listQuery.value.zlly
  };
  getZlList(data)
    .then((res) => {
      loading.value = false;
      loadingPull.value = false;
      total.value = res.pages;
      let arr = res.records ? res.records : [];
      arr.forEach((item) => {
        zlList.list.push(item);
      });
    })
    .catch((err) => {
      loading.value = false;
    });
}
//获取指令统计数据
function _getZlTotal() {
  getZlTotal()
    .then((res) => {
      tabs.value[0].count = 0;
      if (res.length > 0) {
        res.forEach((item) => {
          tabs.value[0].count += item.count;
          switch (item.zllx) {
            case "01":
              tabs.value[1].count = item.count;
              break;
            case "02":
              tabs.value[2].count = item.count;
              break;
            case "03":
              tabs.value[3].count = item.count;
              break;
            case "04":
              tabs.value[4].count = item.count;
              break;
            case "05":
              tabs.value[5].count = item.count;
              break;
            case "06":
              tabs.value[6].count = item.count;
              break;
            case "07":
              tabs.value[7].count = item.count;
              break;
            case "08":
              tabs.value[8].count = item.count;
              break;
          }
        });
      }
    })
    .catch((err) => { });
}

const onClickRight = () => {
  router.push('/addZlInfo')
}
//选中时间
function onTimeConfirm(val) {
  if (timeType.value == "start") {
    startTime.value = dateFormat("", val);
  } else {
    endTime.value = dateFormat("", val);
  }
  timeShow.value = false;
}

//选中指令状态
function onClickZlzt(index, dm) {
  zlTypeIndex.value = dm;
  zlztIndex.value = index;
}
//确认筛选条件
function onConfirm(val) {
  zlList.list = [];
  pageCurrent.value = 1;
  startTime.value = val.startTime;
  endTime.value = val.endTime;
  zlTypeIndex.value = "";
  for (let i = 0; i < val.list.length; i++) {
    for (let j = 0; j < val.list[i].array.length; j++) {
      if (val.list[i].array[j].isCheck) {
        zlTypeIndex.value = val.list[i].array[j].key;
        break;
      }
    }
  }
  _getZlList();
  showPopup.value = false;
}
//重置筛选条件
function onReset() {
  startTime.value = "";
  endTime.value = "";
  zlztIndex.value = -1;
}
//触底加载
function onLoad() {
  if (pageCurrent.value >= total.value) {
    finished.value = true;
    return;
  }
  pageCurrent.value += 1;
  _getZlList();
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.sticky_box {
  @include bg_color($background-color-theme);

  .tabs_box {
    @include font_size($font_medium_s);
    @include font_color($font-color-theme);
    display: flex;

    .tabs_item {
      width: 25%;
      text-align: center;

      .tabs_count {
        margin-top: 2vw;
      }
    }
  }
}

.zl_sx_box {
  @include font_size($font_medium_s);
  padding: 4vw 0;

  .item_title {
    padding: 0 3.5vw;
    font-weight: 600;
  }

  .zlzt_box {
    padding: 4vw;

    .tag_item {
      margin: 0 3vw 3vw 0;
      padding: 1vw 3vw;
    }
  }
}

.but_box {
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
}

.item_box {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  margin: 0 3.5vw 4vw 3.5vw;
  padding: 2vw;

  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ststus {
      font-size: 10px;
      padding: 0 10px;
      color: #fff;
      border-radius: 10px;
    }

    .dfk {
      background-color: rgb(242, 199, 6);
    }

    .yfk {
      background-color: #3e6ee8;
    }

    .ywj {
      background-color: #4fbe0d;
    }

    .ddc {
      background-color: orangered;
    }

    .djc {
      background-color: orange;
    }
  }

  >div {
    line-height: 20px;
  }

  .title {
    @include font_size($font_medium);
    font-weight: bold;
  }
}

.top_tabs {
  margin-top: 13vw;
}

.left_top_tabs {
  margin-bottom: -10.5vw;
}
</style>
