<template>
  <!-- 物联数据-干燥机-->
  <div class="extruder-container">
    <div class="gauge-box">
      <div class="chart-container">
        <div class="chart-wrapper">
          <div ref="chart" id="chart"></div>
          <!-- <img
            src="@/assets/img/charts/dryingBox-bg.jpg"
            id="img"
            alt=""
            srcset=""
          /> -->
        </div>
        <div class="chart-wrapper">
          <div ref="chart1" id="chart1"></div>
          <!-- <img
            src="@/assets/img/charts/dryingBox-bg.jpg"
            id="img"
            alt=""
            srcset=""
          /> -->
        </div>
        <div class="chart-wrapper">
          <div ref="chart2" id="chart2"></div>
          <!-- <img
            src="@/assets/img/charts/dryingBox-bg.jpg"
            id="img"
            alt=""
            srcset=""
          /> -->
        </div>
        <div class="chart-wrapper">
          <div ref="chart3" id="chart3"></div>
          <!-- <img
            src="@/assets/img/charts/dryingBox-bg.jpg"
            id="img"
            alt=""
            srcset=""
          /> -->
        </div>
      </div>
      <div class="info-box">
        <el-form label-width="150px">
          <el-row>
            <template v-for="[key, obj] in Object.entries(realData)">
              <!-- 过滤掉运行状态 -->
              <el-col :span="12" v-if="!['status', 'status_m'].includes(key)">
                <el-form-item :label="obj.name">
                  <span>{{ obj.value }}</span>
                  <span style="margin-left: 5px" v-if="obj.unit">{{
                    obj.unit
                  }}</span>
                </el-form-item>
              </el-col>
            </template>
            <!-- 运行状态设置 -->
            <el-col :span="12" v-if="realData.status_m">
              <el-form-item label="运行状态">
                <div class="yx-warp">
                  <span>{{ realData.status_m.value }}</span>
                  <span
                    class="sz-span"
                    @click="handlsz"
                    v-if="Object.keys(realData).length == 1"
                    >设置</span
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <chart_temp :id="info.id" v-if="info.iotId"></chart_temp>
    <runningDialog
      ref="runningDialog"
      :id="info.id"
      @succeed="getRealData"
    ></runningDialog>
  </div>
</template>

