<template>
  <div>
    <div class="toolmap">
      <div @click="setClass(0)" @mouseover="getTip('面雨量分布图')" @mouseout="closetip" :class="bkclick[0] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/mianyuliang.png" />
      </div>
      <div @click="setClass(1)" @mouseover="getTip('站点雨量图')" @mouseout="closetip" :class="bkclick[1] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/zhandian.png" />
      </div>
      <div @click="setClass(2)" @mouseover="getTip('分区雨量图')" @mouseout="closetip" :class="bkclick[2] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/fenqu.png" />
      </div>
      <div @click="setClass(3)" @mouseover="getTip('站点温度图')" @mouseout="closetip" :class="bkclick[3] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/wendu.png" />
      </div>
      <div @click="setClass(4)" @mouseover="getTip('站点风速风向图')" @mouseout="closetip" :class="bkclick[4] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/feng.png" />
      </div>
    </div>
    <div class="hover-info" :style="px" v-show="infoShow">
      {{ info }}
    </div>
    <div class="head-span" v-if="headInfoShow">
      <div style="font-size: 24px; font-weight: bold; color: #fff; text-align: center">{{ headInfo }} </div>
      <div
        style="
          color: #ffffff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          margin-top: 9px;
          height: 30px;
          line-height: 30px;
          position: relative;
        "
        v-if="searchID != 3 && searchID != 4"
      >
        <a-date-picker v-model:value="startData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD" :disabled-date="disabledDate" />
        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastDay"> </div>
          <div class="sanjiao-btn2" @click="nextDay"> </div>
        </div>

        <TimePicker v-model:value="startTime" format="H时" valueFormat="HH" :allowClear="false" @change="changeTime" :disabledHours="disabledHour" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastTime"> </div>
          <div class="sanjiao-btn2" @click="nextTime"> </div>
        </div>
        <span style="margin-right: 20px">至</span>

        <a-date-picker v-model:value="endData" :allowClear="false" :disabled-date="disabledDate2" format="MM月DD日" valueFormat="YYYY-MM-DD" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastDay2"> </div>
          <div class="sanjiao-btn2" @click="nextDay2"> </div>
        </div>

        <TimePicker v-model:value="endTime" format="H时" valueFormat="HH" :allowClear="false" :disabledHours="disabledHour2" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastTime2"> </div>
          <div class="sanjiao-btn2" @click="nextTime2"> </div>
        </div>
        <img src="../../assets/images/changeMap/checktime.png" style="display: inline-block" @click="search" />
      </div>
      <div
        style="
          color: #ffffff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          margin-top: 9px;
          height: 30px;
          line-height: 30px;
          position: relative;
        "
        v-if="searchID == 3 || searchID == 4"
      >
        <a-date-picker v-model:value="endData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD" />
        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastDay3"> </div>
          <div class="sanjiao-btn2" @click="nextDay3"> </div>
        </div>

        <TimePicker v-model:value="endTime" format="H时" valueFormat="HH" :allowClear="false" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastTime3"> </div>
          <div class="sanjiao-btn2" @click="nextTime3"> </div>
        </div>
        <img src="../../assets/images/changeMap/checktime.png" style="display: inline-block" @click="search" />
      </div>
    </div>
    <div class="class-legend" v-show="mapLgendShow">
      <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">mm</div>
      <div v-for="item in rainLegendNow" :style="item.style">{{ item.value }}</div>
      <div style="border-radius: 0 0 25px 25px ;background-color: #eaeaea;color: #000;font-size: 12px;">无数据</div>
    </div>
    <div class="class-legendtwo" v-show="mapLgendShow2">
      <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">℃</div>
      <div v-for="item in wdLegendNow" :style="item.style">{{ item.value }}</div>
      <!-- <div style="border-radius: 0 0 25px 25px ;background-color: #3f3dbd;color: #fff;">0</div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { TimePicker } from 'ant-design-vue';
import eventBus from '/@/utils/eventBus';
import { useMapStore } from '/@/store/modules/map';
import { getColorVal, getWdColorVal } from '/@/utils/getcolor.js';

const mapStore = useMapStore();
const emit = defineEmits(['changeMap']);
const bkclick = reactive([false, false, false, false, false]);
const info = ref('');
const infoShow = ref(false);
const px = ref('');
const headInfo = ref('');
const headInfoShow = ref(false);
const mapLgendShow = ref(false);
const mapLgendShow2 = ref(false);

