<template>
  <div class="timeLine">
    <!-- <a-select ref="select" mode="multiple" placeholder="数据选择" @change="handleChange" @focus="getMapDataList"
      style="width: 220px; background: rgba(133, 135, 133,0.2); margin-top: -1px;">
      <a-select-option v-for="item in options" :key="item.value" :value="item.label">{{ item.label }}</a-select-option>
    </a-select> -->

    <!--  -->
    <div class="skyDataControlDvie">
      <!-- 搜索框 -->
      <div class="searchDiv" @click="getMapDataList">
        <!-- <a-input class='searchInput'  allow-clear  placeholder="数据选择" @change="getMapDataList" v-model:value="key">
        <template #prefix>
          
        </template>
      </a-input> -->
        <!-- <DownOutlined @click="getMapDataList" />数据选择 -->
        <img
          src="/src/assets/images/下拉.png"
          alt=""
          @click="getMapDataList"
          style="height: 10px; height: 8px; margin-top: 10px; margin-right: 5px"
        />
        <span style="margin-top: 3px">天/空基列表</span>
      </div>
      <!-- 数据面板 -->
      <div class="searchPanle" v-show="searchPanleShow" id="myPanel" ref="showContent">
        <div class="searchList">
          <a-checkbox-group v-model:value="layerItemList" @change="checkBoxChange">
            <template v-for="(item, index) in layerList" :key="'layerList_' + index">
              <div class="layerItem">
                <div @click="upOrOff(item)" class="layerGroup">
                  <CaretDownOutlined title="点击收缩" v-if="!item.show" class="layerIcon" />
                  <CaretRightOutlined title="点击展开" v-if="item.show" class="layerIcon" />
                  <div class="layerTitle">{{ item.sjlxmc || item.sjlx }}</div>
                </div>
                <template v-for="(item2, index2) in item.data" :key="'layerItem_' + index + '_' + index2">
                  <div class="itemDiv">
                    <a-checkbox :value="item2">
                      {{ item2.zymc }}
                    </a-checkbox>
                
                  </div>
                </template>

                <!-- <a-checkbox-group v-model:value="value">
                <a-row  v-for='(item2,index2) in item.data' :key="'layerItem_'+index+'_'+index2">
                   <a-col :span="8">
                     <a-checkbox value="A">A</a-checkbox>
                   </a-col>
                </a-row>
            </a-checkbox-group> -->
              </div>
            </template>
          </a-checkbox-group>
        </div>
      </div>
    </div>
    <!-- 播放按钮 -->
    <!-- <div style="margin-left: 10px;" @click="playTime">
      <div style="width: 35px; height: 35px; border-radius: 50px; opacity: 1; background: #2391FF; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);">
        <CaretRightOutlined :style="{ fontSize: '30px'}" class="playBtu" v-if="playContro"></CaretRightOutlined>
        <PauseOutlined :style="{ fontSize: '30px'}" class="playBtu" v-if="!playContro"/>
      </div>
    </div> -->
    <div style="margin-left: 10px" @click="playTime">
      <img src="/src/assets/images/播放.png" alt="" v-if="playContro" style="height: 35px; margin-top: 3px" />
      <img src="/src/assets/images/暂停.png" alt="" v-if="!playContro" style="height: 35px; margin-top: 3px" />
    </div>
    <!--时间轴  -->
    <div class="sliderWidth">
      <a-slider :tip-formatter="formatter" :marks="marks" :step="10" v-model:value="value4" @change="transparency(value4)" />
    </div>

    <b class="closeTimeline" @click="closeTime">×</b>
  </div>
  <!-- <div @click="closeTime"><CloseCircleOutlined /></div> -->
