<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 === 'kuoxian'}" class="tab-item" @click="onTabClick('kuoxian')">
      垂直廓线
      <img v-if="currentTab === 'kuoxian'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'shixu'}" class="tab-item" @click="onTabClick('shixu')">
      对流指数
      <img v-if="currentTab === 'shixu'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'T-logP'}" class="tab-item" @click="onTabClick('T-logP')">
      T-logP图
      <img v-if="currentTab === 'T-logP'" src="/images/line.png"/>
    </div>
    <div :class="{'active': currentTab === 'shixu_BPFY'}" class="tab-item" @click="onTabClick('shixu_BPFY')">
      BP反演产品
      <img v-if="currentTab === 'shixu_BPFY'" 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 :class="{'active': currentRegion === 'jiang-ning'}"
                                  @click="onRegionClick('jiang-ning')">江宁</span></el-col>
          <el-col :span="8"><span :class="{'active': currentRegion === 'liu-he'}"
                                  @click="onRegionClick('liu-he')">六合</span></el-col>
          <el-col :span="8"><span :class="{'active': currentRegion === 'pu-kou'}"
                                  @click="onRegionClick('pu-kou')">浦口</span></el-col>
          <el-col :span="8"><span :class="{'active': currentRegion === 'gao-chun'}"
                                  @click="onRegionClick('gao-chun')">高淳</span></el-col>
          <el-col :span="8"><span :class="{'active': currentRegion === 'li-shui'}"
                                  @click="onRegionClick('li-shui')">溧水</span></el-col>
        </el-row>
      </div>
      <div class="menu-item">
        <h2 class="tip">分辨率选择</h2>
        <el-row :gutter="12">
          <el-col :span="8"><span :class="{'active': currentElement === 'six-minute'}"
                                  @click="onElementClick('six-minute', -2, 6)">6分钟</span></el-col>
          <el-col :span="8"><span :class="{'active': currentElement === 'half-hour'}"
                                  @click="onElementClick('half-hour', -12, 30)">30分钟</span></el-col>
          <el-col :span="8"><span :class="{'active': currentElement === 'one-hour'}"
                                  @click="onElementClick('one-hour', -24, 60)">1小时</span></el-col>
        </el-row>
      </div>

    </div>
    <div class="container panel">
      <div class="toolbar">

        <!--6分钟-->
        <div v-show ="currentElement === 'six-minute'" class="times sixMinute">
          <div v-for="(time, index) in times" :key="index"
               :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}" class="time-item">
            <span class="hour">{{ time.hour }}</span>
            <span class="time" @click="onTimeClick(time, index)">{{ time.minute }}</span>
          </div>
        </div>

        <!--30分钟-->
        <div v-show ="currentElement === 'half-hour'" class="times halfHour">
          <div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"
               class="time-item">
            <span class="hour ">{{ time.hour }}</span>
            <span class="time" @click="onTimeClick(time, index)">{{ time.minute }}</span>
          </div>
        </div>

        <!--1小时-->
        <div v-show ="currentElement === 'one-hour'" class="times oneHour">
          <div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"
               class="time-item">
            <span class="hour">{{ time.hour }}</span>
            <span class="time" @click="onTimeClick(time, index)">{{ time.minute }}</span>
          </div>
        </div>

        <el-date-picker v-model="date" :clearable="false" :editable="false" class="date-picker" placeholder="请选择"
                        type="date" @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>
        <el-select v-model="currentHour" placeholder="" @change="onChange">
          <el-option
              v-for="item in hours"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
        <p class="unit">时</p>
      </div>
      <div class="picture-view">

        <!--质控对比-->
        <div v-show ="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR">