<script>
  // import moment from 'moment';
  // import { getRealData } from '@/api/ledgerAssets/equipment.js';
  import chart_temp from './components/chart_temp.vue';
  // import mqtt from '../mixins/mqtt.js';
  // import { debounce } from 'lodash';
  import runningDialog from '../components/runningDialog.vue';
  export default {
    components: { chart_temp, runningDialog },
    // mixins: [mqtt],
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        dict: {
          // 运行状态
          status: {
            //0-停止,1-启动,2-定值停止,3-定值启动
            0: '停止',
            1: '启动',
            2: '定值停止',
            3: '定值启动'
          }
        },

        // 实时数据
        realData: {},
        // mqtt 订阅类别
        topIc_type: 'DRYING_OVEN_TOPIC'
      };
    },
    computed: {
      // mqtt topic
      TOPIC() {
        if (this.info.iotId) {
          return {
            topic: `/${this.topIc_type}/${this.info.iotId}`,
            qos: 0
          };
        } else {
          return null;
        }
      }
    },
    created() {
      this.getRealData();
      if (this.TOPIC) {
        this.mqttInit();
      }
    },
    methods: {
      dateClick(date) {
        this.temperatureTime = [];
        this.active = date;
      },

      initGauge() {
        let myChart = this.$echarts.init(document.getElementById('chart'));
        let option = this.getGaugeOption(
          this.realData.temp1 ? this.realData.temp1.value : 0,
          '温度1'
        );
        myChart.setOption(option);
        let myChart1 = this.$echarts.init(document.getElementById('chart1'));
        let option1 = this.getGaugeOption(
          this.realData.temp2 ? this.realData.temp2.value : 0,
          '温度2'
        );
        myChart1.setOption(option1);
        let myChart2 = this.$echarts.init(document.getElementById('chart2'));
        let option2 = this.getGaugeOption(
          this.realData.temp3 ? this.realData.temp3.value : 0,
          '温度3'
        );
        myChart2.setOption(option2);
        let myChart3 = this.$echarts.init(document.getElementById('chart3'));
        let option3 = this.getGaugeOption(
          this.realData.temp4 ? this.realData.temp4.value : 0,
          '温度4'
        );
        myChart3.setOption(option3);
      },

      //指针和起点覆盖
      getGaugeSeriesCover() {
        return {
          detail: {
            show: false
          },
          startAngle: 180,
          endAngle: -0,
          splitNumber: 2,
          radius: '84%',
          type: 'gauge',
          title: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          progress: {
            show: false
          },
          itemStyle: {
            color: '#7a71ff',
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
            borderCap: 'round'
          },
          anchor: {
            show: true,
            showAbove: false,
            offsetCenter: ['-98.5%', -1],
            size: 10,
            icon: 'circle',
            itemStyle: {
              color: '#98a4f2',
              borderColor: '#fff',
              backgroundColor: '#98a4f2',
              borderWidth: 5
            }
          },
          pointer: {
            show: true,
            icon: 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAwIDIwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOiM0MDYzRDE7fQo8L3N0eWxlPgo8cmVjdCB4PSI2Ny43IiB5PSI3NC43IiBjbGFzcz0ic3QwIiB3aWR0aD0iNjYuOSIgaGVpZ2h0PSI2OC43Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNzUsMTA4LjNjMCw0MS40LTMzLjYsNzUtNzUsNzVzLTc1LTMzLjYtNzUtNzVzNjQuNi05MS43LDc1LTkxLjdTMTc1LDY2LjksMTc1LDEwOC4zeiBNNzcuMSwxMDguMwoJYzAsMTIuNywxMC4zLDIyLjksMjIuOSwyMi45czIyLjktMTAuMywyMi45LTIyLjlTMTEyLjcsODUuNCwxMDAsODUuNFM3Ny4xLDk1LjcsNzcuMSwxMDguM3oiLz4KPC9zdmc+Cg==',
            length: '18%',
            width: '16%',
            keepAspect: true,
            offsetCenter: [0, '-90%']
          }
        };
      },
      getGaugeOption(data, chartName) {
        const max = this.getMax(data || 0, 100);

        const min = 0;
        return {
          tooltip: {
            show: false
          },
          series: [
            {
              zlevel: 1,
              min,
              max,
              startAngle: 180,
              endAngle: -0,
              splitNumber: 2,
              radius: '84%',
              type: 'gauge',
              detail: {
                width: '60%',
                lineHeight: 40,
                height: 40,
                fontSize: 32,
                borderRadius: 8,
                offsetCenter: [0, '-15%'],
                valueAnimation: true,
                formatter: function (value) {
                  return `${value}℃`;
                }
              },
              title: {
                show: true,
                offsetCenter: [0, '15%'],
                color: '#9e9e9e',
                fontSize: 18
              },
              axisLabel: {
                rotate: 360,
                distance: -10,
                color: '#666',
                fontSize: 22
              },
              splitLine: {
                show: true,
                length: 8,
                distance: -28,
                lineStyle: {
                  width: 1,
                  color: '#666'
                }
              },
              axisTick: {
                show: true,
                splitNumber: 10,
                distance: -20,
                length: 4,
                lineStyle: {
                  height: 2,
                  color: '#666'
                }
              },
              axisLine: {
                show: false
              },
              progress: {
                show: true,
                roundCap: true,
                width: 4,
                showAbove: false,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: '#15b4ff'
                    },
                    {
                      offset: 1,
                      color: '#716dff'
                    }
                  ]),
                  shadowColor: 'rgba(0,138,255,0.45)',
                  shadowBlur: 10,
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
                }
              },
              itemStyle: {
                color: '#7a71ff',
                shadowColor: 'rgba(0,138,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2,
                borderCap: 'round'
              },
              anchor: {
                show: false,
                showAbove: false,
                offsetCenter: ['-98.5%', 1],
                size: 10,
                icon: 'circle',
                itemStyle: {
                  borderColor: '#000',
                  borderWidth: 3
                }
              },
              pointer: {
                show: false,
                // icon: 'path://M175,108.3c0,41.4-33.6,75-75,75s-75-33.6-75-75s64.6-91.7,75-91.7S175,66.9,175,108.3z M77.1,108.3  c0,12.7,10.3,22.9,22.9,22.9s22.9-10.3,22.9-22.9S112.7,85.4,100,85.4S77.1,95.7,77.1,108.3z',
                // icon:'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAwIDIwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOiM0MDYzRDE7fQo8L3N0eWxlPgo8cmVjdCB4PSI2Ny43IiB5PSI3NC43IiBjbGFzcz0ic3QwIiB3aWR0aD0iNjYuOSIgaGVpZ2h0PSI2OC43Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNzUsMTA4LjNjMCw0MS40LTMzLjYsNzUtNzUsNzVzLTc1LTMzLjYtNzUtNzVzNjQuNi05MS43LDc1LTkxLjdTMTc1LDY2LjksMTc1LDEwOC4zeiBNNzcuMSwxMDguMwoJYzAsMTIuNywxMC4zLDIyLjksMjIuOSwyMi45czIyLjktMTAuMywyMi45LTIyLjlTMTEyLjcsODUuNCwxMDAsODUuNFM3Ny4xLDk1LjcsNzcuMSwxMDguM3oiLz4KPC9zdmc+Cg==',
                icon: 'image://data:image/png;base64,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',
                // icon:'image://https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675',
                length: '15%',
                width: '12%',
                keepAspect: true,
                offsetCenter: [0, '-92%']
              },
              center: ['49%', '62%'],
              name: 'Temperature',
              backgroundColor: '#000',
              data: [
                {
                  value: data,
                  name: chartName
                }
              ]
            },
            {
              min,
              max,
              zlevel: 2,
              ...this.getGaugeSeriesCover(),
              // center: ['48%', '77%'],
              center: ['49%', '62%'],
              name: 'Temperature',
              backgroundColor: '#000',
              data: [
                {
                  value: data,
                  name: chartName
                }
              ]
            }
          ]
        };
      },

      initTemperature(...rest) {
        this.myChart = this.$echarts.init(this.$refs['chart-temperature']);
        let option = this.getLineOption(...rest);
        this.myChart.setOption(option);
      },
      getLineOption(
        lineAxis = [],
        heat1 = [],
        heat2 = [],
        heat3 = [],
        heat4 = []
      ) {
        console.log(heat1, heat2, heat3, heat4);
        let xAxisData = lineAxis;
        if (this.active === 'week') {
          // xAxisData = xAxisData.map((item) => {
          //   return `${item.substr(0, 4)} 第${moment(
          //     item.split('~')[0]
          //   ).week()}周  `;
          // });
        }
        return {
          legend: {
            show: true,
            bottom: 0,
            icon: 'rect',
            itemHeight: 4,
            itemWidth: 16
          },
          grid: {
            top: 50,
            left: 50,
            right: 50,
            bottom: 100
          },
          dataZoom: [
            {
              show: true,
              bottom: 40
            }
          ],
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          series: [
            {
              data: heat1,
              type: 'line',
              name: '温度1',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#0052d9'
              },
              lineStyle: {
                color: '#0052d9'
              }
            },
            {
              data: heat2,
              type: 'line',
              name: '温度2',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#bbd3fb'
              },
              lineStyle: {
                color: '#bbd3fb'
              }
            },
            {
              data: heat3,
              type: 'line',
              name: '温度3',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#157a2c'
              },
              lineStyle: {
                color: '#157a2c'
              }
            },
            {
              data: heat4,
              type: 'line',
              name: '温度4',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#84ce94'
              },
              lineStyle: {
                color: '#84ce94'
              }
            }
          ]
        };
      },

      //
      // 请求实时数据
      async getRealData() {
        // await getRealData(this.info.id).then((res) => {
        //   let order = [
        //     'temp',
        //     'o_temp',
        //     'temp1',
        //     'temp2',
        //     'temp3',
        //     'temp4',
        //     'running_time',
        //     'remain_time'
        //   ];
        //   let data = res.data.sort((a, b) => {
        //     return order.indexOf(a.identifier) - order.indexOf(b.identifier);
        //   });
        //   console.log('asdasd', data);
        //   for (const item of data) {
        //     this.$set(this.realData, item.identifier, item);
        //   }
        // });
        this.initGauge();
      },
      //  mqtt处理数据
      initMqttData(items) {
        console.log('mqtt处理数据', items);
        for (const [key, obj] of Object.entries(items)) {
          this.realData[key].value = obj.value;
          this.realData[key].time = obj.time;
        }
        // let initGauge = debounce(this.initGauge, 1000);
        // initGauge();
      },
      handlsz() {
        this.$refs.runningDialog.open();
      },
      getMax(data, def = 100) {
        let half = def / 2;

        if (data <= def) {
          return def;
        }

        const n = data % half;
        const m = Math.floor(data / half);

        return n === 0 ? m * half : (m + 1) * half;
      }
    }
  };