eventBus.on('rainLegend', (e) => {
  let maxcolor= getColorVal(e.max)
  let mincolor= getColorVal(e.min)
  let maxIndex=0
  let minIndex=0
  rainLegend.forEach((i,index)=>{
    if(i.style.split(':')[1]==maxcolor){
      maxIndex=index
    }
    if(i.style.split(':')[1]==mincolor){
      minIndex=index
    }
  })
  // console.log(maxIndex,minIndex,maxcolor,mincolor)
  rainLegendNow.value=rainLegend.slice(minIndex,maxIndex+1)
  rainLegendNow.value.reverse()
    });
eventBus.on('wdLegend', (e) => {
  let maxcolor= getWdColorVal(e.max)
  let mincolor= getWdColorVal(e.min)
  let maxIndex=0
  let minIndex=0
  wdLegend.forEach((i,index)=>{
    if(i.style.split(':')[1]==maxcolor){
      maxIndex=index
    }
    if(i.style.split(':')[1]==mincolor){
      minIndex=index
    }
  })
  console.log(maxIndex,minIndex,maxcolor,mincolor)
  wdLegendNow.value=wdLegend.slice(minIndex,maxIndex+1)
  console.log(wdLegendNow.value,908)
  wdLegendNow.value.reverse()
    });
const rainLegendNow=ref()
const rainLegend = reactive([
{
    style: 'background:#fffdff',
    value: '0~1',
  },
  {
    style: 'background:#a6f28e',
    value: '1~9.9',
  },
  {
    style: 'background:#3db93d',
    value: '10~24.9',
  },
  {
    style: 'background:#61b8ff',
    value: '25~49.9',
  },
  {
    style: 'background:#0000fe',
    value: '50~99.9',
  },
  {
    style: 'background:#fa00fa',
    value: '100~250',
  },
  {
    style: 'background:#810041',
    value: '>250',
  },
]);
const wdLegendNow=ref([])
const wdLegend=reactive([
    {
        "style": "background:#032b8b",
        "value": "<-12"
    },
    {
        "style": "background:#195da7",
        "value": "-12~-8"
    },
    {
        "style": "background:#1d75d4",
        "value": "-8~-4"
    },
    {
        "style": "background:#3f9fe9",
        "value": "-4~0"
    },
    {
        "style": "background:#82d1ff",
        "value": "0~4"
    },
    {
        "style": "background:#abe9f8",
        "value": "4~8"
    },
    {
        "style": "background:#cffcff",
        "value": "8~12"
    },
    {
        "style": "background:#f3fdee",
        "value": "12~16"
    },
    {
        "style": "background:#ccffcc",
        "value": "16~20"
    },
    {
        "style": "background:#bffb91",
        "value": "20~24"
    },
    {
        "style": "background:#fdfb96",
        "value": "24~28"
    },
    {
        "style": "background:#fef2c2",
        "value": "28~32"
    },
    {
        "style": "background:#fecda1",
        "value": "32~35"
    },
    {
        "style": "background:#f99782",
        "value": "35~37"
    },
    {
        "style": "background:#f55900",
        "value": "37~40"
    },
    {
        "style": "background:#e60101",
        "value": ">40"
    }
])

