<!--
 * @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 />
  <div class="container2">
    <div class="mainDiv">
      <template v-if="tabActive == 'xyzp'">
        <div class="leftBox">
          <MiniMap
            ref="miniMapRef"
            class="miniMap"
            @selectTree="selectTree"
            @selectOrganIdAndAreaId="selectOrganIdAndAreaId"
            @getTreeList="getTreeList"
            @initListener="miniMapInitListener"
          ></MiniMap>
          <!-- <Setting
            ref="settingRef"
            class="setting"
            @selectAttr="selectAttr"
            @selectPeriod="selectPeriod"
            @selectTree="selectTree"
            @moveMap="settingMoveMap"
            v-if="treeList && treeList.length > 0"
            :treeList="treeList"
            :periodMap="periodMap"
          ></Setting> -->
          <LineChart
            class="line-chart"
            :treeList="treeList"
            :periodMap="periodMap"
          ></LineChart>
        </div>
        <!--
          :labels="[
              { id: 0, label: '按照单树' },
              { id: 1, label: '按照时间' },
              { id: 2, label: '病虫异常' },
            ]"
         -->
        <div class="rightBox">
          <div class="title">分区管理照片</div>
          <div class="select-wrap">
            <SelectMenu
              class="selectMenu"
              @select="selectMenuClick"
              :selectedIndex="selectActive"
              :labels="[
                { id: 0, label: '物候表型' },
                { id: 1, label: '生长调节' },
                //{ id: 2, label: '病虫异常' },
                // { id: 3, label: '虫害异常' },
                // { id: 4, label: '日常巡飞' },
              ]"
            ></SelectMenu>
            <div class="switch" @click="handleSwitch">
              <el-icon color="#00FFF0" size="15"><Switch /></el-icon>
              <span>切换{{ switchValue ? "原图" : "指标图" }}</span>
            </div>
          </div>
          <div
            class="treeListView"
            :key="selectActive"
            v-infinite-scroll="onScrolltolower"
            :infinite-scroll-disabled="disabled"
            :infinite-scroll-distance="20"
          >
            <template v-if="selectActive == 0">
              <TreeImgList
                :selected="selected"
                :periodId="curPeriodId"
                :attrField="curAttrField"
                v-for="treeImg in treeImgList"
                :treeId="treeImg.id"
                :key="treeImg.id"
                :code="treeImg.code"
                :images="treeImg.images"
                @clickAction="imgListClick"
                @preview="preview"
                :switchValue="switchValue"
              ></TreeImgList>
              <div v-if="nomore" style="text-align: center">没有更多</div>
            </template>
            <template v-if="selectActive == 1">
              <DateImgList
                :selected="selected"
                :periodId="curPeriodId"
                :attrField="curAttrField"
                v-for="dateImg in dateImgList"
                :key="dateImg.uploadDate"
                :createDate="dateImg.uploadDate"
                @clickAction="imgListClick"
                @preview="preview"
                :images="dateImg.data"
                :switchValue="switchValue"
              >
              </DateImgList>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>

  <!-- <ImageViewer
    v-if="showViewer"
    :urls="urls"
    :index="urlsIndex"
    :datas="datas"
    :fields="['code', 'uploadDate']"
    @close="closeViewer"
  /> -->

  <PicturePreview
    v-if="zoomDisplay"
    :show="showViewer"
    :imageUrl="urls"
    :curIndex="urlsIndex"
    :switchValue="switchValue"
  ></PicturePreview>
</template>

<script setup>
import Header from "@/views/components/Header.vue";
import PicturePreview from "@/components/PicturePreview.vue";
import Bg from "../Bg";
import { useStore } from "vuex";
import {
  onMounted,
  ref,
  onBeforeUnmount,
  watchEffect,
  provide,
  inject,
  watch,
  computed,
} from "vue";
import config from "@/api/config.js";
import SelectMenu from "../components/SelectMenu";
import TreeImgList from "./com/tree_img_list/TreeImgList";
import MiniMap from "./com/MiniMap";
import { groupByTreeId, groupByCreateDate, setPeriodAttr } from "./map.js";
import DateImgList from "./com/date_img_list/DateImgList";
import Setting from "./com/Setting";
import LineChart from "./com/lineChart";
import { ElMessage, ElLoading } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import ImageViewer from "./com/global/ImageViewer";
let page = 0;
let limit = 10;
const showViewer = ref(false);
const zoomDisplay = ref(false)
const urls = ref([]);
const disabled = ref(true)
const datas = ref([]);
const urlsIndex = ref(0);
const router = useRouter();
const miniMapRef = ref(null);
const settingRef = ref(null);
const selected = ref([]);
const tabActive = ref("xyzp");
const selectActive = ref(0);
let dateImgData = [];
let dateImgList = ref([]);
let treeImgList = ref([]);
let periodMap = {};
let treeCodeMap = {};
let treeList = ref([]);
let curPeriodId = ref(null);
let curAttrField = ref(null);
let loadingInstance = null;
let nomore = ref(false);

function selectOrganIdAndAreaId(organId, areaId) {
  page = 0;
  if (selectActive.value == 0) {
    treeImgList.value = [];
    initTreeImgList(organId, areaId, page, limit);
  }
  if (selectActive.value == 1) {
    dateImgData = [];
    initDateImgList(organId, areaId, page, limit);
  }
}

function getTreeList(data) {
  treeList.value = data;
  for (let item of data) {
    treeCodeMap[item.id] = item.code;
  }
}
/**
 * 初始化TreeImgList
 * */
