<template>
  <div style="padding-top: 13vw">
    <TopNav :navTitle="title" :showRight="false" :showLeft="true" />
    <van-sticky>
      <div class="myzls">
        <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, D_BZ_RGZLLX, D_BZ_ZLLY, D_BZ_ZLLX }" :path="`/yyzx/zlzx/zlDetail?id=${item.zlId}`"
          :isMyFqdzl="true">
        </ZlList>
        <van-empty description="暂无指令信息" image="default" v-if="showEmpty" />
      </van-list>
    </van-pull-refresh>
    <SxPopup :showPopup="showPopup" :list="zlList.sxTypeList" :p_top="105" @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,
  setEchartTime,
} from "../../utils/tools.js";
import { getDictList, setDict } from "../../utils/dict";
import { ref, onMounted, reactive, watch } from "vue";
import { Toast } from "vant";
import { getMyZlList, getMyCsList } from "../../api/zlzx.js";
import { useRoute } from "vue-router";
const { D_BZ_ZXZTAI, D_BZ_RGZLLX, D_BZ_ZLLY, D_BZ_ZLLX } = getDictList(
  "D_BZ_ZXZTAI",
  "D_BZ_RGZLLX",
  "D_BZ_ZLLY",
  "D_BZ_ZLLX"
); //字典信息
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 showEmpty = 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 zlList = reactive({
  list: [], //指令列表数据
  sxTypeList: [], //筛选项数据
});
const title = ref("我发起的指令");
const type = ref("");
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(() => {
  type.value = useRoute().query.type;
  if (type.value == "cs") {
    title.value = "抄送我的指令";
  }
  _getZlList();
});
//下拉刷新
function onRefresh() {
  zlList.list = [];
  zlList.Sclist = [];
  pageCurrent.value = 1;
  zlTypeIndex.value = "";
  kwd.value = "";
  startTime.value = "";
  endTime.value = "";
  loading.value = false;
  loadingPull.value = false;
  finished.value = false;
  tabsIndex.value++;
  _getZlList();
}
//关键字查询
function onSearch(e) {
  kwd.value = e;
  zlList.list = [];
  zlList.Sclist = [];
  pageCurrent.value = 1;
  showEmpty.value = false;
  _getZlList();
}
// //类型查询
function onSelect(val) {
  zlList.list = [];
  zlList.Sclist = [];
  pageCurrent.value = 1;
  zllx.value = tabs.value[val].zllx;
  loading.value = false;
  loadingPull.value = false;
  finished.value = false;
  _getZlList();
}
//获取指令数据列表
function _getZlList() {
  loading.value = true;
  showEmpty.value = false;
  let data = {
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value,
    zlzxzt: zlTypeIndex.value,
    zlnr: kwd.value,
    kssj: startTime.value,
    jssj: endTime.value,
    zllx: zllx.value,
    sfcs: type.value ? 1 : 0,
  };
  if (type.value) {
    getMyCsList(data).then((res) => {
      loading.value = false;
      loadingPull.value = false;
      total.value = res.pages;
      if (res.records.length > 0) {
        res.records.forEach((item) => {
          zlList.list.push(item);
        });
      } else {
        showEmpty.value = true;
      }
    });
  } else {
    getMyZlList(data).then((res) => {
      loading.value = false;
      loadingPull.value = false;
      total.value = res.pages;
      if (res.records.length > 0) {
        res.records.forEach((item) => {
          zlList.list.push(item);
        });
      } else {
        showEmpty.value = true;
      }
    });
  }
}

//选中时间
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 = [];
  zlList.Sclist = [];
  pageCurrent.value = 1;
  startTime.value = val.startTime;
  endTime.value = val.endTime;
  showEmpty.value = false;
  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;
  }
}
</style>