const disabledDate = (current) => {
  return current > moment(endData.value).valueOf();
};
const disabledDate2 = (current) => {
  return current < moment(startData.value).valueOf();
};
const disabledDate3 = (current) => {
  return current > moment().valueOf();
};
const disabledHour = () => {
  if (startData.value == endData.value) {
    let arr = [];
    for (let i = 0; i <= 23; i++) {
      if (i > endTime.value) {
        arr.push(i);
      }
    }
    return arr;
  }
};
const disabledHour2 = () => {
  if (startData.value == endData.value) {
    let arr = [];
    for (let i = 0; i <= 23; i++) {
      if (i < startTime.value) {
        arr.push(i);
      }
    }
    return arr;
  }
};
const disabledHour3 = () => {
  if (moment().format('YYYY-MM-DD') == endData.value) {
    let arr = [];
    for (let i = 0; i <= 23; i++) {
      if (i > moment().format('HH')) {
        arr.push(i);
      }
    }
    return arr;
  }
};
const lastDay = () => {
  startData.value = moment(startData.value).subtract(1, 'days').format('YYYY-MM-DD');
};
const nextDay = () => {
  if (moment(startData.value).format('YYYY-MM-DD').valueOf() < moment(endData.value).format('YYYY-MM-DD').valueOf()) {
    startData.value = moment(startData.value).add(1, 'days').format('YYYY-MM-DD');
  }
};
const lastDay2 = () => {
  if (moment(startData.value).format('YYYY-MM-DD').valueOf() < moment(endData.value).format('YYYY-MM-DD').valueOf()) {
    endData.value = moment(endData.value).subtract(1, 'days').format('YYYY-MM-DD');
  }
};
const nextDay3 = () => {
  // if(moment().format('YYYY-MM-DD').valueOf()!= moment(endData.value).format('YYYY-MM-DD').valueOf()){
  endData.value = moment(endData.value).add(1, 'days').format('YYYY-MM-DD');
  // }
};
const lastDay3 = () => {
  endData.value = moment(endData.value).subtract(1, 'days').format('YYYY-MM-DD');
};
const nextDay2 = () => {
  endData.value = moment(endData.value).add(1, 'days').format('YYYY-MM-DD');
};
const lastTime = () => {
  startTime.value = moment(startData.value + ' ' + startTime.value)
    .subtract(1, 'hours')
    .format('HH');
};
const nextTime = () => {
  if (
    moment(startData.value).format('YYYY-MM-DD').valueOf() == moment(endData.value).format('YYYY-MM-DD').valueOf() &&
    startTime.value == endTime.value
  ) {
  } else {
    startTime.value = moment(startData.value + ' ' + startTime.value)
      .add(1, 'hours')
      .format('HH');
  }
};
const lastTime2 = () => {
  if (
    moment(startData.value).format('YYYY-MM-DD').valueOf() == moment(endData.value).format('YYYY-MM-DD').valueOf() &&
    startTime.value == endTime.value
  ) {
  } else {
    endTime.value = moment(endData.value + ' ' + endTime.value)
      .subtract(1, 'hours')
      .format('HH');
  }
};
const nextTime2 = () => {
  endTime.value = moment(endData.value + ' ' + endTime.value)
    .add(1, 'hours')
    .format('HH');
};
const lastTime3 = () => {
  endTime.value = moment(endData.value + ' ' + endTime.value)
    .subtract(1, 'hours')
    .format('HH');
};
const nextTime3 = () => {
  // if( moment().format('YYYY-MM-DD').valueOf()== moment(endData.value).format('YYYY-MM-DD').valueOf()
  // &&moment().format('HH')== endTime.value){
  // }else{
  endTime.value = moment(endData.value + ' ' + endTime.value)
    .add(1, 'hours')
    .format('HH');
  // }
};

const startData = ref(moment().format('YYYY-MM-DD'));
const startTime = ref('08');
const endData = ref(moment().format('YYYY-MM-DD'));
const endTime = ref(moment().format('HH'));

const search = () => {
  // console.log(startData.value,startTime.value,endData.value,endTime.value,89)
  emit('changeMap', {
    flag: bkclick[searchID.value],
    maptype: searchID.value,
    start_time: startData.value + ' ' + startTime.value + ':00:00',
    end_time: endData.value + ' ' + endTime.value + ':00:00',
  });
};

onMounted(() => {
  // startData.value = moment().format('MM-DD')
  // endData.value = moment().format('MM-DD')
  // endTime.value=moment().format('hh')
  // console.log(endTime.value,)
});

const changeTime = (i) => {
  console.log(i, 7);
};
const searchID = ref();