async function initTreeImgList(organId, areaId, pageNo) {
  if (pageNo) {
    page = pageNo;
  }
  if (!areaId) {
    areaId = -1;
  }
  let { code, data } = await VE_API.tree.page({ organId, areaId, page, limit });
  if (data.length == 0) {
    nomore.value = true;
  }
  for (let item of data) {
    treeImgList.value.push(item);
  }
  disabled.value = false
}

/**
 * 初始化DateImgList
 * */
async function initDateImgList(organId, areaId, pageNo) {
  if (pageNo) {
    page = pageNo;
  }
  let { code, data } = await VE_API.tree_img.images({
    organId,
    areaId,
    page,
    limit,
  });
  if (data.length == 0) {
    nomore.value = true;
  }
  for (let item of data) {
    let code = treeCodeMap[item.treeId];
    item.code = code;
    dateImgData.push(item);
  }
  dateImgList.value = groupByCreateDate(dateImgData);
}

/**
 * 页面上拉触底事件的处理函数
 */
async function onScrolltolower() {
  let organId = miniMapRef.value.getOrganId();
  let curAreaId = miniMapRef.value.getAreaId();
  if (!organId) {
    return;
  }
  if (selectActive.value == 0) {
    await initTreeImgList(organId, curAreaId, page + 1);
  } else {
    await initDateImgList(organId, curAreaId, page + 1);
  }
}

/**
 * 更新setting范围框到MiniMap
 */
function settingMoveMap(feature) {
  miniMapRef.value.updateExtentFeature(feature);
}

function selectMenuClick(val) {
  selectActive.value = val.id;
  let organId = miniMapRef.value.getOrganId();
  let curAreaId = miniMapRef.value.getAreaId();
  page = 0;
  if (!organId) {
    return;
  }
  selectOrganIdAndAreaId(organId, curAreaId);
}
/**
 * 选择树
 */
async function selectTree(feature) {
  if (!feature) {
    selected.value = [];
  }
  //选择了没有图片的树
  if (feature.get("noImg")) {
    showMessage("选中的树没有图片！");
    return;
  }
  //查询该树节点是否已经有加载了图片
  if (treeImgList.value.findIndex((item) => item.id == feature.getId()) > -1) {
    scrollIntoView(feature.getId());
  } else {
    await onScrolltolower();
    setTimeout(function () {
      selectTree(feature);
    }, 0);
  }
}

//跳到树的位置
function scrollIntoView(treeId) {
  selected.value = [treeId];
  let dom = document.querySelector("#tree_" + treeId);
  dom && dom.scrollIntoView();
  settingRef.value.setSelected(treeId);
  miniMapRef.value.setSelected(treeId);
}

/**
 * 修改Setting 页面的中心位置
 * */
function miniMapInitListener(center) {
  if (settingRef.value) {
    settingRef.value.setCenter(center);
  } else {
    setTimeout(miniMapInitListener, 500, center);
  }
}

/**
 * 点击图片列表
 * @param key
 * @param treeId
 */
function imgListClick(key, treeId) {
  switch (key) {
    case "treeImgList":
      selected.value = [treeId];
      break;
    case "dateImgList":
      selected.value = [treeId];
      break;
  }
  miniMapRef.value.setSelected(treeId);
  settingRef.value.setSelected(treeId);
}

/**
 * 预览照片
 * @param images
 */
function preview(images, dataArr, index) {
  datas.value = dataArr;
  const arr = dataArr.map((item,index) =>{
    return {
      ...item,
      imgPath:images[index],
      markText:item.markText
    }
  })
  urls.value = arr;
  urlsIndex.value = index;
  zoomDisplay.value = true;
  showViewer.value = !showViewer.value;
}
function closeViewer() {
  showViewer.value = false;
}
function showMessage(msg) {
  ElMessage({
    message: msg,
  });
}

onMounted(() => {
  page = 0;
  limit = 10;
});

const switchValue = ref(false);
const handleSwitch = () => {
  switchValue.value = !switchValue.value;
};
</script>

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

.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
  /* background-color: aqua; */
  /* opacity: 0.05; */
}
.selectMenu {
  padding: 10px 0 0 0;
}
.mainDiv {
  position: absolute;
  top: 100px;
  bottom: 50px;
  left: 20px;
  right: 20px;
  .label {
    height: 50px;
    display: flex;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      background-image: url("@/assets/img/btn_bg.png");
      background-size: 100% 100%;
      color: #b4fffb;
    }
    .active {
      background-image: url("@/assets/img/btn_bg_active.png");
      background-size: 100% 100%;
      color: #00fff0;
    }
  }

  .leftBox {
    float: left;
    width: 25%;
    height: calc(100%);
    .miniMap {
      height: 50%;
      border-radius: 4px;
      border: 1px solid rgba(81, 233, 240, 0.6);
      box-sizing: border-box;
    }
    .setting,.line-chart {
      margin-top: 12px;
      height: calc(50% - 12px);
      border-radius: 4px;
      border: 1px solid rgba(81, 233, 240, 0.6);
      box-sizing: border-box;
    }
  }
  .rightBox {
    float: right;
    width: calc(75% - 12px);
    height: 100%;
    background: #032c3940;
    border-radius: 4px;
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
    .title {
      background: url("@/assets/img/zhgl_bg.png") no-repeat center center / 100%
        100%;
      padding: 14px 0;
      font-size: 19px;
      color: #00fff0;
      text-align: center;
    }
    .select-wrap {
      position: relative;
      .switch {
        cursor: pointer;
        background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
          100% 100%;
        width: 120px;
        text-align: center;
        padding: 7px 0;
        color: #B4FFFB;
        position: absolute;
        right: 20px;
        top: 15px;
      }
    }

    .treeListView {
      height: calc(100% - 111px);
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
</style>
