<template>
  <div class="tabs">
    <div :class="{'active': currentTab === 'MWR'}" class="tab-item"
         @click="onTabClick('MWR')">
      质控对比
      <img v-if="currentTab === 'MWR'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'boundary-layer-height'}" class="tab-item"
         @click="onTabClick('boundary-layer-height')">
      水汽
      <img v-if="currentTab === 'boundary-layer-height'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'optical-property'}" class="tab-item"
         @click="onTabClick('optical-property')">
      光学特性
      <img v-if="currentTab === 'optical-property'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'aerosol-product'}" class="tab-item"
         @click="onTabClick('aerosol-product')">
      气溶胶产品
      <img v-if="currentTab === 'aerosol-product'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'BingoCloud'}" class="tab-item" @click="onTabClick('BingoCloud')">
      云产品
      <img v-if="currentTab === 'BingoCloud'" src="/images/line.png"/>
    </div>
  </div>

  <div class="main">
    <div class="menu panel">
      <div class="menu-item">
        <h2 class="tip">区域选择</h2>
        <el-row :gutter="12">
          <el-col :span="8"><span @click="onRegionClick('jn')"
                                  :class="{'active': currentRegion === 'jn'}">江宁</span></el-col>
          <el-col :span="8"><span @click="onRegionClick('lh')"
                                  :class="{'active': currentRegion === 'lh'}">六合</span></el-col>
          <el-col :span="8"><span @click="onRegionClick('pk')"
                                  :class="{'active': currentRegion === 'pk'}">浦口</span></el-col>
        </el-row>
      </div>

      <div class="menu-item">
        <h2 class="tip">要素选择</h2>
        <el-row :gutter="12">
          <el-col :span="24" v-for="(item, index) in elementData" :key='index'>
                    <span @click="onElementClick(item.value)"
                          :class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
        </el-row>
      </div>
    </div>

    <div class="container panel">
      <div class="toolbar day-toolbar" v-if="currentElement === 'extinction' || currentElement === 'singleWatervapor' || currentElement === 'aod-icot-wcot'
        || currentElement === 'extinctionOptics' || currentElement === 'backscatter'
        || currentElement === 'pm2_5' || currentElement === 'pblh'
        || currentElement === 'cloudSol' || currentElement === 'cloudbaseheight'
        || currentElement === 'cloudtopheight'">
        <div class="times">
          <div class="time-item" v-for="(time, index) in times" :key="index"
               :class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}">
            <span class="hour">{{ time.day }}</span>
            <span class="time" @click="onTimeClick(time, index)">{{ time.hour }}</span>
          </div>
        </div>
        <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
                        class="date-picker" @change="onChange">
        </el-date-picker>
        <div class="control-btn">
          <span @click="onPrevDayClick"><img src="/images/prev.png"/></span>
          <span @click="onNextDayClick"><img src="/images/next.png"/></span>
        </div>
        
        <div class="refresh" @click="onRefreshPageHandlerClick"></div>

      </div>

      <div class="toolbar day-toolbar" v-if="currentElement === 'lidarratio' || currentElement === 'watervapor'">
        <div class="times">
          <div class="time-item" v-for="(time, index) in times" :key="index"
               :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
            <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
            <span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
          </div>
        </div>

        <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
                        class="date-picker" @change="onChange">
        </el-date-picker>
        <div class="control-btn">
          <span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
          <span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
        </div>
      </div>

      <div class="picture-view">
        <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
          <div class="picture">
            <div v-loading="loadingWaterVaporSingleStatus"
                 style="width: 100%;height: 100%"
                 class= 'loadingStatus'
                 element-loading-text="加载中">
              <canvas id='watervapor_single_chart'></canvas>
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'">
          <div class="picture">
            <div id="opticalThickness"
                 style="margin-top: 66px"
                 v-loading="loadingOpticalThicknessStatus"
                 custom-class="loading"
                 element-loading-text="加载中">
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'extinctionOptics'">
          <div class="picture special-picture">
            <div v-loading="loadingExtinctionOpticsStatus"
                 style="width: 100%;height: 100%"
                 class= 'loadingStatus'
                 element-loading-text="加载中">
              <canvas id='extinction_optics_chart'></canvas>
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'backscatter'">
          <div class="picture special-picture">
            <div v-loading="loadingBackscatterStatus"
                 style="width: 100%;"
                 class= 'loadingStatus'
                 element-loading-text="加载中">
              <canvas id='backscatter_chart'></canvas>
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'pm2_5'">
          <div class="picture special-picture">
            <div v-loading="loadingPmStatus"
                 style="width: 100%;"
                 custom-class="loading"
                 element-loading-text="加载中">
              <canvas id='pm2_5_chart'></canvas>

            </div>
          </div>
          <div class="picture special-picture">
            <div v-loading="loadingPm10Status"
                 style="width: 100%;"
                 custom-class="loading"
                 element-loading-text="加载中">
              <canvas id='pm10_chart'></canvas>
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
          <div class="picture">
            <div id="BoundaryLayerHeight"
                 style="margin-top: 66px"
                 v-loading="loadingBoundaryLayerHeightStatus"
                 custom-class="loading"
                 element-loading-text="加载中"></div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
          <div class="picture">
            <div id="LidarRatio"
                 style="margin-top: 66px"
                 v-loading="loadingLidarRatioStatus"
                 custom-class="loading"
                 element-loading-text="加载中">
            </div>
          </div>
        </div>


        <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudSol'">
          <div class="picture special-picture">
            <div v-loading="loadingCloudSolStatus"
                 style="width: 100%;"
                 class= 'loadingStatus'
                 element-loading-text="加载中">
              <canvas id='cloud_sol_chart'></canvas>
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'">
          <div class="picture special-picture">
            <div id="cloudsHeight"
                 style="margin-top: 66px"
                 v-loading="loadingCloudsHeightStatus"
                 custom-class="loading"
                 element-loading-text="加载中"></div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'">
          <div class="picture special-picture">
            <div id="cloudTopHeight"
                 style="margin-top: 66px"
                 v-loading="loadingCloudTopHeightStatus"
                 custom-class="loading"
                 element-loading-text="加载中"></div>
          </div>
        </div>


        <!--        <div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'">-->
        <!--          <div class="picture special-picture">-->
        <!--&lt;!&ndash;            <h2 class="title">云的识别</h2>&ndash;&gt;-->
        <!--            <div v-loading="loadingCloudRecognitionStatus"-->
        <!--                 style="width: 100%;"-->
        <!--                 custom-class="loading"-->
        <!--                 element-loading-text="加载中">-->
        <!--              <canvas id='cloud_recognition_chart'></canvas>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->

        <div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
          <div class="picture special-picture">
            <h2 class="title">质控前</h2>
            <div v-loading="loadingExtinctionBeforeStatus"
                 style="width: 100%;"
                 custom-class="loading"
                 element-loading-text="加载中">
              <canvas id='extinction_chart-before'></canvas>
            </div>
          </div>
          <div class="picture special-picture">
            <h2 class="title">质控后</h2>
            <div v-loading="loadingExtinctionStatus"
                 style="width: 100%;"
                 custom-class="loading"
                 element-loading-text="加载中">
              <canvas id='extinction_chart-after'></canvas>
            </div>
          </div>
        </div>

        <div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'">
          <div class="picture special-picture">
            <h2 class="title" style="left: 3.3rem">质控前</h2>
            <div v-loading="loadingWatervaporBeforeStatus"
                 style="width: 100%"
                 element-loading-text="加载中">
              <canvas id='watervapor_chart-before'></canvas>
            </div>
          </div>
          <div class="picture special-picture">
            <h2 class="title">质控后</h2>
            <div v-loading="loadingWaterVaporStatus"
                 style="width: 100%"
                 element-loading-text="加载中">
              <canvas id='watervapor_chart-after'></canvas>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import {onMounted, reactive, toRefs, watch} from 'vue';