const setClass = (i) => {

  // 初始时间
  startData.value = moment().format('YYYY-MM-DD');
  startTime.value = '08';
  endData.value = moment().format('YYYY-MM-DD');
  endTime.value = moment().format('HH');

  searchID.value = i;
  bkclick.forEach((item, index) => {
    if (i === index) {
      bkclick[i] = !bkclick[i];
    } else {
      bkclick[index] = false;
    }
  });
  if(i==0||i==1||i==2){
    mapLgendShow.value=true
    mapLgendShow2.value=false
  if(bkclick[i]){
    mapLgendShow.value=true
  }else{
    mapLgendShow.value=false
  }}else if(i==3){
    mapLgendShow.value=false
    mapLgendShow2.value=true
    if(bkclick[i]){
    mapLgendShow2.value=true
  }else{
    mapLgendShow.value=false
    mapLgendShow2.value=false
  }
  }else{
    mapLgendShow.value=false
    mapLgendShow2.value=false
  }
  // eventBus.emit('legendColor', { maptype: searchID.value, flag: bkclick[searchID.value] });
  emit('changeMap', {
    flag: bkclick[searchID.value],
    maptype: searchID.value,
    start_time: startData.value + ' ' + startTime.value + ':00:00',
    end_time: endData.value + ' ' + endTime.value + ':00:00',
  });

  if (i == 0) {
    headInfo.value = '面雨量分布图';
  } else if (i == 1) {
    headInfo.value = '站点雨量图';
  } else if (i == 2) {
    headInfo.value = '分区雨量图';
  } else if (i == 3) {
    headInfo.value = '站点温度图';
  } else if (i == 4) {
    headInfo.value = '站点风速风向图';
  }
  if (bkclick.includes(true)) {
    headInfoShow.value = true;
  } else {
    headInfoShow.value = false;
  }
};
const getTip = (i) => {
  info.value = i;
  infoShow.value = true;
  if (mapStore.sideMenu) {
    if (i == '面雨量分布图') {
    px.value = ' right: 500px;top: 370px;';
  } else if (i == '站点雨量图') {
    px.value = ' right: 500px;top: 400px;';
  } else if (i == '分区雨量图') {
    px.value = ' right: 500px;top: 420px;';
  } else if (i == '站点温度图') {
    px.value = ' right: 500px;top: 450px;';
  } else if (i == '站点风速风向图') {
    px.value = ' right: 500px;top: 480px;';
  }
  }else{
    if (i == '面雨量分布图') {
    px.value = ' right: 70px;top: 370px;';
  } else if (i == '站点雨量图') {
    px.value = ' right: 70px;top: 400px;';
  } else if (i == '分区雨量图') {
    px.value = ' right: 70px;top: 420px;';
  } else if (i == '站点温度图') {
    px.value = ' right: 70px;top: 450px;';
  } else if (i == '站点风速风向图') {
    px.value = ' right: 70px;top: 480px;';
  }
  }

};
const closetip = () => {
  infoShow.value = false;
};
</script>
<style lang="less" scoped>
.toolmap {
  position: absolute;
  right: 450px;
  top: 370px;
  width: 36px;
  height: 140px;
  border-radius: 149px;
  opacity: 1;
  z-index: 10;

  /* 工具栏背景色 */
  background: rgba(10, 80, 110, 0.9);
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  div {
    width: 100%;
    text-align: center;
    img {
      display: inline-block;
      width: 20px;
      height: 20px;
    }
  }
  .line {
    width: 20px;
    height: 1px;
    transform: rotate(0deg);
    opacity: 1;

    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(42, 207, 240, 0) 0%, #27ceef 52%, rgba(49, 209, 240, 0) 100%);
  }
}
.divclick {
  background: #103357;
}
.hover-info {
  position: absolute;
  width: 120px;
  height: 30px;
  line-height: 30px;
  border-radius: 473px;
  opacity: 1;

  background: rgba(21, 50, 76, 0.7);
  font-family: Source Han Sans CN;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0em;

  color: #ffffff;
  z-index: 11;
}
.head-span {
  width: 427px;
  height: 92px;
  border-radius: 8px;
  opacity: 1;

  background: rgba(21, 50, 76, 0.7);
  position: absolute;
  top: 100px;
  right: 50%;
  transform: translateX(50%);
  z-index: 11;
  padding: 6px 10px;
  box-sizing: border-box;
}
.sanjiao-box {
  display: inline-block;
  height: 20px;
  margin-right: 15px;
  margin-left: 4px;
  .sanjiao-btn {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
    margin-top: 5px;

    cursor: pointer;
  }
  .sanjiao-btn2 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }
}
:deep(.ant-input) {
  padding: 0;
  border: none;
  width: 70px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}
:deep(.ant-time-picker) {
  padding: 0;
  border: none;
  width: 35px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}
:deep(.ant-time-picker-input.ant-input) {
  width: 35px !important;
}
:deep(.ant-time-picker-icon) {
  visibility: hidden;
}
.class-legend {
  position: absolute;
  left: 470px;
  bottom: 50px;
  z-index: 10;
  box-shadow: 5px rgba(53, 53, 52, 0.5);
  div {
    min-width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #222;
  }
}
.class-legendtwo {
  position: absolute;
  left: 470px;
  bottom: 50px;
  z-index: 10;
  box-shadow: 5px rgba(53, 53, 52, 0.5);
  div {
    min-width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #222;
  }
  &>div:last-child{
    border-radius:0 0 25px 25px;
  }
}
</style>
