<!--
@name: 温度监控
@author: 张泽贤
@time: 2023-03-24
-->
<template>
  <div>
   <div style="position: absolute;right:0;z-index:10;">
    <a-radio-group v-model="time" >
      <a-radio value="default">默认</a-radio>
      <a-radio value="timeInterval">
        <a-space>按分钟<p-select style="width:80px" :disabled="time!=='timeInterval'" :options="TEMPERATURE_TIME_INTERVAL" v-model="timeInterval"/>
        </a-space>
      </a-radio>
    </a-radio-group>
    <p-button type="primary" @clickSync="submit">确定</p-button>
  </div>
    <div id="tempMonitor"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, MarkPointComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { initDictionary } from '@/blocks/utils'

echarts.use([TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, MarkPointComponent, LineChart, CanvasRenderer, UniversalTransition]);

import { query_shipbill_temperature } from './api.js';

export default {
  props: {
    ids: {
      type: Array,
      default: () => [],
    },
  },
  data() {


    return {
      timeInterval:'',
      TEMPERATURE_TIME_INTERVAL:[],
      time:'default',
      option: {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none',
        //     },
        //     dataView: { readOnly: false },
        //     magicType: { type: ['line', 'bar'] },
        //     restore: {},
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C',
          },

        },
        series: [
          {
            name: '温度',
            type: 'line',
            data: [],
            // data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            markLine: {
              data: [
                {
                  name: '温度上限',
                  type: 'max',
                  yAxis: 0,
                  lineStyle: {
                    color: '#08c',
                  },
                  label: {
                    position: 'end',
                    formatter: function (params) {
                      return '温度上限 ' + params.value + '°C';
                    },
                  },
                },
                {
                  name: '温度下限',
                   type: 'min',
                  yAxis: 0,
                  lineStyle: {
                    color: '#ff0000',
                  },
                  label: {
                    position: 'end',
                    formatter: function (params) {
                      return '温度下限 ' + params.value + '°C';
                    },
                  },
                },
              ],
            },
          },
        ],
      },

      myChart: null,
    };
  },
  mounted() {
    const chartDom = document.getElementById('tempMonitor');
    this.myChart = echarts.init(chartDom);
    // this.option && this.myChart.setOption(this.option);
    initDictionary([{ objectcode: 'TEMPERATURE_TIME_INTERVAL' }]).then((res) => {
        this.TEMPERATURE_TIME_INTERVAL = res?.TEMPERATURE_TIME_INTERVAL?.map((item) => {
        item.value = +item.value
        return item
      })??[]


    })
    this.query_shipbill_temperature();
  },
  methods: {
    submit() {
      this.query_shipbill_temperature()

    },
    query_shipbill_temperature() {
      // this.ids[0] 'YD1000059881'

      query_shipbill_temperature({ timeInterval:this.time!=='timeInterval'?'':this.timeInterval,shipbillId: this.ids[0] }).then((res) => {
        if (res.success) {
          if (res.data.temperatureTrackDtlList && res.data.temperatureTrackDtlList.length) {
            this.option.title.text = '运单号:' + res.data.shipbillNo;
            // this.option.yAxis.min = res.data.temperatureCtlLowerLimit;
            // this.option.yAxis.max = res.data.temperatureCtlUpperLimit;
            this.option.xAxis.data = res.data.temperatureTrackDtlList.map((item) => item.time);
            this.option.series[0].data = res.data.temperatureTrackDtlList.map((item) => item.temperature);
            this.option.series[0].markLine.data[0].yAxis = res.data.temperatureCtlUpperLimit;
            this.option.series[0].markLine.data[1].yAxis = res.data.temperatureCtlLowerLimit;
            this.myChart.setOption(this.option);
          }
        } else {
          this.$exception(res);
        }
      });
    },
  },
};
</script>

<style lang="less">
#tempMonitor {
  width: 100%;
  height: 600px;
}
</style>