<!--
 * @Author: your name
 * @Date: 2021-01-18 15:46:34
 * @LastEditTime: 2021-11-30 18:54:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\Home.vue
-->
<template>
  <Bg></Bg>
  <Header></Header>
  <div class="container2">
    <div class="mainDiv">
      <div class="leftBox">
        <Title title="工人列表"></Title>
        <div class="workerList">
          <div
            class="workerItem cursor-pointer"
            v-for="item in workerPathList"
            :key="item.id"
            :class="[selectedWorkerObj.id == item.id ? 'active' : '']"
            @click="selectedWorker(item)"
          >
            <img class="icon" :src="item.icon" />
            <div class="desc">
              <div class="name">{{ item.name }}</div>
              <div class="type">临时工</div>
            </div>
            <div class="timeBox">
              <div class="time">{{ item.execTime }}分</div>
              <div class="length">{{ item.pathLength }}m</div>
            </div>
            <el-icon class="arrowRight"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <div class="head">
          <div class="name">工人执行轨迹</div>
          <div class="line"></div>
          <div class="rhombus"></div>
          <el-select class="select" effect="dark" popper-class="v-select-popper-ns" v-model="value">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="tabs">
          <div class="title">
            农事-
            <!-- <template  v-for="(name,index) in rowData.nsTypeNames" :key="index">
              <template v-if="index != 0">、</template>{{name}}
            </template> -->
          </div>
          <div
            class="tab cursor-pointer"
            @click="onActive(index, item, true)"
            :class="[selected == index ? 'active' : '']"
            v-for="(item, index) in createDateList"
            :key="item"
          >
            {{ item }}
          </div>
          <div
            v-if="selectedWorkerObj.name"
            class="title selectWorker cursor-pointer"
            @click="reloadAll"
          >
            查看全部
          </div>
        </div>
        <div class="map" ref="mapRef"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { onMounted, ref, onUnmounted } from "vue";
import config from "@/api/config.js";
import { useRoute } from "vue-router";
import Title from "../components/title";
import WorkerMap from "./WorkerMap";
import Bg from "../Bg";
import Header from "@/views/components/Header.vue";

const store = useStore();
const createDateList = ref([]);
const workerPathList = ref([]);
const curCreateDate = ref(null);
const route = useRoute();
const selected = ref(null);
const selectedWorkerObj = ref({});
const mapRef = ref(null);
const pollingId = ref(null);
let kmap = new WorkerMap();

const queryId = route.query.recordId;

onMounted(() => {
  loadCreateDateList();
  let location = store.getters.userinfo.location;
  let organId = store.getters.userinfo.curGardenId;
  kmap.initMap(location, mapRef.value);
  kmap.initClick((f) => {
    let res = workerPathList.value.find((item) => item.id == f.get("id"));
    selectedWorker(res);
  });
  kmap.initArea(organId);
});

onUnmounted(() => {
  if (pollingId.value != null) {
    clearTimeout(pollingId.value);
  }
});

async function onActive(index, createDate, checkSelected) {
  if (checkSelected && selected.value == index) {
    return;
  }
  if (pollingId.value != null) {
    clearTimeout(pollingId.value);
  }
  curCreateDate.value = createDate;
  //加载工人点位
  await loadWorker(createDate);
  kmap.fit(kmap.workerLayer.source.getExtent());

  //查询当期日期是否已汇总
  let res = await VE_API.ns_record_allot_collect.isAllCollect({
    recordId: queryId,
    createDate,
  });
  //没有汇总过的
  if (!res.data) {
    polling();
  }
  selected.value = index;
}
//加载工人点位
async function loadWorker(createDate) {
  //查询工人点位
  let { data } = await VE_API.ns_record_allot_executor.workerPathList({
    recordId: queryId,
    createDate,
  });
  workerPathList.value = data;
  kmap.initWorker(data);
}

function polling() {
  loadWorker(curCreateDate.value);
  pollingId.value = setTimeout(polling, 5000);
}

function loadCreateDateList() {
  VE_API.ns_record_allot_executor
    .getExecutorCreateDate({ nsRecordId: queryId })
    .then(({ data }) => {
      createDateList.value = data;
      onActive(0, createDateList.value[0], false);
      loadWorker(curCreateDate.value);
    });
}

/**
 * 选择工人
 */
function selectedWorker(obj) {
  kmap.loadExecutorPath(obj.id);
  selectedWorkerObj.value = obj;
  if (pollingId.value != null) {
    clearTimeout(pollingId.value);
  }
}