<!--          <el-switch-->
<!--              v-model="SeasonValue"-->
<!--              @change="onchangeSeason"-->
<!--              active-value="1"-->
<!--              inactive-value="2"-->
<!--              active-text="夏"-->
<!--              inactive-text="冬"-->
<!--          />-->
          <div class="picture special-picture">
            <h2 class="title">质控前</h2>
            <canvas id='original-data-canvas'></canvas>
          </div>

          <div class="picture special-picture">
            <h2 class="title">质控后</h2>
            <canvas id='interpolate-canvas'></canvas>
          </div>
        </div>

        <!--BP反演产品-->
        <div v-show ="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP">
          <div class="BPPicture picture">
            <h2 class="title">BP反演温度</h2>
            <canvas id="BP-temp"></canvas>
          </div>
          <div class="BPPicture picture">
            <h2 class="title">BP反演相对湿度</h2>
            <canvas id="BP-relative-humidity"></canvas>
          </div>
          <div class="BPPicture picture">
            <h2 class="title">BP反演水汽密度</h2>
            <canvas id="BP-vapor-density"></canvas>
          </div>
        </div>

        <div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
          <div class="verticalProfile-picture">
            <h2 class="verticalProfileTitle">温度廓线</h2>
            <div id="verticalProfileTemp" style="width: 400px;height: 400px"></div>
          </div>
          <div class="verticalProfile-picture">
            <h2 class="verticalProfileTitle">相对湿度廓线</h2>
            <div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div>
          </div>
          <div class="verticalProfile-picture">
            <h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2>
            <div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
          </div>
        </div>

        <div v-show ="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu">
          <div class="picture" style="margin-top: 570px">
            <h2 class="title">对流有效位能CAPE</h2>
            <div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div>
          </div>

          <div class="picture" style="margin-top: 570px">
            <h2 class="title">K指数</h2>
            <div id="kIndexChart" style="width: 100%;height:75%"></div>
          </div>
          <div class="picture">
            <h2 class="title">对流抑制势能CIN</h2>
            <div id="convectiveHighChartCIN" style="width:100%;height:75%"></div>
          </div>
          <div class="picture">
            <h2 class="title">沙式指数</h2>
            <div id="sandIndexChart" style="width:100%;height:75%"></div>
          </div>
          <div class="picture">
            <h2 class="title">LCL气压</h2>
            <div id="airPressureChart" style="width:100%;height:75%"></div>
          </div>
          <div class="picture">
            <h2 class="title">850hpa和500hpa温差</h2>
            <div id="deltaTChart" style="width:100%;height:75%"></div>
          </div>
          <div class="picture">
            <h2 class="title">0度层高度</h2>
            <div id="zeroHeightChart" style="width:100%;height:75%"></div>
          </div>
          <div class="picture">
            <h2 class="title">-20度层高度</h2>
            <div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div>
          </div>
        </div>

        <div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
          <img :src="tLogPPicture" style="width: 20%">
        </div>

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

<script lang="ts">
import {onMounted, reactive, ref, toRefs} from 'vue';
import moment from "moment";
import {get, post} from '../uilts/axios';
import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
import {Constant} from "../model/constant";
import {HighChartCreate} from "../model/high-chart-create";
import {ElMessage} from 'element-plus'

