<template>
  <!-- 物联数据-挤压机-->
  <div class="extruder-container">
    <div class="gauge-box">
      <div class="chart-container">
        <div ref="chart"></div>
      </div>
      <div class="info-box">
        <el-form label-width="150px" style="width: 100%">
          <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"></chart_temp>
    <chart_speed :id="info.id"></chart_speed>
    <chart_pressure :id="info.id"></chart_pressure>
    <runningDialog
      ref="runningDialog"
      :id="info.id"
      @succeed="getRealData"
    ></runningDialog>
  </div>
</template>

<script>
  import chart_pressure from './components/chart_pressure.vue';
  import chart_speed from './components/chart_speed.vue';
  import chart_temp from './components/chart_temp.vue';
  import runningDialog from '../components/runningDialog.vue';
  // import { getRealData } from '@/api/ledgerAssets/equipment.js';
  // import mqtt from '../mixins/mqtt.js';
  // import { debounce } from 'lodash';
  export default {
    // mixins: [mqtt],
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    components: {
      chart_temp,
      chart_speed,
      chart_pressure,
      runningDialog
    },

    data() {
      return {
        // 实时数据
        realData: {},
        dict: {
          // 运行状态
          status: {
            //0-停止,1-启动,2-定值停止,3-定值启动
            0: '停止',
            1: '启动',
            2: '定值停止',
            3: '定值启动'
          }
        },
        // mqtt 订阅类别
        topIc_type: 'EXTRUDER_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: {
      initGauge() {
        let myChart = this.$echarts.init(this.$refs.chart);

        // const max = data <= 100 ? 100 : Math.floor(data * 1.2)
        // const min = 0

        let option = {
          tooltip: {
            show: false
          },
          series: [
            {
              zlevel: 1,
              ...this.getGaugeSeries(),
              center: ['25%', '28%'],

              splitNumber: 4,
              min: 0,
              max: this.getMax(this.info.measure_pressure || 0, 120),
              name: 'Pressure',
              backgroundColor: '#000',
              data: [
                {
                  value: this.realData.measure_pressure
                    ? this.realData.measure_pressure.value
                    : 0,
                  name: '压力表'
                }
              ],
              detail: {
                width: '60%',
                lineHeight: 40,
                height: 40,
                fontSize: 18,
                borderRadius: 8,
                offsetCenter: [0, '45%'],
                valueAnimation: true,
                formatter: function (value) {
                  return `${value}kg/cm²`;
                }
              }
            },
            {
              ...this.getGaugeSeriesBg(),
              center: ['25%', '28%']
            },

            {
              ...this.getGaugeSeries(),
              zlevel: 1,
              splitNumber: 4,
              min: 0,
              max: this.getMax(this.info.speed || 0, 80),
              center: ['75%', '28%'],
              name: 'Pressure1',
              data: [
                {
                  value: this.realData.speed ? this.realData.speed.value : 0,
                  name: '速度表'
                }
              ],
              detail: {
                width: '60%',
                lineHeight: 40,
                height: 40,
                fontSize: 18,
                borderRadius: 8,
                offsetCenter: [0, '45%'],
                valueAnimation: true,
                formatter: function (value) {
                  return `${value}m/s`;
                }
              }
            },
            {
              ...this.getGaugeSeriesBg(),
              center: ['75%', '28%']
            },
            {
              ...this.getGaugeSeries(),
              zlevel: 1,
              splitNumber: 4,
              min: 0,
              max: this.getMax(this.info.oil_temp || 0, 400),
              center: ['25%', '75%'],
              name: 'Pressure2',
              data: [
                {
                  value: this.realData.oil_temp
                    ? this.realData.oil_temp.value
                    : 0,
                  name: '油温表'
                }
              ],
              detail: {
                width: '60%',
                lineHeight: 40,
                height: 40,
                fontSize: 18,
                borderRadius: 8,
                offsetCenter: [0, '45%'],
                valueAnimation: true,
                formatter: function (value) {
                  return `${value}度`;
                }
              }
            },
            {
              ...this.getGaugeSeriesBg(),
              center: ['25%', '75%']
            }
          ]
        };
        myChart.setOption(option);
      },

      getGaugeSeriesBg() {
        return {
          data: [],
          startAngle: 360,
          endAngle: 0,
          radius: '41%',
          type: 'gauge',
          detail: {
            show: false
          },
          title: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 100,
              color: [[1, '#fff']]
            }
          },
          progress: {
            show: false
          },
          anchor: {
            show: false
          },
          pointer: {
            show: false
          }
        };
      },
      getGaugeSeries() {
        return {
          startAngle: 200,
          endAngle: -20,
          radius: '40%',
          type: 'gauge',
          detail: {
            valueAnimation: true,
            formatter: '{value}'
          },
          title: {
            show: true,
            offsetCenter: [0, '65%'],
            color: '#9e9e9e',
            fontSize: 14
          },
          axisLabel: {
            rotate: 360,
            distance: -38,
            color: '#666666',
            fontSize: 18
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 12,
              // color:'#dddefd',
              color: [[1, '#B9BEFF']]
            }
          },
          progress: {
            show: true,
            roundCap: true,
            width: 12,
            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: true,
            showAbove: true
          },
          pointer: {
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '75%',
            width: 12,
            offsetCenter: [0, 8]
            // itemStyle: {
            // 	color: '#7a71ff',
            // }
          }
        };
      },

      //
      // 请求实时数据
      async getRealData() {
        // await getRealData(this.info.id).then((res) => {
        //   let data = res.data;
        //   console.log("实时数据", 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>
  .red {
    color: #ff4949;
  }
  .green {
    color: #157a2c;
  }
  .extruder-container {
    .gauge-box {
      display: flex;
      align-items: stretch;
      background: #fff;
      padding: 0 20px;
      height: 500px;
      font-weight: bold;
      .chart-container {
        flex: 1;
        display: flex;
        > div {
          flex: 1;
        }
      }
      .info-box {
        flex: 1;
      }
    }

    .line-box {
      height: 500px;
      background: #fff;
      padding: 20px;
      margin-top: 10px;

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

      .tools {
        display: flex;
        align-items: center;
        .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>