function reloadAll() {
  onActive(selected.value, createDateList.value[selected.value], false);
  selectedWorkerObj.value = {};
}

const value = ref("Option1");
const options = [
  {
    value: "Option1",
    label: "筛选农事",
  }
];
</script>

<style lang="scss" scoped>
@import "../../styles/index.scss";

.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
}

.mainDiv {
  position: absolute;
  top: 100px;
  bottom: 50px;
  left: 20px;
  right: 20px;

  .leftBox {
    float: left;
    width: 25%;
    height: calc(100%);
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
    overflow: hidden;
    .workerList {
      @include wh(100%, calc(100% - 58px));
      margin-top: 10px;
      background: rgba(1, 224, 212, 0.08);
      overflow-y: auto;
      .workerItem {
        @include wh(auto, calc(80px));
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .icon {
          @include wh(61px, 61px);
          border: 1px solid rgba(2, 240, 235, 0.67);
          padding: 5px;
          box-sizing: border-box;
          border-radius: 50%;
          margin-left: 21px;
        }
        .desc {
          margin-left: 16px;
          .name {
            @include wh(100px, 30px);
            @include PingFang(#fff, 500);
            font-size: 23px;
          }
          .type {
            margin-top: 3px;
            @include wh(80px, 23px);
            @include PingFang(#00fff0, 500);
            font-size: 17px;
          }
        }
        .timeBox {
          @include wh(150px, 41px);
          background: rgba(66, 66, 66, 0.62);
          border-radius: 5px;
          border: 1px solid #00f0e3;
          display: flex;
          align-items: center;
          padding-left: 9px;
          .time {
            @include wh(150px, 41px);
            line-height: 41px;
            font-family: DOUYU;
            font-weight: normal;
            font-size: 20px;
            color: #00fff0;
          }
          .length {
            @include wh(187px, 41px);
            line-height: 41px;
            font-family: DOUYU;
            font-weight: normal;
            font-size: 20px;
            color: #00fff0;
          }
        }
        .arrowRight {
          font-size: 25px;
          color: #ffffff;
          margin-left: 16px;
        }
      }
      .active {
        background-color: #ffffff50;
      }
    }
  }
  .rightBox {
    position: relative;
    float: right;
    width: calc(75% - 12px);
    height: 100%;
    background: #032c3940;
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
    .head {
      @include wh(calc(100% - 19px - 224px), 30px);
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-right: 224px;
      position: relative;
      .select{
        position: absolute;
        right: -232px;
        width: 137px;
        top: 7px;
        ::v-deep{
          .el-select__wrapper{
            background: #052834;
            border-radius: 5px;
            border: 1px solid #5EFCFF;
            box-shadow: none;
          }
          .el-select__placeholder,.el-select__caret{
            color: #00F6FF;
          }
        }
      }

      .name {
        @include wh(auto, 21px);
        font-weight: normal;
        font-size: 21px;
        line-height: 30px;
        color: #ffffff;
      }

      .line {
        width: calc(100% - 250px);
        border-bottom: 1px solid #51e9f0;
        opacity: 0.4;
        box-sizing: border-box;
        margin-top: 7px;
      }

      .rhombus {
        margin-top: 7px;
        @include wh(50px, 15px);
        @include ossBg("rhombus.png");
      }
    }
    .tabs {
      @include wh(calc(100% - 200px), auto);
      float: left;
      display: flex;
      align-items: center;
      margin: 20px 0px 0px 13px;
      .title {
        @include wh(auto, auto);
        background: rgba(0, 255, 240, 0.65);
        border-radius: 5px;
        border: 1px solid #5efcff;
        box-sizing: border-box;
        text-align: center;
        @include PingFang(#ffffff, 800);
        font-size: 20px;
        padding: 6px 18px;
      }
      .tab {
        @include wh(auto, auto);
        background: #012226;
        border-radius: 5px;
        border: 1px solid #5efcff;
        text-align: center;
        @include PingFang(#ffffff, 800);
        font-size: 20px;
        padding: 3px 10px;
        margin-left: 10px;
      }
      .active {
        background: #5efcff;
        border-radius: 5px;
        border: 1px solid #5efcff;
        color: #012226;
      }
      .selectWorker {
        position: absolute;
        right: 15px;
      }
    }

    .map {
      position: absolute;
      top: 106px;
      left: 13px;
      right: 13px;
      bottom: 13px;
    }
  }
}
</style>