import moment from "moment";
import {post} from '../uilts/axios';
import {ElMessage} from "element-plus";
import {ConstantRamanLidar} from "../model/constant";
import {get} from '../uilts/axios';
import {HighChartCreate} from "../model/high-chart-create";
import {CustomeArray} from "../model/custome-array"
import {CoordinateScale, HeatMapDrawer} from "../model/heat-map-drawer";
import {Box, ColorChart, createEmptyCanvas} from '../uilts/box-drawer';
import axiosStore from '../uilts/AxiosStore';

export default {
  name: 'RamanLidar',
  setup() {
    let timer = null;
    const quailtyTimes = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13",
      "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];

    let creates: {
      boundaryLayerHeight: HighChartCreate
      cloudsHeight: HighChartCreate
      cloudTopHeight: HighChartCreate
      LidarRatio: HighChartCreate,
      opticalThickness: HighChartCreate,
      cloudRecognitionDrawer: HeatMapDrawer,
      extinctionBeforeDrawer: HeatMapDrawer,
      extinctionDrawer: HeatMapDrawer,
      watervaporDrawer: HeatMapDrawer,
      watervaporBeforeDrawer: HeatMapDrawer,
      opticsExtinctionDrawer: HeatMapDrawer,
      singleWatervaporDrawer: HeatMapDrawer,
      cloudSolDrawer: HeatMapDrawer,
      pm2Point5Drawer: HeatMapDrawer,
      pm10Drawer: HeatMapDrawer,
      backscatterDrawer: HeatMapDrawer,
    } = {
      boundaryLayerHeight: null,
      cloudsHeight: null,
      cloudTopHeight: null,
      LidarRatio: null,
      opticalThickness: null,
      cloudRecognitionDrawer: null,
      extinctionDrawer: null,
      extinctionBeforeDrawer: null,
      watervaporDrawer: null,
      watervaporBeforeDrawer: null,
      singleWatervaporDrawer: null,
      opticsExtinctionDrawer: null,
      cloudSolDrawer: null,
      pm2Point5Drawer: null,
      pm10Drawer: null,
      backscatterDrawer: null
    }
    let options = reactive({
      currentTab: 'MWR',
      currentRegion: 'jn',
      // currentElement: 'PBLH',
      currentType: '边界层高度',
      // date: moment('2022-04-01 12:00:00').format('YYYY-MM-DD HH:mm:ss'),
      date: moment().format('YYYY-MM-DD 00:00:00'),
      times: [],
      currentTime: null,
      downloadImgUrl: '/images/default-picture.png',
      imgUrl: '/images/default-picture.png',
      signalPBLHImgUrl: '/images/default-picture.png',
      previewUrl: [],
      signalPBLHPreviewUrl: [],
      isPlay: false,
      title: null,
      index: 0,
      downloadSrc: null,
      urls: [],
      boundaryLayerHeightList: [],
      LidarRatioList: [],
      cloudsHeightList: [],
      cloudTopHeightList: [],
      loadingWaterVaporSingleStatus: false,
      loadingExtinctionOpticsStatus: false,
      loadingPmStatus: false,
      loadingPm10Status: false,
      loadingCloudSolStatus: false,
      loadingCloudRecognitionStatus: false,
      loadingExtinctionStatus: false,
      loadingExtinctionBeforeStatus: false,
      loadingWatervaporBeforeStatus: false,
      loadingWaterVaporStatus: false,
      loadingBackscatterStatus: false,
      loadingLidarRatioStatus: false,
      loadingBoundaryLayerHeightStatus: false,
      loadingCloudsHeightStatus: false,
      loadingCloudTopHeightStatus: false,
      loadingOpticalThicknessStatus: false,
      currentHour: 0,
      timeArray: [],
      chartsData: [],
      chartTimeData: [],
      elementData: [
        {
          value: 'layertype',
          label: '云的识别'
        },
        {
          value: 'extinction',
          label: '消光系数'
        },
        {
          value: 'watervapor',
          label: '水汽'
        }],
      currentElement: 'layertype',
      timeLineFormat: 'day'
    })

    onMounted(() => {
      initTimeLine(true);
      setTimeout(() => {
        initEcharts(options.currentTab)
        reloadChangeData();
      }, 50);
    })

    //边界层高度
    const boundaryLayerHeightInit = () => {
      creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
      creates.boundaryLayerHeight.setChart(false, 'line', 1500, 600);
      creates.boundaryLayerHeight.setXAxisTypeDate();
      creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)');
      creates.boundaryLayerHeight.setLegend();
      creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
      creates.boundaryLayerHeight.setSeries('边界层高度', 0, null, null, '#3636FF')
      creates.boundaryLayerHeight.init();
    }

    //云层高度
    const cloudsHeightInit = () => {
      creates.cloudsHeight = new HighChartCreate('cloudsHeight');
      creates.cloudsHeight.setChart(false, 'scatter', 1500, 600);
      creates.cloudsHeight.setXAxisTypeDate();
      creates.cloudsHeight.setSpecialYAxis('高度(m)');
      creates.cloudsHeight.setLegend();
      creates.cloudsHeight.setTooltip('高度: {point.y}');
      creates.cloudsHeight.setSeries('云层高度')
      creates.cloudsHeight.init();
    }

    //云顶高度
    const cloudTopHeightInit = () => {
      creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
      creates.cloudTopHeight.setChart(false, 'scatter', 1500, 600);
      // creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
      creates.cloudTopHeight.setXAxisTypeDate();
      creates.cloudTopHeight.setSpecialYAxis('高度(m)');
      creates.cloudTopHeight.setLegend();
      creates.cloudTopHeight.setTooltip('高度: {point.y}');
      creates.cloudTopHeight.setSeries('云顶高度')
      creates.cloudTopHeight.init();
    }

    //激光雷达比
    const LidarRatioInit = () => {
      creates.LidarRatio = new HighChartCreate('LidarRatio');
      creates.LidarRatio.setChart(false, 'line', 1500, 600);
      creates.LidarRatio.setSpecialXAxis('激光雷达比(单位立体角)', 120, 0, 20);
      creates.LidarRatio.setSpecialYAxis('高度(m)');
      creates.LidarRatio.setLegend();
      creates.LidarRatio.setTooltip('高度: {point.y}');
      creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
      creates.LidarRatio.init();
    }

    //光学厚度
    const opticalThicknessInit = () => {
      creates.opticalThickness = new HighChartCreate('opticalThickness');
      creates.opticalThickness.setChart(false, 'line', 1500, 600);
      creates.opticalThickness.setXAxisTypeDate();
      creates.opticalThickness.setSpecialYAxis('光学厚度');
      creates.opticalThickness.setLegend(true);
      creates.opticalThickness.setTooltip('{point.y}');
      creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
      creates.opticalThickness.setSeries('冰云', 0, null, null, '#5050FD')
      creates.opticalThickness.setSeries('水云', 0, null, null, '#58FE5F')
      creates.opticalThickness.init();
    }

    const onTabClick = (name) => {
      setAndChangeCurrentTime(name);
      options.currentTab = name;
      initEcharts(name)
      reloadChangeData()
    }

    const setAndChangeCurrentTime = (name) => {
      options.index = 23;
      if ("MWR" === name) {
        options.date = moment().format('YYYY-MM-DD 00:00:00');
        options.timeLineFormat = "";
      } else {
        options.date = moment().format('YYYY-MM-DD HH:00:00');
        options.timeLineFormat = "";
      }

      options.currentTime = options.date;
    }

    const reloadChangeData = () => {
      cancelRequest();
      onMenuChange()
      elementChange(options.currentElement)
    }

    const onMenuChange = () => {
      options.elementData = []
      if (options.currentTab === 'boundary-layer-height') {
        options.currentElement = 'singleWatervapor'
        options.elementData = [
          {
            value: 'singleWatervapor',
            label: '水汽'
          }]

      } else if (options.currentTab === 'optical-property') {
        options.currentElement = 'aod-icot-wcot'
        options.elementData = [
          {
            value: 'aod-icot-wcot',
            label: '光学厚度'
          },
          {
            value: 'extinctionOptics',
            label: '消光系数'
          },
          {
            value: 'backscatter',
            label: '消光后的后向散射系数'
          }]

      } else if (options.currentTab === 'aerosol-product') {
        options.currentElement = 'pm2_5'
        options.elementData = [
          {
            value: 'pm2_5',
            label: '气溶胶浓度'
          },
          {
            value: 'pblh',
            label: '边界层高度'
          },
          {
            value: 'lidarratio',
            label: '激光雷达比'
          }]
      } else if (options.currentTab === 'BingoCloud') {
        options.currentElement = 'cloudSol'
        options.elementData = [
          {
            value: 'cloudSol',
            label: '云气溶胶分类'
          },
          {
            value: 'cloudbaseheight',
            label: '云底高度'
          },
          {
            value: 'cloudtopheight',
            label: '云顶高度'
          }]
      } else if (options.currentTab === 'MWR') {
        options.currentElement = 'extinction'
        options.elementData = [
          {
            value: 'extinction',
            label: '消光系数'
          },
          {
            value: 'watervapor',
            label: '水汽'
          }]
      }
    }

    const elementChange = (code: string) => {
      switch (code) {
        case 'singleWatervapor' :
          initTimeLine()
          reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
          break;
        case 'aod-icot-wcot' :
          initTimeLine()
          reloadChartsRecognition('aod', drawAerosolCharts);
          reloadChartsRecognition('icot', drawIceCloudsCharts);
          reloadChartsRecognition('wcot', drawWaterCloud);
          break;
        case 'extinctionOptics' :
          initTimeLine()
          reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
          break;
        case 'backscatter' :
          initTimeLine()
          reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
          break;
        case 'pm2_5' :
          initTimeLine();
          reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
          reloadCloudRecognition('pm10', 201, 'pm10', drawPm10);
          break;
        case 'pblh' :
          initTimeLine();
          reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
          break;
        case 'lidarratio' :
          initTimeLineDay()
          reloadChartLidarratio('lidarratio', drawLidarRatioCharts);
          break;
        case 'cloudSol' :
          initTimeLine()
          reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
          break;
        case 'cloudbaseheight' :
          initTimeLine()
          reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
          break;
        case 'cloudtopheight' :
          initTimeLine()
          reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
          break;
          // case 'layertype' :
          //   reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
          //   break;
        case 'extinction' :
          initTimeLine(true);
          reloadExtinctionBefore();
          reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12);
          break;
        case 'watervapor' :
          initTimeLineDay()
          reloadWatervaporBefore();
          reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter,true);
          break;
        default:
          throw new Error("无效的type类型");
      }
    }

    const reloadWatervaporBefore = () => {
      options.loadingWatervaporBeforeStatus = true;
      let params = {
        date: moment(options.date).format('YYYY-MM-DD 00'),
        var: 'Vapor Mixing Ratio',
        locate: options.currentRegion
      }
      post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
        options.loadingWatervaporBeforeStatus = false;
        if (response.error != 0) {
          createEmptyCanvas('watervapor_chart-before', 810, 650);
          console.log("未找到质控前数据文件");
          return;
        }

        if (creates.watervaporBeforeDrawer != null) {
          creates.watervaporBeforeDrawer.close();
        }

        let matrix = convertValueToBox(response.data);
        creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg');
        creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
        creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
        creates.watervaporBeforeDrawer.draw();
      })
    }

    const reloadExtinctionBefore = () => {
      let view = document.querySelector('.picture-view');
      let width = view.clientWidth / 2;
      let heigth = view.clientHeight - 102;
      
      options.loadingExtinctionBeforeStatus = true;
      let params = {
        date: moment(options.date).format('YYYY-MM-DD HH'),
        var: 'MEXT',
        locate: options.currentRegion
      }
      post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
        options.loadingExtinctionBeforeStatus = false;
        if (response.error != 0) {
          createEmptyCanvas('extinction_chart-before', width, heigth);
          console.log("未找到质控前数据文件");
          return;
        }

        if (creates.extinctionBeforeDrawer != null) {
          creates.extinctionBeforeDrawer.close();
        }

        let matrix = convertValueToBox(response.data);
        creates.extinctionBeforeDrawer = new HeatMapDrawer(width, heigth, matrix, "extinction_chart-before", '/km');
        creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
        creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
        creates.extinctionBeforeDrawer.draw();
      })
    }

    const convertValueToBox = (data) => {
      let timeMoment = moment(options.date).set('h', 1).add(-1, 'd');
      if (options.currentElement === 'extinction') {
        timeMoment.add(12, 'h');
      }
      else timeMoment.add(-1, 'h');
      let timeFormat = timeMoment.format("MM月DD日HH时");
      let boxes = new Array<Array<Box>>();
      let index = 1;
      data.forEach(r => {
        if (index % 11 == 0) {
          timeMoment.add(1, 'h');
          timeFormat = timeMoment.format("MM月DD日HH时");
        }

        let rows = new Array<Box>(r.length);
        for (let h = 0, len = r.length; h < len; h++) {
          rows[h] = new Box(index - 1, h, 0, 0, parseFloat(r[h]), h * 15, timeFormat, "米");
        }
        index++;
        boxes.push(rows);
      })
      return boxes;
    }

    const preprocessing = (type: string) => {
      switch (type) {
        case 'layertype':
          options.loadingCloudRecognitionStatus = true;
          clearHeatMapDrawer(creates.cloudRecognitionDrawer);
          break;
        case 'extinction':
          options.loadingExtinctionStatus = true;
          clearHeatMapDrawer(creates.extinctionDrawer);
          break;
        case 'watervapor':
          options.loadingWaterVaporStatus = true;
          clearHeatMapDrawer(creates.watervaporDrawer);
          break;
        case 'cloudSol':
          options.loadingCloudSolStatus = true;
          clearHeatMapDrawer(creates.cloudSolDrawer);
          break;
        case 'pm2_5':
          options.loadingPmStatus = true;
          clearHeatMapDrawer(creates.pm2Point5Drawer);
          break;
        case 'pm10':
          options.loadingPm10Status = true;
          clearHeatMapDrawer(creates.pm10Drawer);
          break;
        case 'extinctionOptics':
          options.loadingExtinctionOpticsStatus = true;
          clearHeatMapDrawer(creates.opticsExtinctionDrawer);
          break;
        case 'singleWatervapor':
          options.loadingWaterVaporSingleStatus = true;
          clearHeatMapDrawer(creates.singleWatervaporDrawer);
          break;
        case 'backscatter':
          options.loadingBackscatterStatus = true;
          clearHeatMapDrawer(creates.backscatterDrawer);
          break;
        default:
          throw new Error("无效的type类型");
      }
    }

    const preprocessingCharts = (type: string) => {
      switch (type) {
        case 'lidarratio':
          options.loadingLidarRatioStatus = true;
          break;
        case 'pblh':
          options.loadingBoundaryLayerHeightStatus = true;
          break;
        case 'cloudbaseheight':
          options.loadingCloudsHeightStatus = true;
          break;
        case 'cloudtopheight':
          options.loadingCloudTopHeightStatus = true;
          break;
        case 'aod':
          options.loadingOpticalThicknessStatus = true;
          break;
        case 'icot':
          options.loadingOpticalThicknessStatus = true;
          break;
        case 'wcot':
          options.loadingOpticalThicknessStatus = true;
          break;
        default:
          throw new Error("无效的type类型");
      }
    }

    const clearHeatMapDrawer = (drawer: HeatMapDrawer) => {
      if (drawer == null) return;
      drawer.close();
      drawer = null;
    }
    const cancelRequest = () => {
      axiosStore._axiosPromiseCancel.forEach(e => {
        e && e()
      });

      axiosStore._axiosPromiseCancel = [];
    }

    const drawBackscatter = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      options.loadingBackscatterStatus = false;
      if (creates.backscatterDrawer != null) {
        creates.backscatterDrawer.close();
      }

      let matrix = converCloudRecognition(801, result, 'backscatter');
      creates.backscatterDrawer = new HeatMapDrawer(1400, 700, matrix, "backscatter_chart", '/km/sr');
      creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
      creates.backscatterDrawer.setColorChart(prepareBackscatterColors());
      creates.backscatterDrawer.draw();
    }

    const prepareBackscatterColors = () => {
      // let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
      //       '#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
      //     // [-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
      //         [0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001, 0.0008, 0.0006, 0.0004, 0.0002, 0.0001, 0.00008, 0.00006, 0.00004, 0.00002, 0.00001]
      // );
      let colorChart = new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
            '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
          [0.1, 0.08, 0.06, 0.04, 0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001, 0.0008, 0.0006, 0.0004, 0.0002, 0.0001, 0.00008, 0.00006, 0.00004, 0.00002, 0.00001],
          true,
          true
      );
      colorChart.setDefaultColors('#0D1485', '#8F0000');
      return colorChart;
    }

    const drawPm2Point5 = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      options.loadingPmStatus = false;
      if (creates.pm2Point5Drawer != null) {
        creates.pm2Point5Drawer.close();
      }
      let matrix = converCloudRecognition(201, result, 'pm2_5');
      creates.pm2Point5Drawer = new HeatMapDrawer(810, 700, matrix, "pm2_5_chart", 'μg/m³', 'PM2.5');
      creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
      creates.pm2Point5Drawer.setColorChart(preparePmColors());
      creates.pm2Point5Drawer.draw();
    }

    const drawPm10 = (result: CustomeArray<any>) => {
      if (result.length != 24) return;

      options.loadingPm10Status = false;
      if (creates.pm10Drawer != null) {
        creates.pm10Drawer.close();
      }

      let matrix = converCloudRecognition(201, result, 'pm10');
      creates.pm10Drawer = new HeatMapDrawer(810, 700, matrix, "pm10_chart", 'μg/m³', 'PM10');
      creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
      creates.pm10Drawer.setColorChart(preparePmColors());
      creates.pm10Drawer.draw();
    }

    const drawBoundaryLayerCharts = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.boundaryLayerHeight.updateSeries(0, data)
      options.loadingBoundaryLayerHeightStatus = false
    }

    const drawLidarRatioCharts = (result: CustomeArray<any>) => {
      if (result.length == 0) return;
      const data = LidarRatioPrepareChartData(result);
      creates.LidarRatio.updateSeries(0, data);
      options.loadingLidarRatioStatus = false
    }

    const drawAerosolCharts = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.opticalThickness.updateSeries(0, data);
      // options.loadingOpticalThicknessStatus = false
    }

    const drawIceCloudsCharts = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.opticalThickness.updateSeries(1, data)
      // options.loadingOpticalThicknessStatus = false
    }

    const drawWaterCloud = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.opticalThickness.updateSeries(2, data)
      options.loadingOpticalThicknessStatus = false
    }


    const drawCloudTopHeightCharts = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.cloudTopHeight.updateSeries(0, data)
      options.loadingCloudTopHeightStatus = false
    }

    const drawCloudsHeightCharts = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.cloudsHeight.updateSeries(0, data)
      options.loadingCloudsHeightStatus = false
    }

    const prepareChartData = (result) => {
      let prepareData = []
      options.chartTimeData = [];
      result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
      result.forEach(item => {
        if (item.data == null) {
          let temp = [];
          for (let i = 0; i < 11; i++) {
            temp.push(NaN);
          }
          item.data = [temp];
        }
        for (let i in item.data[0]) {
          prepareData.push(item.data[0][i])
        }
      })
      let interval = (24 / prepareData.length);
      let data = [];
      let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h').add(-30, 'm');
      for (let i = 0, len = prepareData.length; i < len; i++) {
        data.push([startTimeMoment.clone().add(interval * i, 'h').valueOf(), prepareData[i]]);
      }
      return data;
    }

    const LidarRatioPrepareChartData = (result) => {
      let prepareData = []
      if (result[0].data == null) return;
      result[0].data.forEach((item) => {
        item.forEach((item, index) => {
          if (item == null) return;
          prepareData.push([item, index * 15])
        })
      })
      return prepareData;
    }

    const preparePmColors = () => {
      return new ColorChart(['#F6EF20', '#FEC338', '#C5C22A', '#72CD64', '#31C69F', '#01B8CA', '#259BE8', '#327CFC', '#4853F4', '#422EC1'],
          [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0], true, true
      );
    }

    const drawCloudSol = (result: CustomeArray<any>) => {
      if (result.length != 24) return;

      options.loadingCloudSolStatus = false;
      if (creates.cloudSolDrawer != null) {
        creates.cloudSolDrawer.close();
      }

      let matrix = converCloudRecognition(801, result, 'cloudSol');
      creates.cloudSolDrawer = new HeatMapDrawer(1400, 700, matrix, "cloud_sol_chart");
      creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
      creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors());
      creates.cloudSolDrawer.draw();
    }

    const drawOpticsExtinction = (result: CustomeArray<any>) => {
      if (result.length != 24) return;

      options.loadingExtinctionOpticsStatus = false;
      if (creates.opticsExtinctionDrawer != null) {
        creates.opticsExtinctionDrawer.close();
      }
      let matrix = converCloudRecognition(801, result, 'extinctionOptics');
      creates.opticsExtinctionDrawer = new HeatMapDrawer(1400, 700, matrix, "extinction_optics_chart", '/km');
      creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
      creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors());
      creates.opticsExtinctionDrawer.draw();

    }

    const drawSingleWatervapor = (result: CustomeArray<any>) => {
      if (result.length != 24) return;

      options.loadingWaterVaporSingleStatus = false;
      if (creates.singleWatervaporDrawer != null) {
        creates.singleWatervaporDrawer.close();
      }

      let matrix = converCloudRecognition(101, result, 'singleWatervapor');
      creates.singleWatervaporDrawer = new HeatMapDrawer(1400, 700, matrix, "watervapor_single_chart", ' g/kg');
      creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
      creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors());
      creates.singleWatervaporDrawer.draw();
    }

    const drawWatervaporAfter = (result: CustomeArray<any>) => {
      if (result.length != 24) return;

      options.loadingWaterVaporStatus = false;
      if (creates.watervaporDrawer != null) {
        creates.watervaporDrawer.close();
      }

      let matrix = converCloudRecognition(101, result, 'watervapor');
      creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg');
      creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
      creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
      creates.watervaporDrawer.draw();
    }

    const prepareWatervaporColors = () => {
      return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
            '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
          [30, 28, 26, 24, 22, 20, 18, 16, 14, 12, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], true, true
      );
    }

    const drawExtinctionAfter = (result: CustomeArray<any>) => {
      if (result.length != 12) return;

      options.loadingExtinctionStatus = false;
      if (creates.extinctionDrawer != null) {
        creates.extinctionDrawer.close();
      }

      let matrix = converCloudRecognition(801, result, 'extinction');
      creates.extinctionDrawer = new HeatMapDrawer(800, 700, matrix, "extinction_chart-after", '/km');
      creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
      creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
      creates.extinctionDrawer.draw();
    }

    const prepareExtinctionnColors = () => {
      let colorChart = new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
            '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
          [10, 8, 6, 4, 2, 1, 0.8, 0.6, 0.4, 0.2, 0.1, 0.08, 0.06, 0.04, 0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001], true, true
      );
      colorChart.setDefaultColors('#000099', '#8F0000');
      return colorChart;
    }

    const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any, isDay: boolean = false, length = 24) => {
      preprocessing(type);
      let result = new CustomeArray(callback);
      let time = moment(options.date);
      if (isDay) time.set('h', 23).add(-1, 'd');
      options.timeArray = []
      for (let index = 0; index < length; index++) {
        if(time.clone().add(-index, 'h').format('HH') == '00'){
          reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').add(-1,'d').format('M_D_24'), element, result);
          options.timeArray.push(time.clone().add(-index, 'h').format('24'))
        }
       else {
          reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result);
          options.timeArray.push(time.clone().add(-index, 'h').format('HH'))
        }
      }
      options.timeArray.reverse()
    }

    const reloadChartsRecognition = (element: string, callback: any) => {
      preprocessingCharts(element)
      let result = new CustomeArray(callback);
      let time = moment(options.date);
      for (let index = 0; index < 24; index++) {
        reloadSingleChartsRecognition(time.clone().add(-index, 'h').format('M_D_H'), element, result);
      }
    }

    const reloadChartLidarratio = (element: string, callback: any) => {
      preprocessingCharts(element)
      let result = new CustomeArray(callback);
      let time = moment(options.date);
      reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
    }

    const drawCloudRecognition = (result: CustomeArray<any>) => {
      if (result.length != 12) return;
      options.loadingCloudRecognitionStatus = false;
      if (creates.cloudRecognitionDrawer != null) {
        creates.cloudRecognitionDrawer.close();
      }

      let matrix = converCloudRecognition(801, result, 'layertype');
      creates.cloudRecognitionDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_recognition_chart");
      creates.cloudRecognitionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
      creates.cloudRecognitionDrawer.setColorChart(prepareCloudRecognitionColors());
      creates.cloudRecognitionDrawer.draw();
    }

    const prepareCloudRecognitionColors = () => {
      return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
          [{label: '冰云', value: 3}, {label: '水云', value: 2}, {label: '气溶胶', value: 1}, {label: '晴空', value: 0}],
          false,
          false,
          "equal"
      );
    }

    const converCloudRecognition = (capacity: number, result: CustomeArray<any>, name: string) => {
      result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
      let matrix = new Array<Array<Box>>();
      let index = -1;
      result.forEach(r => {
        const time = moment(r.time, 'M_D_H').format("MM月DD日HH时")
        if (r.data == null) {
          for (let x = 0; x < 11; x++) {
            index++;
            if (matrix[index] == null) {
              matrix[index] = new Array<Box>(capacity);
            }
            for (let y = 0; y < capacity; y++) {
              matrix[index][y] = new Box(index, y, 0, 0, NaN, y * 15, time, "米");
            }
          }
          return;
        }
        const interval = Math.round(11 / r.data[0].length);
        for (let h = 0, len = capacity; h < len; h++) {
          let tempIndex = parseInt(index + "");
          if (r.data[h] == null) {
            for (let i = 0; i < 11; i++) {
              tempIndex++;
              if (matrix[tempIndex] == null) {
                matrix[tempIndex] = new Array<Box>(capacity);
              }
              matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, NaN, h * 15, time, "米");
            }

            continue;
          }
          r.data[h] = r.data[h].slice(0, 11);
          for (let i = 0, len = r.data[h].length; i < len; i++) {
            for (let _i = 0; _i < interval; _i++) {
              tempIndex++;

              if (matrix[tempIndex] == null) {
                matrix[tempIndex] = new Array<Box>(capacity);
              }

              if (h < 4) {
                matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, NaN, h * 15, time, "米");
                continue;
              }

              let value = r.data[h - 2][i]
              if (name == 'backscatter') {
                value = value == null ? NaN : value;
                //value = value == null ? NaN : Math.log10(value);
              }
              if (name == 'singleWatervapor' || name == 'watervapor') {
                value = value == null ? NaN : value * 1000;
              }
              value = value == null ? NaN : value;
              matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米");
            }
          }
        }
        index = index + r.data[0].length * interval;
      });
      return matrix;
    }


    const reloadSingleCloudRecognition = (capacity: number, time: string, elementCode, result: CustomeArray<any>) => {
      const params = prepareApiParams(time, elementCode)
      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
        if (response.state != 0) {
          setCloudRecognitionResult(capacity, time, response.message, null, result);
          return;
        }

        setCloudRecognitionResult(capacity, time, response.message, response.data, result);
      })
      //     .catch(error => {
      //   setCloudRecognitionResult(capacity, time, error.message, null, result);
      // })
      // .catch(error => {
      //   setCloudRecognitionResult(capacity, time, error.message, null, result);
      // })
    }

    //
    const reloadSingleChartsRecognition = (time: string, elementCode, result: CustomeArray<any>) => {
      const params = prepareApiParams(time, elementCode)
      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
        if (response.state != 0) {
          setChartsRecognitionResult(time, response.message, null, result);
          return;
        }
        setChartsRecognitionResult(time, response.message, response.data, result);
      }).catch(error => {
        setChartsRecognitionResult(time, error.message, null, result);
      })
    }

    const setCloudRecognitionResult = (capacity: number, time: string, message: string, data: any, result: CustomeArray<any>) => {
      result.push({
        time: time,
        message: message,
        data: data == null ? null : JSON.parse(data).slice(0, capacity)
      })
    }
    //
    const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray<any>) => {
      result.push({
        time: time,
        message: message,
        data: data == null ? null : JSON.parse(data)
      })
    }

    const initEcharts = (name) => {
      if (name === 'boundary-layer-height') {

      } else if (name === 'optical-property') {
        opticalThicknessInit()
      } else if (name === 'aerosol-product') {
        LidarRatioInit()
        boundaryLayerHeightInit()
      } else if (name === 'BingoCloud') {
        cloudsHeightInit()
        cloudTopHeightInit()
      }
    }

    //区域切换
    const onRegionClick = (region) => {
      options.currentRegion = region;
      setTimeout(() => {
        initEcharts(options.currentRegion)

        // reloadChangeData()
        elementChange(options.currentElement)
      }, 500)
    }

    //要素选择
    // const onElementClick = (element, type) => {
    //   options.currentElement = element;
    //   options.currentType = type;
    //   options.date = options.currentTime;
    //   setTimeout(() => {
    //   }, 500)
    //   cancelActive();
    //   setTitle(moment(options.date));
    //   activeImage();
    // }

    // const setTitle = (date) => {
    //   options.title = date.format('YYYY.MM.DD') + '  ' + options.currentType;
    // }

    // const activeImage = () => {
    //   options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
    //   options.previewUrl = [options.imgUrl];
    //
    //   options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
    //   options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
    // }

    // const onImageLoad = (event) => {
    //   if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
    //     converToBase64(options.imgUrl);
    //   else
    //     return
    // }

    // const onDownloadClick = () => {
    //   post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
    //     if (response.error != 0) {
    //       console.log(response.message);
    //       return;
    //     }
    //
    //     fetch(response.data).then(res => {
    //       return res.blob();
    //     }).then(blob => {
    //       let reader = new FileReader();
    //       reader.onloadend = function () {
    //         options.downloadSrc = reader.result;
    //
    //         setTimeout(() => {
    //           document.getElementById("radarDownload").click();
    //           options.downloadSrc = null;
    //         }, 500);
    //       };
    //       reader.readAsDataURL(blob);
    //     }).catch(console.error);
    //   })
    // }

    //参数准备
    // const prepareParams = () => {
    //   return {
    //     model: 'radar',
    //     station: options.currentRegion,
    //     elementCode: options.currentElement,
    //     type: null,
    //     time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
    //     urls: prepareUrls()
    //   }
    // }

    // const prepareUrls = () => {
    //   let urls = [];
    //   for (let index = 0, len = options.times.length; index < len; index++) {
    //     let time = moment(options.times[index].date);
    //
    //     if (options.currentElement === 'PBLH') {
    //       urls.push(
    //           RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
    //           RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
    //       );
    //     } else
    //       urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
    //   }
    //
    //   console.log(urls)
    //   return urls;
    // }

    // const converToBase64 = (path) => {
    //   let img = new Image();
    //   img.src = path;
    //   let canvas = document.createElement("canvas") as HTMLCanvasElement;
    //   canvas.width = img.width;
    //   canvas.height = img.height;
    //
    //   let ctx = canvas.getContext("2d");
    //   let base64 = '';
    //
    //   img.setAttribute("crossOrigin", 'Anonymous')
    //   img.onload = function () {
    //     ctx.drawImage(img, 0, 0);
    //     base64 = canvas.toDataURL("image/png");
    //     options.downloadImgUrl = base64;
    //   };
    // }

    //初始化时间轴
    const initTimeLine = (isQuality: boolean = false) => {
      if (options.timeLineFormat == "hour") return;
      options.timeLineFormat = "hour";
      options.times = [];
      options.currentTime = moment(options.date).format('YYYY-MM-DD HH');
      let now = moment(options.date).add(1, 'h');
      if (isQuality) now = now.set('h', 1);
      for (let i = 0; i < 24; i++) {
        options.times.push({
          hour: now.add(-1, 'hour').format('HH'),
          day: now.format('MM/DD'),
          date: now.format('YYYY-MM-DD HH'),
        })
      }
      options.times.reverse();
      options.index = options.times.length - 1;
    }

    const initTimeLineDay = () => {
      if (options.timeLineFormat == "day") return;
      options.timeLineFormat = "day";
      options.times = [];
      options.currentTime = moment(options.date).format('YYYY-MM-DD');
      let now = moment(options.date).add(1, 'd');
      // let day = new Date(now.year(), now.month() + 1, 0);
      // console.log(day.getDate())
      for (let i = 0; i < 24; i++) {
        options.times.push({
          day: now.add(-1, 'd').format('DD'),
          month: now.format('MM'),
          date: now.format('YYYY-MM-DD'),
        })
      }
      options.times.reverse();
      options.index = options.times.length - 1;
    }


    //时间选择
    const onTimeClick = (time, index) => {
      options.currentTime = time.date;
      options.date = moment(time.date).format('YYYY-MM-DD HH');
      elementChange(options.currentElement)
      options.index = index;
      // reloadChangeData()
      // cancelActive();
      // setTitle(moment(time.date, 'YYYY-MM-DD'));
      // activeImage();
    }

    const cancelActive = () => {
      clearTimer();
      options.isPlay = false;
    }

    //上一天
    const onPrevDayClick = () => {

      let element = getCurrentElement();
      if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
        options.date = moment().format('YYYY-MM-DD HH')
      } else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
      options.currentTime = options.date;
      options.index--;
      if (options.index < 0) {
        options.index = element.childElementCount - 1;
        options.date = options.times[options.times.length - 1].date
      }
      options.timeLineFormat = "day";
      initTimeLine()
      // cancelActive();
      // setCurrentPlayElement(element)
      elementChange(options.currentElement)
    }

    const onNextDayClick = () => {
      if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
        options.date = moment().format('YYYY-MM-DD HH')
      } else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
      options.timeLineFormat = "day";
      initTimeLine()
      elementChange(options.currentElement)
    }

    //上一张图片
    // const onPrevImgClick = () => {
    //   let element = getCurrentElement();
    //
    //   options.index--;
    //   if (options.index < 0)
    //     options.index = element.childElementCount - 1;
    //
    //   setCurrentPlayElement(element);
    // }

    // const onNextImgClick = () => {
    //   let element = getCurrentElement();
    //
    //   options.index++;
    //   if (options.index > element.childElementCount - 1)
    //     options.index = 0;
    //
    //   setCurrentPlayElement(element);
    // }

    //重置
    // const onRefreshClick = () => {
    //   options.date = moment('2021-11-15').format('YYYY-MM-DD');
    //   options.currentTime = options.times[options.times.length - 1].date;
    //
    //   cancelActive();
    //   activeImage();
    // }
    //
    // const onPlayClick = () => {
    //   options.isPlay = !options.isPlay;
    //   if (options.isPlay) {
    //     timeExcute();
    //   } else {
    //     clearTimer();
    //   }
    // }

    // const timeExcute = () => {
    //   clearTimer();
    //   let element = getCurrentElement();
    //   timer = setInterval(() => {
    //     options.index++;
    //     if (options.index > element.childElementCount - 1)
    //       options.index = 0;
    //     setCurrentPlayElement(element);
    //   }, 3000)
    // }

    const clearTimer = () => {
      if (timer)
        clearInterval(timer);
    }

    const getCurrentElement = () => {
      return document.querySelector('.times');
    }

    // const setCurrentPlayElement = (element) => {
    //   for (let i = 0; i < element.childElementCount; i++)
    //     element.children[i].classList.remove('active');
    //
    //   element.children[options.index].classList.add('active');
    //   options.currentTime = options.times[options.index].date;
    //   setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
    //   activeImage();
    // }

    const onChange = (e) => {
      if (options.currentElement === 'extinction' || options.currentElement === 'lidarratio' || options.currentElement === 'watervapor') {
        options.timeLineFormat = "hour";
        initTimeLineDay()
      } else {
        if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
          options.date = moment().format('YYYY-MM-DD HH')
        }
        options.timeLineFormat = "day";
        initTimeLine();
      }
      elementChange(options.currentElement)
      // setTitle(moment(options.date));
      // activeImage();
    }

    // const onSaveClick = () => {
    //   let pictures = document.getElementById('pictures');
    //   options.urls = [options.imgUrl, options.signalPBLHImgUrl];
    //
    //   for (let i = 0; i < options.urls.length; i++) {
    //     let img = new Image();
    //     img.src = options.urls[i];
    //     let canvas = document.createElement("canvas") as HTMLCanvasElement;
    //     canvas.width = img.width;
    //     canvas.height = img.height;
    //
    //     let ctx = canvas.getContext("2d");
    //     let base64 = "";
    //
    //     img.setAttribute("crossOrigin", 'Anonymous');
    //     img.onload = () => {
    //       ctx.drawImage(img, 0, 0);
    //       base64 = canvas.toDataURL("image/png");
    //       pictures.children[i].setAttribute('href', base64);
    //       setTimeout(() => {
    //         let button: HTMLElement = pictures.children[i] as HTMLElement;
    //         button.click();
    //         pictures.children[i].setAttribute('href', null);
    //       }, 500);
    //     };
    //   }
    // }


    const prepareApiParams = (time, variableName) => {
      if (variableName == 'lidarratio') {
        return {
          date: moment(time, 'MM_DD_hh').format('M_D'),
          var: variableName,
          locate: options.currentRegion
        }
      }
      return {
        date: time,
        var: variableName,
        locate: options.currentRegion
      }
    }

    // watch(()=>options.date,() =>{
    //   reloadChangeData()
    // },{
    //   deep: true,
    //   immediate: true
    // })

    const verify = () => {
      ElMessage({
        showClose: true,
        message: '请求接口无数据',
        icon: '',
        type: null,
        grouping: true,
        duration: 1500
      })
    }

    const error = () => {
      ElMessage({
        showClose: true,
        message: '请求接口错误',
        icon: '',
        type: null,
        grouping: true,
        duration: 1500
      })
    }

    const onElementClick = (element) => {
      options.currentElement = element
      elementChange(element)
    }

    const onChangeDayClick = (time, index) => {
      options.currentTime = time.date
      options.date = moment(time.date).format('YYYY-MM-DD');
      elementChange(options.currentElement)
      options.index = index;
    }

    const onPrevDayTimeClick = () => {
      options.timeLineFormat = "hour"
      options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
      initTimeLineDay()
      elementChange(options.currentElement)
    }

    const onNextDayTimeClick = () => {
      options.timeLineFormat = "hour"
      options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
      initTimeLineDay()
      elementChange(options.currentElement)
    }

    //刷新
    const onRefreshPageHandlerClick = () => {

      if( options.currentTab === 'MWR' ){
        reloadChangeData();

      }else if( options.currentTab === 'boundary-layer-height' ){
        reloadChangeData();
        
      }else if( options.currentTab === 'optical-property' ){
        opticalThicknessInit();

      }else if( options.currentTab === 'aerosol-product' ){
        LidarRatioInit();
        boundaryLayerHeightInit();

      }else if( options.currentTab === 'BingoCloud' ){
        cloudsHeightInit();
        cloudTopHeightInit();

      }

    }
    
    return {
      ...toRefs(options),
      onRegionClick,
      // onElementClick,
      onTimeClick,
      onPrevDayClick,
      onNextDayClick,
      // onPrevImgClick,
      // onNextImgClick,
      // onRefreshClick,
      // onPlayClick,
      onChange,
      // onImageLoad,
      // onDownloadClick,
      // onSaveClick,
      onTabClick,
      onElementClick,
      onChangeDayClick,
      onPrevDayTimeClick,
      onNextDayTimeClick,
      onRefreshPageHandlerClick
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  .container {
    :deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
      padding-top: 0.08rem;
    }
    :deep(.el-input__prefix) {
      top: 4px;
    }

    .toolbar {
      //padding: 0.15rem 0;
      padding-bottom: 7px;

      .times {
        padding-bottom: 0;
      }
    }

    .raman-picture-container {
      //width: calc(~"100% - 1rem");
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;

      .special-picture {
        display: flex;
        flex-flow: column;
        justify-content: center;
        //:deep(.el-loading-mask) {
        //  top: 64px !important;
        //}
      }

      .picture {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        //position: relative;
        //margin-top: 30px;
        :deep(.loadingStatus) {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 80px;
        }
        #watervapor_single_chart {
          //transform: translateX(6%) translateY(50px);
        }

        #extinction_optics_chart {
          //transform: translateX(6%) translateY(50px);
        }

        #pm2_5_chart {
          transform: translateX(-15px) translateY(50px);
        }

        #pm10_chart {
          transform: translateX(-15px) translateY(50px);
        }

        #backscatter_chart {
          //transform: translateX(6%) translateY(50px);
        }

        #cloud_sol_chart {
          //transform: translateX(6%) translateY(50px);
        }

        //#extinction_chart-before,
        //#extinction_chart-after,
        //#watervapor_chart-before,
        //#watervapor_chart-after {
        //  transform: translateY(50px);
        //}

        .title {
          padding-top: 70px;
          //width: 100%;
          //font-size: 0.22rem;
          //position: absolute;
          //left: 350px;
          //top: 30px;
          z-index: 100;
        }

        .special-title {
          left: 48%;
        }

        .pblh-image {
          width: 50%;
        }
      }
    }
  }
}

.refresh{
  width: 57px ;
  height: 33px;
  background-image: url(../../public/images/refresh.png);
  background-repeat: no-repeat;
  background-size: 46px 33px;
  margin-left: 10px;
  margin-top: 4px;
  cursor: pointer;
}

</style>