</script>

<style lang="scss" scoped>
  $width: 280px;
  .red {
    color: #ff4949;
  }
  .green {
    color: #157a2c;
  }
  ::v-deep.extruder-container {
    .gauge-box {
      display: flex;
      height: 60vh;
      background-color: #fff;
      min-height: 500px;
      padding-bottom: 50px;
    }
    .chart-container {
      width: 60%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .chart-wrapper {
        width: 50%;
        height: 50%;
        // background: url('~@/assets/img/charts/dryingBox-bg.jpg') no-repeat 50%
        //   8px;
        // background-image: url('~@/assets/img/charts/dryingBox-bg.jpg');
        background-size: contain;
        // background-repeat: no-repeat;
        // background-position: center 20%;
        #chart,
        #chart1,
        #chart2,
        #chart3 {
          width: 100%;
          height: 100%;
        }
      }
    }
    .info-box {
      width: 40%;
      height: 100%;
      .el-form {
        flex: 1;
      }
      .el-form-item__label {
        font-weight: bold;
        font-size: 16px;
      }
    }
    // .gauge-box {
    //   display: flex;
    //   // align-items: stretch;
    //   height: 50vh;
    //   background: #fff;
    //   padding: 0 20px;
    //   // height: 50%;
    //   box-sizing: border-box;
    //   // min-height: 500px;
    //   font-weight: bold;
    //   .chart-container {
    //     flex: 6;
    //     // width: $width * 2 + 100px;

    //     display: flex;
    //     flex-wrap: wrap;

    //     .chart-wrapper {
    //       // float: left;
    //       margin-bottom: 20px;
    //       width: 50%;
    //       height: 50%;
    //       // flex: 1;
    //       // height: $width / (360 / 304);
    //       position: relative;
    //       display: flex;
    //       z-index: 1;
    //       > div {
    //         flex: 1;
    //         // width: 100%;
    //         // height: 100%;
    //         position: relative;
    //         z-index: 1;
    //       }
    //       img {
    //         width: 100%;
    //         position: absolute;
    //         left: 0;
    //         top: 0;
    //         z-index: 0;
    //       }
    //       #chart,
    //       #chart1,
    //       #chart2,
    //       #chart3 {
    //         width: 100%;
    //         // height: 100%;
    //       }

    //       &:nth-of-type(3),
    //       &:nth-of-type(1) {
    //         // margin-right: vw(80);
    //       }
    //     }
    //   }
    //   .info-box {
    //     flex: 4;
    //     display: flex;
    //     align-items: center;
    //     .el-form {
    //       flex: 1;
    //     }
    //     .el-form-item__label {
    //       font-weight: bold;
    //       font-size: 16px;
    //     }
    //   }
    // }

    .line-box {
      height: 500px;
      // height: 50%;
      background: #fff;
      padding: 20px;
      margin-top: 10px;
      box-sizing: border-box;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tools {
        display: flex;
        align-items: center;
        .el-button {
          margin: 0 12px;
        }
        .timeType {
          margin: 0 20px;
          // letter-spacing: 8px;
          span {
            cursor: pointer;
            margin: 0 4px;
          }
          span.active,
          span:hover {
            // border-bottom: 2px solid $mainColor;
            // color: $mainColor;
          }
        }
      }

      .el-icon-download {
        font-size: 18px;
        cursor: pointer;
      }

      .chart-wrapper {
        height: 400px;
        > div {
          height: 100%;
        }
      }

      .value-box {
        text-align: center;
        span {
          font-weight: bold;
          margin-left: 4px;
        }
        .average-text {
          color: #0052d9;
        }
      }
    }
  }
  .yx-warp {
    display: flex;
    align-items: center;
    .sz-span {
      border: 1px solid rgb(75, 121, 2);
      padding: 0 5px;
      color: rgb(75, 121, 2);
      height: 25px;
      line-height: 25px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
      margin-left: 20px;
    }
  }
</style>
