<template>
  <div class="data-meter-show">
    <br/>
    <div v-if="dashboardData.length > 0" class="meter-box">
      <div class="meter-item" v-for="(item, index) in dashboardData" :key="index">
        <jg-chart :_height="300" :option="item"/>
      </div>
      <!--<div class="meter-item">
        <div class="current-value">
          <div class="desc">当前数值</div>
          <div class="current-value-item">
            <div style="margin-right: 8px;font-weight: bolder;width: 140px">温度 (℃)</div>
            <div>
              <el-input :value="currentValue.temperature" size="medium"/>
            </div>
          </div>
          <div class="current-value-item">
            <div style="margin-right: 8px;font-weight: bolder;width: 140px">压力 (MPa)</div>
            <div>
              <el-input :value="currentValue.pressure" size="medium"/>
            </div>
          </div>
          <div class="current-value-item">
            <div style="margin-right: 8px;font-weight: bolder;width: 140px">含水量 (PPm)</div>
            <div>
              <el-input :value="currentValue.water" size="medium"/>
            </div>
          </div>
          <div class="current-value-item">
            <div style="margin-right: 8px;font-weight: bolder;width: 140px">差压 (Pa)</div>
            <div>
              <el-input :value="currentValue.pressureDiff" size="medium"/>
            </div>
          </div>
          <div class="current-value-item">
            <div style="margin-right: 8px;font-weight: bolder;width: 140px">流量 (万m³/D)</div>
            <div>
              <el-input :value="currentValue.flow" size="medium"/>
            </div>
          </div>
        </div>
      </div>-->

      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <div v-else>
      <el-empty/>
    </div>
  </div>
</template>

<script>
import JgChart from '@/components/JgChart'

export default {
  name: 'DataMeterShow',
  components: { JgChart },
  props: {
    message: {
      type: Array,
      default: () => []
    },
    collectEntity: {
      type: Object,
      default: () => {}
    },
  },
  data () {
    return {
      baseOption: {
        title: {
          text: '硝化机X2',
          textStyle: {
            color: '#333333',
            fontWeight: 'bolder',
            fontSize: 20
          },
          bottom: '5%',
          left: 'center'
        },
        tooltip: {},
        series: [
          {
            radius: '100%',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 8,
                opacity: 1,
                color: [
                  [1, '#BFBFBF'],
                ]
              }
            },
            axisTick: {
              show: true
            },
            splitLine: {
              length: 10,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 16,
              color: '#333333',
              fontSize: 16,
              fontWeight: 'bold',
            },
            pointer: {
              width: 10,
              length: '60%',
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2,
                itemStyle: {
                  color: '#A20D13',
                  borderColor: '#FBB61B'
                },
              }
            },
            data: [
              { value: '50', itemStyle: { color: '#A20D13' }, name: '振动', title: { show: false }, detail: { formatter: '{value} mm/s', offsetCenter: [0, '35%'], fontSize: 18, } },
              { value: '80', itemStyle: { color: 'green' }, name: '电流', title: { show: false }, detail: { formatter: '{value} A', offsetCenter: [0, '50%'], fontSize: 18, } },
            ],
          }
        ]
      },
      currentValue: {
        temperature: 70,
        pressure: 70.00,
        water: 70.45,
        pressureDiff: 70.01,
        flow: 70.00,
      },
      tagIdList: [],
      dashboardData: [],
    }
  },
  watch: {
    collectEntity: {
      handler(newVal) {
        if (newVal.tagList.length > 0) {
          this.tagIdList = newVal.tagList.map(e => e.id)
        }
      },
      immediate: true,
      deep: true
    },
    message: {
      handler(newVal) {
        if (this.tagIdList.length > 0) {
          this.dashboardData.length = 0
          for (const tagId of this.tagIdList) {
            for (const e of newVal) {
              if (tagId + '' === e.id) {
                const option = {
                  title: {
                    text: this.collectEntity.second + ' - ' + e.desc,
                    textStyle: {
                      color: '#333333',
                      fontWeight: 'bolder',
                      fontSize: 20
                    },
                    bottom: '1%',
                    left: 'center'
                  },
                  tooltip: {},
                  series: [
                    {
                      radius: '100%',
                      type: 'gauge',
                      axisLine: {
                        lineStyle: {
                          width: 8,
                          opacity: 1,
                          color: [
                            [1, '#BFBFBF'],
                          ]
                        }
                      },
                      axisTick: {
                        show: true
                      },
                      splitLine: {
                        length: 10,
                        lineStyle: {
                          width: 2,
                          color: '#999'
                        }
                      },
                      axisLabel: {
                        distance: 16,
                        color: '#333333',
                        fontSize: 16,
                        fontWeight: 'bold',
                      },
                      pointer: {
                        width: 10,
                        length: '60%',
                      },
                      anchor: {
                        show: true,
                        showAbove: true,
                        size: 10,
                        itemStyle: {
                          borderWidth: 2,
                          itemStyle: {
                            color: '#A20D13',
                            borderColor: '#FBB61B'
                          },
                        }
                      },
                      min: e.minValue,
                      max: e.maxValue,
                      data: [
                        { value: e.value, itemStyle: { color: '#A20D13' }, detail: { formatter: '{value} ' + e.unit, offsetCenter: [0, '35%'], fontSize: 18, } },
                      ],
                    }
                  ]
                }
                this.dashboardData.push(option)
              }
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    getOption(data) {
      const option = {
        ...this.baseOption,
      }
      option.title.text = data.title
      option.series[0].data = data.data
      return option
    },
  },
}
</script>

<style lang="less" scoped>
  .data-meter-show {
    margin-bottom: 24px;

    .meter-box {
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0.2rem 0.2rem 0.2rem #aaa7a7, -0.1rem -0.1rem 0.2rem #FFFFFF;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .meter-item {
        width: 32%;
        height: 350px;
        margin: 8px;
        border-radius: 15px;
        box-shadow: inset 0.2rem 0.2rem 0.5rem #aaa7a7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      i {
        width: 32%;
        margin: 0 8px;
      }
    }

    .current-value {

      .desc {
        font-size: 22px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 24px;
      }

      .current-value-item {
        display: flex;
        align-items: center;
        margin: 16px 0;
        font-size: 16px;
        font-weight: 400;
      }
    }

    /deep/ .el-input__inner {
      background-color: #ebebeb;
      box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
      border: none;
      font-size: 16px;
      color: #333333;
    }
  }
</style>