export default {
  name: 'MicrowaveRadiation',
  setup() {
    let timer = null;
    let creates: {
      verticalProfileTemp: HighChartCreate
      verticalProfileVaporDensity: HighChartCreate
      verticalProfileRelativeHumidity: HighChartCreate
      convectiveIndexProfileTimeChartCAPE: HighChartCreate
      convectiveIndexProfileTimeChartCIN: HighChartCreate
      kIndexChart: HighChartCreate
      sandIndex: HighChartCreate
      airPressure: HighChartCreate
      deltaT: HighChartCreate
      zeroHeight: HighChartCreate
      NegativeTwentyHeight: HighChartCreate
    } = {
      verticalProfileTemp: null,
      verticalProfileVaporDensity: null,
      verticalProfileRelativeHumidity: null,
      convectiveIndexProfileTimeChartCAPE: null,
      convectiveIndexProfileTimeChartCIN: null,
      kIndexChart: null,
      sandIndex: null,
      airPressure: null,
      deltaT: null,
      zeroHeight: null,
      NegativeTwentyHeight: null
    }

    let options = reactive({
      currentTab: 'MWR',
      currentRegion: 'jiang-ning',
      currentType: 'TEMP',
      currentElement: 'six-minute',
      currentCategory: 'CAPE',
      date: moment('2021-12-05').format('YYYY-MM-DD'),
      currentHour: '00',
      hours: [],
      times: [],
      days: [],
      currentTime: null,
      srcList: [],
      title: null,
      index: 0,
      downloadSrc: null,
      urls: [],
      titleStartTime: null,
      titleEndTime: null,
      apiTimeLength: -2,
      apiTimeInterval: 6,
      // onPitchTime: 0,
      BPTitleTime: null,
      highChartXAxis: [],
      specialStartTime: null,
      tLogPPicture: "/images/no-data.png",
      SeasonValue: '1'
    });

    let drawers = {
      originalDrawer: null,
      interpolateDrawer: null,
      abnormalDrawer: null,
      BPTempDrawer: null,
      BPRelativeHumidity: null,
      BPVaporDensity: null
    }

    onMounted(() => {
      initTimeLine()
      initHours();
      setTimeout(() => {
        changeColor()
      }, 100)
      reloadData()
    })

    const onTabClick = (name) => {
      options.currentTab = name;
      setTimeout(() => {
        initEcharts(name);
        reloadChangeData();
      }, 500)
    }

    const initEcharts = (name) => {
      if (name === 'kuoxian') {
        verticalProfileTempInit()
        verticalProfileVaporDensityInit()
        verticalProfileRelativeHumidityInit()
      } else if (name === 'shixu') {
        convectiveIndexProfileTimeChartInitCAPE()
        convectiveIndexProfileTimeChartInitCIN()
        kIndexChartInit()
        sandIndexInit()
        airPressureInit()
        deltaTInit()
        zeroHeightInit()
        NegativeTwentyHeightInit()
      }
    }

    // const verticalProfileInit = () => {
    //   creates.verticalProfile = new HighChartCreate('container');
    //   creates.verticalProfile.setChart(true);
    //   creates.verticalProfile.setXAxis('高度(km)', false);
    //   creates.verticalProfile.setYAxis('温度T(degree)', 10, -40, 10, 6, true);
    //   creates.verticalProfile.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
    //   creates.verticalProfile.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
    //   creates.verticalProfile.setLegend();
    //   creates.verticalProfile.setTooltip('{point.category} KM: {point.y}');
    //   creates.verticalProfile.setSeries('温度', 0, '℃', '#F49927');
    //   creates.verticalProfile.setSeries('相对湿度', 1, '%', '#3534FD');
    //   creates.verticalProfile.setSeries('水汽密度', 2, 'g/Kg', '#6AB312');
    //   creates.verticalProfile.init();
    // }

    //垂直廓线温度数据图
    const verticalProfileTempInit = () => {
      creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp');
      creates.verticalProfileTemp.setChart(true);
      creates.verticalProfileTemp.setXAxis('高度(km)', false);
      creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6);
      creates.verticalProfileTemp.setLegend();
      creates.verticalProfileTemp.setTooltip('{point.category} KM, {point.y}');
      creates.verticalProfileTemp.setSeries('温度', 0, '℃', '#F49927');
      creates.verticalProfileTemp.init();
    }

    //垂直廓线水汽密度数据图
    const verticalProfileVaporDensityInit = () => {
      creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity');
      creates.verticalProfileVaporDensity.setChart(true);
      creates.verticalProfileVaporDensity.setXAxis('高度(km)', false);
      creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
      creates.verticalProfileVaporDensity.setLegend();
      creates.verticalProfileVaporDensity.setTooltip('{point.category} KM, {point.y}');
      creates.verticalProfileVaporDensity.setSeries('水汽密度', 0, 'g/Kg', '#6AB312');
      creates.verticalProfileVaporDensity.init();
    }

    //垂直廓线相对湿度数据图
    const verticalProfileRelativeHumidityInit = () => {
      creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity');
      creates.verticalProfileRelativeHumidity.setChart(true);
      creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false);
      creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
      creates.verticalProfileRelativeHumidity.setLegend();
      creates.verticalProfileRelativeHumidity.setTooltip('{point.category} KM, {point.y}');
      creates.verticalProfileRelativeHumidity.setSeries('相对湿度', 0, '%', '#498DF0');
      creates.verticalProfileRelativeHumidity.init();
    }

    const convectiveIndexProfileTimeChartInitCAPE = () => {
      creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE');
      creates.convectiveIndexProfileTimeChartCAPE.setChart();
      creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间（时/分）', false);
      creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 800, 0, 100, 9);
      creates.convectiveIndexProfileTimeChartCAPE.setLegend();
      creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}, {point.y}(J/kg)');
      creates.convectiveIndexProfileTimeChartCAPE.setSeries('CAPE')
      creates.convectiveIndexProfileTimeChartCAPE.init();
    }

    const convectiveIndexProfileTimeChartInitCIN = () => {
      creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN');
      creates.convectiveIndexProfileTimeChartCIN.setChart();
      creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间（时/分）', false);
      creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)', 800, 0, 100, 9);
      creates.convectiveIndexProfileTimeChartCIN.setLegend();
      creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}, {point.y}(J/kg)');
      creates.convectiveIndexProfileTimeChartCIN.setSeries('CIN')
      creates.convectiveIndexProfileTimeChartCIN.init();
    }

    //绘制K指数
    const kIndexChartInit = () => {
      creates.kIndexChart = new HighChartCreate('kIndexChart');
      creates.kIndexChart.setChart();
      creates.kIndexChart.setXAxis('时间（时/分）', false);
      creates.kIndexChart.setYAxis('K（℃）', 40, -40, 10, 9);
      creates.kIndexChart.setLegend();
      creates.kIndexChart.setTooltip('{point.category}, {point.y}(℃)');
      creates.kIndexChart.setSeries('K指数')
      creates.kIndexChart.init();
    }

    //绘制沙式指数
    const sandIndexInit = () => {
      creates.sandIndex = new HighChartCreate('sandIndexChart');
      creates.sandIndex.setChart();
      creates.sandIndex.setXAxis('时间（时/分）', false);
      creates.sandIndex.setYAxis('SI（℃）', 30, 0, 3, 11);
      creates.sandIndex.setLegend();
      creates.sandIndex.setTooltip('{point.category}, {point.y}(℃)');
      creates.sandIndex.setSeries('沙式指数')
      creates.sandIndex.init();
    }

    //绘制LCl气压
    const airPressureInit = () => {
      creates.airPressure = new HighChartCreate('airPressureChart');
      creates.airPressure.setChart();
      creates.airPressure.setXAxis('时间（时/分）', false);
      creates.airPressure.setYAxis('LCL气压（hPa)', 1000, 300, 100, 8);
      creates.airPressure.setLegend();
      creates.airPressure.setTooltip('{point.category}, {point.y}(hPa)');
      creates.airPressure.setSeries('LCL气压')
      creates.airPressure.init();
    }

    //绘制850hpa和500hpa温差
    const deltaTInit = () => {
      creates.deltaT = new HighChartCreate('deltaTChart');
      creates.deltaT.setChart();
      creates.deltaT.setXAxis('时间（时/分）', false);
      creates.deltaT.setYAxis('deltaT（℃）', 1000, 300, 100, 8);
      creates.deltaT.setLegend();
      creates.deltaT.setTooltip('{point.category}, {point.y}(℃)');
      creates.deltaT.setSeries('deltaT')
      creates.deltaT.init();
    }

    //绘制0度层高度
    const zeroHeightInit = () => {
      creates.zeroHeight = new HighChartCreate('zeroHeightChart');
      creates.zeroHeight.setChart();
      creates.zeroHeight.setXAxis('时间（时/分）', false);
      creates.zeroHeight.setYAxis('hgt_0(m)', 10, 0, 1, 11);
      creates.zeroHeight.setLegend();
      creates.zeroHeight.setTooltip('{point.category}, {point.y}(m)');
      creates.zeroHeight.setSeries('hgt_0')
      creates.zeroHeight.init();
    }

    //绘制-20度层高度
    const NegativeTwentyHeightInit = () => {
      creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart');
      creates.NegativeTwentyHeight.setChart();
      creates.NegativeTwentyHeight.setXAxis('时间（时/分）', false);
      creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)', 20, -20, 5, 9);
      creates.NegativeTwentyHeight.setLegend();
      creates.NegativeTwentyHeight.setTooltip('{point.category}, {point.y}(m)');
      creates.NegativeTwentyHeight.setSeries('hgt_-20')
      creates.NegativeTwentyHeight.init();
    }

    const onRegionClick = (region) => {
      options.currentRegion = region;
    }

    const onElementClick = (element, apiTimeLength, apiTimeInterval) => {
      options.apiTimeInterval = apiTimeInterval;
      options.apiTimeLength = apiTimeLength;
      options.currentElement = element;
      // options.onPitchTime = onPitchTime
      initTimeLine(reloadChangeData)
      if (element === 'six-minute') {
        setTimeout(() => {
          changeColor()
        }, 0)
      }
      reloadChangeData()
    }

    //初始化时间轴
    const initTimeLine = (callback = null, ...params) => {
      options.times = [];
      options.currentTime = moment(options.date).hour(parseInt(options.currentHour) /*+ options.onPitchTime*/).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
      options.titleEndTime = options.currentTime
      let now = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30);
      let minute = now.minute();
      const remainder = minute % options.apiTimeInterval;
      if (remainder > 0) {
        now.minute(minute + (options.apiTimeInterval - remainder));
      }
      now.minute(now.minute() - options.apiTimeInterval);
      for (let i = 0; i < 24; i++) {
        options.times.push({
          hour: now.add(options.apiTimeInterval, 'minute').format('HH时'),
          minute: now.format('mm'),
          date: now.format('YYYY-MM-DD HH:mm:00')
        });
      }
      options.index = options.times.length - 1;
      options.titleStartTime = options.times[0].date;
      if (callback != null)
        callback(params);
    }

    const initHours = () => {
      for (let i = 1; i < 24; i++) {
        options.hours.push({
          value: i,
          label: i < 10 ? '0' + i : i,
        })
      }
    }

    const onTimeClick = (time, index) => {
      options.currentHour = time.hour.substring(0, 2)
      options.currentTime = time.date;
      options.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss')
      options.titleEndTime = time.date
      options.date = moment(time.date).format('YYYY-MM-DD')
      reloadChangeData()
    }

    //上一天
    const onPrevDayClick = () => {
      options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
      initTimeLine()
      options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
      options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
      reloadChangeData()
    }

    //下一天
    const onNextDayClick = () => {
      options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
      initTimeLine()
      options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
      options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
      reloadChangeData()
    }

    //重置时间
    const onRefreshClick = () => {
      let element = getCurrentElement();
      options.currentHour = '00';
      options.date = moment('2021-12-05').format('YYYY-MM-DD');
      element.children[options.times.length - 1].classList.add('active');
      initTimeLine()
      reloadChangeData()
    }

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

    const onChange = () => {
      initTimeLine(reloadChangeData);
    }

    const reloadData = () => {
      reloadQualityComparison()
      reloadQualityInterpolation()
    }

    const reloadBPData = () => {
      reloadBPRelativeHumidity()
      reloadQualityInterpolation()
      reloadBPVaporDensity()
    }

    const BPBrokenLineData = () => {
      BPTempData()
      BPVaporDensityData()
      BPRelativeHumidityData()
    }

    const reloadChangeData = () => {
      if (options.currentTab === 'MWR')
        reloadData()
      else if (options.currentTab === 'shixu_BPFY')
        reloadBPData()
      else if (options.currentTab === 'kuoxian') {
        BPBrokenLineData()
      } else if (options.currentTab === 'shixu') {
        convectiveIndexCAPEData()
        convectiveIndexCINData()
        kIndexApi()
        sandIndexApi()
        airPressureApi()
        deltaTApi()
        zeroHeightApi()
        NegativeTwentyHeightApi()
      }else if (options.currentTab === 'T-logP'){
        reloadTLogPData();
      }
    }

    const reloadTLogPData = () => {
        let params = {
          startTime: moment(options.titleEndTime).add(-options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'),
          endTime: options.titleEndTime
        }

        post("/tLogP/findLater", params).then((response: any) => {
          response == "" ? options.tLogPPicture = "/images/no-data.png" : options.tLogPPicture = response ;
        })
    }

    const changeColor = () => {
      let timeLine = document.querySelectorAll('.time-item')
      timeLine.forEach((item: any, index) => {
        if (index >= 4 && index <= 13) {
          const spanTimeColor = item.querySelector('.time')
          spanTimeColor.style.backgroundColor = '#CDDAF6'
        }
      })
    }

    // 重新加载质控对比数据
    const reloadQualityComparison = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams(401, startTime, options.titleEndTime);
      get('/njplatform/radardata/getOriginRangeData', params, Constant.baseUrl).then((response: any) => {
        clearBoxDrawer(drawers.originalDrawer);
        clearBoxDrawer(drawers.abnormalDrawer);
        if (response.code != 200 || response.data.radar_data.length === 0) {
          createEmptyCanvas('original-data-canvas', 1500, 500);
          // createEmptyCanvas('abnormal-canvas', 1500, 500);
          return;
        }
        drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃');
        // drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃');
        // options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
        // options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
      })
    }

    const reloadQualityInterpolation = () => {
      options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      if (options.currentTab === 'shixu_BPFY') {
        if (options.currentElement === 'six-minute') {
          options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
        }
      }
      const params = prepareApiParams(401, options.specialStartTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        clearBoxDrawer(drawers.interpolateDrawer);
        if (response.code != 200 || response.data.radar_data.length === 0) {
          if (options.currentTab === 'MWR')
            createEmptyCanvas('interpolate-canvas', 1500, 500);
          else if (options.currentTab === 'shixu_BPFY')
            createEmptyCanvas('BP-temp', 1500, 500);
          return;
        }
        if (options.currentTab === 'MWR')
          drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃');
        else if (options.currentTab === 'shixu_BPFY')
          drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp', '(degree)');
        // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
      })
    }

    //BP反演相对湿度
    const reloadBPRelativeHumidity = () => {
      options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      if (options.currentElement === 'six-minute') {
        options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      }
      const params = prepareApiParams(404, options.specialStartTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        clearBoxDrawer(drawers.BPRelativeHumidity);
        if (response.code != 200 || response.data.radar_data.length === 0) {
          createEmptyCanvas('BP-relative-humidity', 1500, 500);
          return;
        }
        drawers.BPRelativeHumidity = new BoxDrawer(1500, 500, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity', '(%)');
        // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
      })
    }

    //水汽密度
    const reloadBPVaporDensity = () => {
      options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      if (options.currentElement === 'six-minute') {
        options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      }
      const params = prepareApiParams(402, options.specialStartTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        clearBoxDrawer(drawers.BPVaporDensity);
        if (response.code != 200 || response.data.radar_data.length === 0) {
          createEmptyCanvas('BP-vapor-density', 1500, 500);
          return;
        }
        drawers.BPVaporDensity = new BoxDrawer(1500, 500, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density', '(g/kg)');
        // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
      })
    }

    const BPTempData = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams(401, startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        // creates.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response));
        creates.verticalProfileTemp.updateSeries(0, getVerticalProfileResponseData(response))
      })
    }

    const BPVaporDensityData = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams(402, startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        // creates.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response));
        creates.verticalProfileVaporDensity.updateSeries(0, getVerticalProfileResponseData(response));
      })
    }

    const BPRelativeHumidityData = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams(404, startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        // creates.verticalProfile.updateSeries(1, getVerticalProfileResponseData(response));
        creates.verticalProfileRelativeHumidity.updateSeries(0, getVerticalProfileResponseData(response))
      })
    }


    const getVerticalProfileResponseData = (response) => {
      if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) {
        options.BPTitleTime = null;
        verify();
        return [];
      }

      // creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor));
      creates.verticalProfileTemp.updateXAxis(response.data.radar_info.map(r => r.col_factor))
      creates.verticalProfileVaporDensity.updateXAxis(response.data.radar_info.map(r => r.col_factor))
      creates.verticalProfileRelativeHumidity.updateXAxis(response.data.radar_info.map(r => r.col_factor))
      // verticalProfileHighChart.xAxis[0].setCategories(response.data.radar_info.map(r => r.col_factor));
      response.data.radar_data.sort((x, y) => {
        return moment(x.data_time).isBefore(moment(y.data_time));
      });
      let data = response.data.radar_data[0];
      options.BPTitleTime = data.data_time;
      let optionData = [];
      response.data.radar_info.forEach(r => {
        optionData.push([r.col_name, data[r.col_name]]);
      });
      return optionData;
    }

    const convectiveIndexCAPEData = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('cape', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        let data = convectiveIndexResponseData(response);
        creates.convectiveIndexProfileTimeChartCAPE.updateSeries(0, data[0])
        creates.convectiveIndexProfileTimeChartCAPE.updateXAxis(data[1], 0)
      })
    }

    const convectiveIndexCINData = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('cin', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
        let data = convectiveIndexResponseData(response);
        creates.convectiveIndexProfileTimeChartCIN.updateSeries(0, data[0])
        creates.convectiveIndexProfileTimeChartCIN.updateXAxis(data[1], 0)
      })
    }
    //K-index
    const kIndexApi = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('K', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
        let data = convectiveIndexResponseData(response);
        creates.kIndexChart.updateSeries(0, data[0])
        creates.kIndexChart.updateXAxis(data[1], 0)
      })
    }

    //沙式指数
    const sandIndexApi = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('SI', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
        let data = convectiveIndexResponseData(response);
        creates.sandIndex.updateSeries(0, data[0])
        creates.sandIndex.updateXAxis(data[1], 0)
      })
    }

    //LCL气压
    const airPressureApi = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
        let data = convectiveIndexResponseData(response);
        creates.airPressure.updateSeries(0, data[0])
        creates.airPressure.updateXAxis(data[1], 0)
      })
    }

    //850hpa和500hpa温差
    const deltaTApi = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
        let data = convectiveIndexResponseData(response);
        creates.deltaT.updateSeries(0, data[0])
        creates.deltaT.updateXAxis(data[1], 0)
      })
    }

    //绘制0度层高度
    const zeroHeightApi = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('hgt_0', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
        let data = convectiveIndexResponseData(response);
        creates.zeroHeight.updateSeries(0, data[0])
        creates.zeroHeight.updateXAxis(data[1], 0)
      })
    }

    //绘制-20度层高度
    const NegativeTwentyHeightApi = () => {
      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
      const params = prepareApiParams('hgt_-20', startTime, options.titleEndTime);
      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
        let data = convectiveIndexResponseData(response);
        creates.NegativeTwentyHeight.updateSeries(0, data[0])
        creates.NegativeTwentyHeight.updateXAxis(data[1], 0)
      })
    }

    const convectiveIndexResponseData = (response) => {
      if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) {
        verify();
        return [[], []];
      }
      let radarData = response.data.radar_data;
      let times = [];
      let values = [];
      radarData.forEach(item => {
        if (item.f001 >= 10000) {
          item.f001 = 0
        }
        times.push(moment(item.data_time).format('HH:mm'))
        values.push(item.f001)
      });
      return [values, times];
    }

    const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
      if (boxDrawer == null) return;
      boxDrawer.close();
    }

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

    // const prepareTmpOriginalColors = () => {
    //   return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C',
    //         '#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86',
    //         '#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB',
    //         '#1C1FF9', '#1310C4', '#09067C'],
    //       [999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]
    //   );
    // }
    const prepareTmpOriginalColors = (type: string) => {
      switch (type) {
        case '1' :
            return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C',
                  '#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86',
                  '#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB',
                  '#1C1FF9', '#1310C4', '#09067C'],
                [999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]
            );
        case '2' :
          return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C',
                '#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86',
                '#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB',
                '#1C1FF9', '#1310C4', '#09067C'],
              [999, -5, -7, -9, -11, -13, -15, -17, -19, -21, -23, -25, -27, -29, -31, -999]
          );
        default:
          throw new Error("无效的type类型");
      }
    }

    const prepareBPTempColors = () => {
      return new ColorChart(['#860100', '#D20201', '#FF2402', '#FF6F09',
            '#FEBF14', '#EFFE24', '#9FFE61', '#52FEAA',
            '#03FEF8', '#0AB8FD', '#1069FD', '#1222FD',
            '#0C0AC9', '#05037D'],
          [999, 12, 8, 4, 0, -4, -8, -12, -16, -20, -24, -28, -32, -36, -999]
      );
    }

    const prepareBPRelativeHumidityColors = () => {
      return new ColorChart(['#860100', '#F60301', '#FF6708', '#FED718',
            '#B3FE4F', '#3EFEBD', '#07CFFE', '#1061FD',
            '#100DED', '#05037D'],
          [999, 90, 80, 70, 60, 50, 40, 30, 20, 10, -999]
      )
    }

    const prepareBPVaporDensityColors = () => {
      return new ColorChart(['#860100', '#F60301', '#FF6708', '#FED718',
            '#B3FE4F', '#3EFEBD', '#07CFFE', '#1061FD',
            '#100DED', '#05037D'],
          [999, 9, 8, 7, 6, 5, 4, 3, 2, 1, -999]
      )
    }

    const prepareApiParams = (radarDataCode, startTime, endTime) => {
      return {
        radar_data_code: radarDataCode,
        data_time_start: startTime,
        data_time_end: endTime
      }
    }

    const onchangeSeason = () => {
      reloadData()
    }

    return {
      ...toRefs(options),
      onTabClick,
      onRegionClick,
      onElementClick,
      onTimeClick,
      onPrevDayClick,
      onNextDayClick,
      onRefreshClick,
      onChange,
      changeColor,
      onchangeSeason
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  .container {
    .verticalProfile {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .verticalProfile-picture {
        position: relative;

        .verticalProfileTitle {
          position: absolute;
          font-size: 0.22rem;
          left: 1.77rem;
          top: -0.8rem;
        }
      }
    }

    :deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
      padding-top: 0.06rem;
    }

    .contrast-picture-container {
      width: calc(~"100% - 2.5rem");
      margin: 0 auto;
      //width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-between;
      .special-picture {
        height: 100%!important;
        .title {
            top: 80px!important;
        }
      }
      .picture {
        width: 45%;
        height: 45%;
        position: relative;

        #original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
          transform: scale(0.47, 0.8);
        }

        .title {
          width: 100%;
          font-size: 0.22rem;
          position: absolute;
          left: 3.10rem;
          top: 0;
          z-index: 1000;
        }
      }

      .BPPicture {
        width: 65% !important;
        height: 45%;
        position: relative;

        #BP-temp, #BP-relative-humidity, #BP-vapor-density {
          transform: scale(0.50, 0.4);
        }

        .title {
          left: 3.85rem !important;
        }
      }
    }

    .shiXu {
      overflow-y: scroll;
      width: 100% !important;
    }

    .shiXuBP {
      flex-flow: column;
      align-content: space-around !important;
    }

    .picture-MWR {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;

      :deep(.el-switch) {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 150px;
        z-index: 1000;
        //width: 10%;
      }

      :deep(.el-switch__core) {
        width: 40px !important;
        //height: 20px !important;
      }

      :deep(.el-switch__core::after) {
        width: 50px;
        height: 35px;
        margin-top: -1px;
        margin-bottom: 2px;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background-color: inherit;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: #c3c9cd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
</style>