</template>
<script>
import { defineComponent, ref, createVNode, onBeforeUnmount, onMounted, computed, watch, reactive, onUnmounted } from 'vue';
import { PlayCircleTwoTone, CloseCircleOutlined, DownOutlined, CaretDownOutlined, CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { getSourceInfo } from '/@/api/map/getData.ts';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import { emit } from 'process';
export default defineComponent({
  components: { PlayCircleTwoTone, CloseCircleOutlined, DownOutlined, CaretDownOutlined, CaretRightOutlined, PauseOutlined },
  setup(props, { emit }) {
    let searchPanleShow = ref(false);
    const showContent = ref(null);
    const checkClick = (event) => {
      let dom = showContent.value; // 这里是你的下拉菜单元素
      console.log(dom);
      console.log(dom.contains(event.target));
      if (!dom.contains(event.target)) {
        // 不在菜单范围，隐藏即可
        if (searchPanleShow.value) {
          searchPanleShow.value = false;
          document.removeEventListener('click', checkClick);
        }
      }
    };

    watch(
      () => searchPanleShow.value,
      (n) => {
        if (n) {
          setTimeout(() => {
            document.addEventListener('click', checkClick);
          }, 0);
        } else {
          document.removeEventListener('click', checkClick);
        }
      }
    );
    onUnmounted(() => {
      document.removeEventListener('click', checkClick);
    });

    let initData = [];
    const disabled = ref(false);
    const value4 = ref(0);
    const speed = 1;
    let marks = ref({});
    let options = ref([]);
    let layerItemList = ref([]);
    const formatter = (value) => {
      return `${value}`;
    };
    let searchAction = true;
    let currentItem = null;
    const layerList = reactive([]);

    // onMounted(() => {
    //   document.addEventListener('click', (e)=> {
    //     if (e.target.className != 'searchPanle') {
    //         searchPanleShow.value = false;
    //     }
    // })
    // })

    //   const hidePanel = (event) => {
    // 	var sp = document.getElementById("myPanel");
    // 	if(sp){
    // 		//这句是说如果我们点击到了id为myPanel以外的区域
    // 		if(!sp.contains(event.target)){
    // 		  searchPanleShow.value = false;
    // 		}
    // 	}
    // }

    /**
     * 展开和收缩
     */
    function upOrOff(item) {
      item.show = !item.show;
    }

    // 得到地图列表
    const getMapDataList = async () => {
      // await getSourceInfo({size:1000,current:1}).then((res) => {
      //   console.log('地图列表',res)
      //   if(res.code == 1){
      //       res.result.records.forEach((item, index) => {
      //       if(!item.code){
      //         item.code="code_"+index;
      //       }
      //       item["label"] = item.zymc
      //       item["value"] = item.code
      //       item["type"] = true
      //       item["sliderValue"] = 100
      //     })
      //     initData = res.result.records.filter((item)=>{
      //       return item.jclx == '1'
      //     })
      //   }
      //   console.log('处理之后的地图列表',initData)
      // })
      // options.value = JSON.parse(JSON.stringify(initData));
      // console.log('处理之后的地图列表111',options)

      if (searchAction) {
        searchAction = false;
      }
      TFMapUitl.clearArray(layerList);
      await getSourceInfo({ size: 1000, current: 1 }).then((res) => {
        const tempData = [];
        const filedData = [];
        TFMapUitl.clearArray(layerList);
        if (res.code == 1) {
          res.result.records.forEach((item, index) => {
            item.active = false;
            item.show = true;
            item['label'] = item.zymc;
            item['value'] = item.code;
            item['type'] = true;
            item['sliderValue'] = 100;
            if (item.sjlx) {
              if (currentItem && currentItem.id == item.id) {
                item.active = true;
              }
              const tempKey = item.sjlx + '_jclx';
              if (tempData[tempKey]) {
                tempData[tempKey].data.push(item);
              } else {
                filedData.push(tempKey);
                tempData[tempKey] = { data: [item], sjlx: item.sjlx, sjlxmc: item.sjlxmc };
                tempData.push(tempData[tempKey]);
              }
            }
          });
          filedData.forEach((item) => {
            delete tempData[item];
          });
        }
        layerList.push(...tempData);
        searchAction = true;
        searchPanleShow.value = true;
      });
    };

    const showLayer = (value, index) => {
      console.log('选中的值', value);
    };
    // let initData = [
    //   { label: '河流', value: 'hl', type: true, sliderValue: 100 },
    //   { label: '区域地质图', value: 'zdzm', type: true, sliderValue: 0 },
    //   { label: '地震断裂带图', value: 'dzdmhx', type: true, sliderValue: 0 },
    // ]

    // let options = ref(JSON.parse(JSON.stringify(initData)));

    // 选择的图层
    const sliderLayerArr = ref([]);
    let jiange = 0;
    let jiangeLength = 0;
    const handleChange = (value) => {
      // let initData2 = {};
      // initData.forEach(item => {
      //   console.log("777777777" + JSON.stringify(item))
      //   initData2[item.label] = item;
      // })
      // console.log("222222" + JSON.stringify(initData))
      // console.log("55555555" + JSON.stringify(initData2))
      // console.log("###11111" + JSON.stringify(value))
      if (value == []) {
        marks.value = {
          0: '',
          100: '',
        };
      } else {
        // const tempData = JSON.parse(JSON.stringify(initData2));
        // console.log("666666666" + JSON.stringify(tempData))
        // const tempData2 = [];
        // value.forEach(item => {
        //   tempData2.push(tempData[item])
        // });

        // console.log("###******" + JSON.stringify(tempData2))
        sliderLayerArr.value.splice(0, sliderLayerArr.value.length);
        // tempData2[0].sliderValue=100;
        sliderLayerArr.value.push(...value);

        console.log('###' + JSON.stringify(sliderLayerArr.value));
        // if (sliderLayerArr.value.length == 1) {
        //   var o = value[0];
        //   map.showLayer2D(o.code, true, true);
        // }
        sliderLayerArr.value = sortDataArray(sliderLayerArr.value);

        // 展示图层
        for (let i = 0; i < sliderLayerArr.value.length; i++) {
          if (!sliderLayerArr.value[i].title) {
            map.showLayer2D(sliderLayerArr.value[i].value, sliderLayerArr.value[i].type, i ? false : true);
          }
          if (i == 0) {
            map.setLayer2D(sliderLayerArr.value[i].value, 'alpha', 1);
          } else {
            map.setLayer2D(sliderLayerArr.value[i].value, 'alpha', 0.01);
          }
        }
        // 在进度条中打点
        jiange = sliderLayerArr.value.length - 1;
        console.log('间隔数' + JSON.stringify(jiange));
        jiangeLength = Math.ceil(100 / jiange);
        console.log('间隔长度' + JSON.stringify(jiangeLength));
        let marks1 = {};
        if (sliderLayerArr.value.length == 0) {
          marks1['0'] = '';
        } else {
          marks1['0'] = `${sliderLayerArr.value[0].label.slice(0, 7)}`;
          for (let i = 1; i <= sliderLayerArr.value.length - 2; i++) {
            marks1[`${i * jiangeLength}`] = `${sliderLayerArr.value[i].label.slice(0, 7)}`;
          }
          marks1['100'] = `${sliderLayerArr.value[sliderLayerArr.value.length - 1].label.slice(0, 7)}`;
          marks.value = marks1;
        }
      }
    };

    function sortDataArray(dataArray) {
      // dataArray.forEach((item) => {
      //   console.log(item);
      // });
      return dataArray.sort(function (a, b) {
        return Date.parse(a.sjsj.replace(/-/g, '/')) - Date.parse(b.sjsj.replace(/-/g, '/'));
      });
    }

    // let play = false

    // var i = 0;

    let playContro = ref(true);

    // 点击开始播放
    const playTime = () => {
      console.log('播放：0', sliderLayerArr.value);

      if (sliderLayerArr.value.length <= 0) {
        message.info('请先选择需要对比的图层');
        return;
      }
      playContro.value = !playContro.value;
      // play = !play
      let currentMap = {
        layer1: sliderLayerArr.value[0],
        layer2: sliderLayerArr.value[1],
        layeropt1: 100,
        layeropt2: 0,
      };
      if (value4.value == 0) {
        window.intervalId = setInterval(function () {
          // count += 1;
          //这里写需要重复执行的方法
          if (value4.value == 100) {
            initSider();
            // clearInterval(window.intervalId);
          }
          value4.value = value4.value + speed;
          // console.log("透明度" + JSON.stringify(value4.value))
          if (value4.value == 100) clearInterval(window.intervalId);
          let duanShu = Math.floor(value4.value / jiangeLength);
          currentMap.layer1 = sliderLayerArr.value[duanShu];
          currentMap.layer2 = sliderLayerArr.value[duanShu + 1];
          console.log('当前图层' + JSON.stringify(currentMap));
          let currentOp = (value4.value - jiangeLength * duanShu) * jiange;
          currentMap.layeropt1 = 100 - currentOp;
          currentMap.layeropt2 = currentOp;
          console.log(currentMap);
          if (currentMap.layer1) map.setLayer2D(currentMap.layer1.value, 'alpha', currentMap.layeropt1 / 100);
          if (currentMap.layer2) map.setLayer2D(currentMap.layer2.value, 'alpha', currentMap.layeropt2 / 100);
          // console.log("11111", value4.value)
          if (value4.value == 100) {
            initSider();
          }
        }, 85);
      } else {
        initSider();
      }
      // i++;

      if (value4.value == 100) {
        initSider();
      }
      // window.setTime = setInterval(() => {
      //   if (value4.value == 100) clearInterval(window.setTime)
      //   if(play){
      //   value4.value = value4.value + speed
      //   // console.log("透明度" + JSON.stringify(value4.value))
      //   if (value4.value == 100) clearInterval(window.setTime)
      //   let duanShu = Math.floor(value4.value / jiangeLength)
      //   currentMap.layer1 = sliderLayerArr.value[duanShu]
      //   currentMap.layer2 = sliderLayerArr.value[duanShu + 1]
      //   console.log("当前图层" + JSON.stringify(currentMap))
      //   let currentOp = (value4.value - jiangeLength * duanShu) * jiange
      //   currentMap.layeropt1 = 100 - currentOp
      //   currentMap.layeropt2 = currentOp
      //   console.log(currentMap);
      //   if (currentMap.layer1) map.setLayer2D(currentMap.layer1.value, 'alpha', currentMap.layeropt1 / 100);
      //   if (currentMap.layer2) map.setLayer2D(currentMap.layer2.value, 'alpha', currentMap.layeropt2 / 100);
      //   console.log("11111", value4.value)
      //   if (value4.value == 100) clearInterval(window.setTime)
      //   }
      // }, 85)
    };

    /**
     * @description 初始化状态
     */
    function initSider() {
      clearInterval(window.intervalId);
      playContro.value = true;
      value4.value = 0;
    }

    // 拖动播放
    function transparency(option, key) {
      // console.log("option" + JSON.stringify(option))
      // console.log("key" + JSON.stringify(key))
      // console.log("jiange" + JSON.stringify(jiange))
      // for (let i = 1; i <= jiange; i++) {
      //   // 定义当前透明度加深
      //   let currentAddOpy = 0
      //   // 定义当前透明度减浅
      //   let currentSubOpy = 0
      //   currentAddOpy = option * jiange - jiangeLength * i
      //   currentSubOpy = 100 - option * jiange
      //   map.setLayer2D(sliderLayerArr.value[i+1].value, 'alpha', currentAddOpy / 100);
      //   map.setLayer2D(sliderLayerArr.value[i].value, 'alpha', currentSubOpy / 100);
      // }
      // // let option1 = option * jiange
      // // let option2 = 100 - option * jiange
      // // map.setLayer2D(sliderLayerArr.value[1].value, 'alpha', option1 / 100);
      // // map.setLayer2D(sliderLayerArr.value[0].value, 'alpha', option2 / 100);
    }

    onBeforeUnmount(() => {
      clearInterval(window.setTime);
      console.log('选择的图层$$$$$$$$', sliderLayerArr.value);
      for (let i = 0; i < sliderLayerArr.value.length; i++) {
        if (!sliderLayerArr.value[i].title) map.showLayer2D(sliderLayerArr.value[i].value, false);
      }
    });

    // // 计算属性
    // let newState = computed(() => {
    //   return JSON.parse(JSON.stringify(sliderLayerArr.value));
    // });

    // //监视属性
    // watch(newState, (newValue, oldValue) => {
    //   // 回调函数形式
    //   // newState = JSON.parse(newState)
    //   console.log('变化后的值是', newValue, '变化前的值是', oldValue);
    //     oldValue.forEach((item) => {
    //       if (!item.title) map.showLayer2D(item.value, false);
    //     })
    //     // newValue.forEach((item) => {
    //     //   if (!item.title) map.showLayer2D(item.value, true);
    //     // })
    //   for (let i = 0; i < newValue.length; i++) {
    //     if (!newValue[i].title) map.showLayer2D(newValue[i].value, true);
    //     if (i >= 1) {
    //       map.setLayer2D(newValue[i].value, 'alpha', 0);
    //     }
    //   }
    // })

    const closeTime = () => {
      emit('showTime', false);
    };

    function checkBoxChange(value) {
      console.log('新选中的值', value);
      handleChange(value);
      // debugger
    }
    return {
      disabled,
      formatter,
      getMapDataList,
      value4,
      marks,
      options,
      handleChange,
      sliderLayerArr,
      playTime,
      transparency,
      closeTime,
      upOrOff,
      searchAction,
      layerList,
      searchPanleShow,
      showContent,

      showLayer,
      layerItemList,
      checkBoxChange,
      playContro,
    };
  },
});
</script>
<style lang="less" scoped>
.timeLine {
  position: fixed;
  top: 757px;
  left: 30%;
  z-index: 3;
  background: rgb(17 132 193 / 50%);
  // left: 510px;
  height: 60px;
  width: 40%;
  padding: 10px;
  display: flex;
  border-radius: 10px;
  // border-style: solid;
  // border-top: ;

  #components-slider-demo-mark .ant-slider-with-marks {
    margin-bottom: 44px;
  }

  .skyDataControlDvie {
    width: 120px;
    // border: 1px solid rgb(4 143 231 / 50%);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;

    .searchInput {
      width: 100px;
      font-size: 14px;
      // height: 40px;
      // padding: 10px;
      // border: none !important;
      // &:focus{
      //   border: none;
      // }
      // &:after{
      //   content: "";
      //   border-left: 2px solid;
      //   border-image: linear-gradient(to top, rgba(87,138,239,0.01),rgb(87 138 239),rgba(87,138,239,0.01)) 1;
      // }
    }

    // /deep/.ant-input-affix-wrapper-focused {
    //   // border: none;
    //   // box-shadow: none;
    // }

    .searchDiv {
      // background: #05537C;
      // background: rgba(5,83,124,0.7);
      border-radius: 50px;
      padding-left: 10px;
      padding-top: 5px;
      cursor: pointer;
      display: flex;
    }

    .searchPanle {
      overflow: auto;
      width: 300px;
      position: absolute;
      top:  -312px;;
      height: 300px;
      // background: rgba(3,26,38,0.86);
      background: rgba(0, 22, 44, 0.7);
      // border-radius: 3px ;
      border-radius: 2px;
      // border: 1px solid rgb(18 66 92);
      border: 1px solid rgba(12, 206, 233, 0.6);
      box-sizing: border-box;

      .itemDiv {
        font-size: 14px;
        padding: 7px 0px;
        padding-left: 40px;

        ::v-deep .ant-checkbox-inner {
          border: 1px #c9d1d9 solid;
        }
      }

      .itemDiv.active {
        color: #26f1fe;
      }

      .layerGroup {
        display: flex;
        align-items: center;
        padding: 7px 0px;

        .layerIcon {
          font-size: 20px;
          padding: 0px 10px;
        }

        .layerTitle {
          font-size: 16px;
        }
      }
    }
  }

  ::v-deep .ant-input-affix-wrapper > input.ant-input {
    padding: 0;
    border: none;
    outline: none;
    width: 80px;
  }

  ::v-deep [data-theme='dark'] .ant-slider-track {
    background-color: #1087ff;
  }

  .playBtu {
    margin-left: 3px;
    margin-top: 3px;
  }

  .sliderWidth {
    width: calc(100% - 120px - 120px);
    margin-left: 30px;
    margin-top: 0px;
  }

  .closeTimeline {
    position: absolute;
    cursor: pointer;
    top: 4px;
    right: 4px;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: 700;
    background: 0 0;
    // z-index: 1;
    // border: 1px red solid;
  }
}
</style>
