<!--
 * @Author: your name
 * @Date: 2020-03-22 11:36:21
 * @LastEditTime: 2023-04-10 17:02:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
 -->
<template>
   <div class="qs-box">
    <div class="popTitle">{{ childTitle }}指令签收情况</div>
      <div class="tjtitle">
        <el-date-picker
          v-model="searchDay"
          type="date"
          placeholder="选择日期"
          style="width: 150px"
          value-format="YYYY-MM-DD"
          @change="changeDay"
        />
        <div class="tjli lightblue">
          当日应巡逻：<span>{{ allNums <= 0 ? 0 : allNums }}</span>
        </div>
        <div class="tjli green">
          当日已巡逻：<span>{{ alreadyNums <= 0 ? 0 : alreadyNums}}</span>
        </div>
        <div class="tjli orange">
          当日未巡逻：<span>{{
            Number(allNums) - Number(alreadyNums) <= 0 ? 0 : (Number(allNums) - Number(alreadyNums)%100).toFixed(0)
          }}</span>
        </div>
      </div>
  </div>
  <div style="height:600px;">
    <GdMap id="mapDivDialog" v-if="mapShow"/>
  </div>
</template>

<script setup>
import { timeValidate } from "@/utils/tools";
import { ZHJMXF_URL, ASSESS_SCORE_URL } from "@/settings";
import { JXgetPageList, getStatistics } from "@/api/performance";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import GdMap from "@/components/Map/GdMap/index.vue";
import emitter from "@/utils/eventBus.js";
import { parseTime, timestampToStr } from "@/utils/index";
import { queryListfzyc } from "@/api/dpApi/home.js";
const props = defineProps({
  childTitle: {
    default: "",
    type: String
  },
  searchType: {
    default: "",
    type: String
  },
  ssbmdm: {
    default: "",
    type: String
  }
});
const childlistQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  type: "01",
  searchType: props.searchType,
  kssj: "",
  jssj: "",
  ssbmdm: props.ssbmdm,
  cxcj: "02"
});
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
const searchDay = ref("");
const allNums = ref("");
const tableChildData = ref([]);
const alreadyNums = ref("");
const notNums = ref("");
const total = ref(0);
const allList = ref([]);
const mapShow = ref(false);
onMounted(() => {
  nextTick(()=>{ mapShow.value = true; })
  searchDay.value = timeValidate(new Date(),'ymd');
  childlistQuery.value.kssj = timeValidate(new Date(),'ymd');;
  childlistQuery.value.jssj = timeValidate(new Date(),'ymd');;
  getChildTableList();
  _getStatistics();
  showFZYC();
});
watch(
  () => [props.ssbmdm, props.searchType],
  () => {
    childlistQuery.value.ssbmdm = props.ssbmdm;
    childlistQuery.value.searchType = props.searchType;
    getChildTableList();
    _getStatistics();
    showFZYC();
  },
  { deep: true }
);
// 地图撒点
function showFZYC() {
  emitter.emit("deletePointArea", "zdxl_fzyc");
  let { kssj, jssj, ssbmdm } = childlistQuery.value;
  let param = {
    ssbmdm: ssbmdm,
    kssj: kssj,
    jssj: jssj,
    pageCurrent: 1,
    pageSize: 1000   
  };
  queryListfzyc(param).then((res) => {
    if(res.length == 0 ) return false;
    let cc = []
    let list = res.map((el, index) => {
      let centerPoint = [el.zxX,el.zxY]
      if(index == 0) cc = centerPoint;
      let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
      let text = el.realDate + ' ' + el.bc
      let obj = { position:position,text, id: el.id ,userData:el} 
      return obj;
    });
    let arr1 = list.filter(v=>{return v.sfxl == 1})
    let arr2 = list.filter(v=>{return v.sfxl != 1})
    let params1 = { fontColor:'#12fdb8',coords: arr2, type:'rectangle', flag:'zdxl_fzyc',color:'rgba(2,20,51,0.5)',linecolor:'#f51616'}
    let params2 = { fontColor:'#12fdb8',coords: arr2, type:'rectangle', flag:'zdxl_fzyc',color:'rgba(2,20,51,0.5)',linecolor:'#1C97FF'}
    emitter.emit("echoPlane", params1);
    emitter.emit("echoPlane", params2);
    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
  });
}
// 获取弹窗表格初始化数据
const getChildTableList = () => {
  JXgetPageList(childlistQuery.value).then((res) => {
    tableChildData.value = res.records;
    total.value = res.total;
  });
};
const _getStatistics = () => {
  let { searchType, ssbmdm, kssj } = childlistQuery.value;
  let params = {
    searchType: searchType,
    ssbmdm: ssbmdm,
    time: kssj
  };
  getStatistics(params).then((res) => {
    alreadyNums.value = res.sjxl;
    allNums.value = res.yxl;
  });
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  childlistQuery.value.pageSize = currentSize;
  getChildTableList();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  childlistQuery.value.pageCurrent = currentPage;
  getChildTableList();
};
const changeDay = (val) => {
  childlistQuery.value.kssj = val;
  childlistQuery.value.jssj = val;
  getChildTableList();
  _getStatistics();
  showFZYC();
};
</script>

<style lang="scss" scoped>
.popTitle {
  color: #72d8ff;
  line-height: 24px;
  font-size: 18px;
  text-align: center;
}
.tjtitle {
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .tjli {
    flex: 1;
    text-align: center;
    font-size: 18px;
  }
}
::v-deep .el-table th.el-table__cell {
  background: #0d2944 !important;
  color: #61f9ff;
}
.qs-box {
  ::v-deep .el-table__body-wrapper {
    height: 40vh;
    overflow: auto;
  }
}
</style>
