<template>
  <div class="pureWaterPage">

    <!-- 左侧：设备面板 -->
    <div class="left-panel">
      <div class="device-name-bar">
        <span class="dn-name">{{ propsData.deviceName || '设备名称' }}</span>
        <span class="dn-sep"> – </span>
        <span class="dn-status" :class="propsData.deviceStatus == '0' ? 'ok' : 'err'">
          {{ propsData.deviceStatus == '0' ? '正常' : '报警'}}
        </span>
      </div>
      <div class="device-photo-area">
        <!--<img v-if="propsData.deviceImg" :src="propsData.deviceImg" class="photo"/>-->
        <img v-if="propsData.deviceCode == '9c-b9-f7-f5-de-b3'" :src="require('@/assets/ZDimages/pureWater/shipinlou.png')" class="photo"/>
        <img v-if="propsData.deviceCode == '58-73-e7-09-ff-0d'" :src="require('@/assets/ZDimages/pureWater/shipinlou.png')" class="photo"/>
        <img v-if="propsData.deviceCode == '98-f1-8a-16-78-22'" :src="require('@/assets/ZDimages/pureWater/likelou.png')" class="photo"/>
        <img v-if="propsData.deviceCode == '38-3b-2f-73-88-86'" :src="require('@/assets/ZDimages/pureWater/likelou.png')" class="photo"/>
        <!--<div v-else class="photo-placeholder"></div>-->
      </div>
    </div>

    <!-- 右侧：数据网格面板 -->
    <div class="right-panel">

      <!-- Row 1: 产水量统计 -->
      <div class="grid-row row-1">
        <!--<div class="grid-cell center-cell">-->
          <!--<div class="cell-label">年度产水量</div>-->
          <!--<div class="cell-num">{{ propsData.annualOutput || 0 }}<span class="num-unit">M³</span></div>-->
        <!--</div>-->
        <!--<div class="grid-cell center-cell">-->
          <!--<div class="cell-label">当月</div>-->
          <!--<div class="cell-num">-->
            <!--{{ propsData.monthlyOutput || 0 }}<span class="num-unit">M³</span>-->
            <!--&lt;!&ndash;<i class="num-trend" :class="propsData.isRiseMonthlyOutput ? 'trend-up' : 'trend-down'">&ndash;&gt;-->
            <!--<i class="num-trend trend-down">-->
              <!--{{ propsData.isRiseMonthlyOutput ? '↑' : '↓' }}-->
            <!--</i>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="grid-cell center-cell">-->
          <!--<div class="cell-label">去年同期</div>-->
          <!--<div class="cell-num">{{ propsData.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>-->
        <!--</div>-->
      </div>

      <!-- Row 2: 仪表盘 -->
      <div class="grid-row row-2">
        <div class="grid-cell chart-cell">
          <div class="cell-label">水箱液位</div>
          <div class="echart-box" :id="'tank_' + uid"></div>
        </div>
        <div class="grid-cell chart-cell">
          <div class="cell-label">进水水温</div>
          <div class="echart-box" :id="'inlet_' + uid"></div>
        </div>
        <div class="grid-cell chart-cell">
          <div class="cell-label">出水温度</div>
          <div class="echart-box" :id="'outlet_' + uid"></div>
        </div>
      </div>

      <!-- Row 3: 其他指标 -->
      <div class="grid-row row-3">
        <!-- 管网流量 -->
        <div class="grid-cell left-cell">
          <div class="cell-label">管网流量</div>
          <div class="cell-num num-flow" style="text-align: center;width:200px;">{{ propsData.pipeFlowRate || 0 }}<span class="num-unit">L/min</span></div>
          <!--<div class="flow-track">-->
            <!--<div class="flow-bar" :style="{width: flowPercent + '%'}"></div>-->
          <!--</div>-->
        </div>
        <!-- 水质电阻率 -->
        <div class="grid-cell left-cell">
          <div class="cell-label">水质电阻率</div>
          <div class="max-resist-line">
            <div class="resist-line">
              <i class="resist-dot dot-green"></i>
              <span class="resist-key">进水:</span>
              <span class="resist-val">{{ propsData.inletResistivity || 0 }} MΩ</span>
            </div>
            <div class="resist-line">
              <i class="resist-dot dot-yellow"></i>
              <span class="resist-key">出水:</span>
              <span class="resist-val">{{ propsData.outletResistivity || 0 }} MΩ</span>
            </div>
          </div>
        </div>
        <!-- 回水压力 -->
        <div class="grid-cell left-cell">
          <div class="cell-label">回水压力</div>
          <div class="max-resist-line-2">
            <div class="num-pressure">{{ propsData.returnPressure || 0 }}<span class="num-unit">bar</span></div>
            <div class="pressure-sub">最低: {{ propsData.minReturnPressure || 0 }} bar</div>
            <div class="pressure-sub">最高: {{ propsData.maxReturnPressure || 0 }} bar</div>
          </div>
        </div>
      </div>

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

<script>
import 'echarts-liquidfill/src/liquidFill.js'
export default {
  name: 'pureWaterPage',
  props: {
    propsData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      uid: Math.random().toString(36).slice(2, 10),
      tankChart: null,
      inletChart: null,
      outletChart: null,
    }
  },
  computed: {
    flowPercent() {
      const flow = this.propsData.pipeFlowRate || 0;
      const max = this.propsData.pipeFlowRateMax || 100;
      return Math.min(100, (flow / max) * 100);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  watch: {
    propsData: {
      deep: true,
      handler() {
        this.updateCharts();
      }
    }
  },
  beforeDestroy() {
    if (this.tankChart) this.tankChart.dispose();
    if (this.inletChart) this.inletChart.dispose();
    if (this.outletChart) this.outletChart.dispose();
  },
  methods: {
    initCharts() {
      var tankEl = document.getElementById('tank_' + this.uid);
      var inletEl = document.getElementById('inlet_' + this.uid);
      var outletEl = document.getElementById('outlet_' + this.uid);
      if (tankEl) {
        this.tankChart = this.$echarts.init(tankEl);
        this.tankChart.setOption(this.getTankOpt());
      }
      if (inletEl) {
        this.inletChart = this.$echarts.init(inletEl);
        this.inletChart.setOption(this.getTempOpt(this.propsData.inletWaterTemp || 0));
      }
      if (outletEl) {
        this.outletChart = this.$echarts.init(outletEl);
        this.outletChart.setOption(this.getTempOpt(this.propsData.outletWaterTemp || 0));
      }
    },
    updateCharts() {
      if (this.tankChart) this.tankChart.setOption(this.getTankOpt());
      if (this.inletChart) this.inletChart.setOption(this.getTempOpt(this.propsData.inletWaterTemp || 0));
      if (this.outletChart) this.outletChart.setOption(this.getTempOpt(this.propsData.outletWaterTemp || 0));
    },
    // 水箱液位 - 水球图
    getTankOpt() {
      var val = this.propsData.tankLevel || 0;
      var cap = this.propsData.tankCapacity || 350;
      var ratio = val / cap;
      return {
        backgroundColor: 'transparent',
        title: [
          {
            text: val + 'L',
            left: '50%',
            top: '35%',
            textAlign: 'center',
            textStyle: {
              fontSize: 22,
              fontWeight: 'bold',
              color: '#FFFFFF'
            }
          },
          {
            text: '容量' + cap + 'L',
            left: '50%',
            top: '55%',
            textAlign: 'center',
            textStyle: {
              fontSize: 12,
              fontWeight: '400',
              color: 'rgba(255,255,255,0.55)'
            }
          }
        ],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '55%'],
          amplitude: 12,
          waveLength: '120%',
          backgroundStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                { offset: 0, color: 'rgba(0, 100, 135, 0.2)' },
                { offset: 0.8, color: 'rgba(0, 80, 115, 0.3)' },
                { offset: 1, color: 'rgba(0, 60, 95, 0.4)' }
              ],
              globalCoord: false
            }
          },
          color: [
            {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: '#5DCCFF' },
                { offset: 1, color: '#15827C' }
              ],
              globalCoord: false
            },
            {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: '#5DCCFF' },
                { offset: 1, color: '#15827C' }
              ],
              globalCoord: false
            },
            {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(93, 204, 255, 0.6)' },
                { offset: 1, color: 'rgba(21, 130, 124, 0.6)' }
              ],
              globalCoord: false
            }
          ],
          data: [ratio + 0.02, { value: ratio - 0.01, direction: 'left' }, ratio - 0.01],
          label: {
            normal: {
              formatter: ''
            }
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(0, 230, 255, 0.4)'
            },
            borderDistance: 3
          }
        }]
      };
    },
    // 温度 - 半圆仪表盘（带指针+多色弧）
    getTempOpt(val) {
      var max = this.propsData.tempMax || 100;
      return {
        backgroundColor: 'transparent',
        series: [{
          type: 'gauge',
          startAngle: 225,
          endAngle: -45,
          radius: '82%',
          center: ['50%', '60%'],
          min: 0,
          max: max,
          splitNumber: 10,
          axisLine: {
            lineStyle: {
              width: 12,
              color: [
                [0.2, '#30BF78'],
                [0.5, '#A0D911'],
                [0.8, '#FAAD14'],
                [1, '#F4664A']
              ]
            }
          },
          pointer: {
            show: true,
            length: '60%',
            width: 4,
            itemStyle: { color: '#FFFFFF' }
          },
          anchor: {
            show: true,
            size: 8,
            showAbove: true,
            itemStyle: { color: '#FFFFFF' }
          },
          axisTick: {
            show: true,
            splitNumber: 5,
            length: 4,
            lineStyle: { color: '#FFFFFF', width: 1 }
          },
          splitLine: {
            show: true,
            length: 8,
            lineStyle: { color: '#FFFFFF', width: 2 }
          },
          axisLabel: {
            show: true,
            color: '#FFFFFF',
            fontSize: 11,
            distance: 14,
            formatter: function(value) {
              if (value === 0 || value === 20 || value === 50 || value === 80 || value === 100) {
                return value;
              }
              return '';
            }
          },
          title: { show: false },
          detail: {
            valueAnimation: true,
            formatter: '{value}°C',
            color: '#20EEFA',
            fontSize: 20,
            fontWeight: 'bold',
            offsetCenter: [0, '70%']
          },
          data: [{ value: val }]
        }]
      };
    }
  }
}
</script>

<style scoped lang="scss">
.pureWaterPage {
  width: 1280px;
  height: 422px;
  display: flex;
  overflow: hidden;

  /* ===== 左侧设备面板 ===== */
  .left-panel {
    width: 500px;
    flex-shrink: 0;
    height: 422px;
    display: flex;
    flex-direction: column;

    .device-name-bar {
      padding: 16px 18px 16px;
      font-size: 24px;
      font-weight: 700;
      flex-shrink: 0;
      line-height: 1;
      text-align: center;
      .dn-name { color: #FFFFFF;font-weight:500; }
      .dn-sep  { color: rgba(255,255,255,0.5); }
      .ok  { color: #70B607; }
      .err { color: #FF4D4F; }
    }

    .device-photo-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .photo {
        max-width: 327px;
        max-height: 362px;
        object-fit: contain;
      }

      .photo-placeholder {
        width: 327px;
        height: 362px;
        border: 2px dashed rgba(0,230,255,0.2);
        border-radius: 4px;
      }
    }
  }

  /* ===== 右侧数据网格面板 ===== */
  .right-panel {
    flex: 1;
    /*height: 470px;*/
    height: 422px;
    border: 1px solid #00E6FF;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* --- 行 --- */
    .grid-row {
      display: flex;
      /*border-bottom: 1px solid rgba(0,230,255,0.4);*/
      &:last-child { border-bottom: none; }
    }

    /* --- 单元格通用 --- */
    .grid-cell {
      position: relative;
      overflow: hidden;
      flex: 1;
      /*border-right: 1px solid rgba(0,230,255,0.4);*/
      box-sizing: border-box;
      &:last-child { border-right: none; }
    }

    /* 居中单元格 */
    .center-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    /* 图表单元格 */
    .chart-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 28px 6px 4px;
      .echart-box {
        flex: 1;
        width: 100%;
      }
    }
    .chart-cell:nth-child(1){
      padding: 38px 6px 4px;
    }

    /* 左对齐单元格 */
    .left-cell {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 14px 22px;
    }

    /* --- 标签 --- */
    .cell-label {
      font-size: 18px;
      color: #FFFFFF;
      letter-spacing: 1px;
      margin-bottom: 10px;
      flex-shrink: 0;
      position: absolute;
      top:1px;
      left:0;
      width:260px;
      text-align: center;
      line-height:40px;
      background-color: #052628;
    }
    .grid-cell:nth-child(3){
      .cell-label{
        width:258px!important;
      }
    }

    /* --- 数值 --- */
    .cell-num {
      margin-top:30px;
      font-size: 32px;
      font-weight: 700;
      color: #00E6FF;
      font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
      display: flex;
      align-items: baseline;
      line-height: 1;

      .num-unit {
        font-size: 22px;
        font-weight: 700;
        margin-left: 2px;
        color: #00E6FF;
      }

      .num-trend {
        font-style: normal;
        font-size: 16px;
        margin-left: 4px;
        font-weight: 700;
        &.trend-up   { color: #FF4D4F; }
        &.trend-down { color: #52C41A; }
      }
    }

    /* ====== Row 1: 产水量统计 ====== */
    .row-1 {
      /*height: 148px;*/
      height: 0px;
      flex-shrink: 0;
    }

    /* ====== Row 2: 仪表盘 ====== */
    .row-2 {
      height: 224px;
      flex-shrink: 0;

      .cell-label {
        margin-bottom: 4px;
      }
    }

    /* ====== Row 3: 其他指标 ====== */
    .row-3 {
      flex: 1;

      .cell-label {
        margin-top: 20px;
      }
      /* 管网流量 */
      .num-flow {
        font-size: 28px;
        margin-bottom: 12px;
        margin-top:60px;
        margin-left:60px;
      }

      .flow-track {
        width: 100%;
        height: 8px;
        background: rgba(0,230,255,0.1);
        border-radius: 4px;
        overflow: hidden;

        .flow-bar {
          height: 100%;
          background: linear-gradient(90deg, #15827C, #00E6FF);
          border-radius: 4px;
          transition: width 0.4s;
        }
      }

      /* 水质电阻率 */
      .max-resist-line{
        border:1px solid #00E6FF;
        padding:20px 10px;
        margin-top:60px;
        border-radius:6px;
      }
      .resist-line {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        &:last-of-type { margin-bottom: 0; }

        .resist-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          flex-shrink: 0;
          margin-right: 8px;
          display: inline-block;
          font-style: normal;
        }

        .dot-green  { background: #1890FF; }
        .dot-yellow { background: #52C41A; }

        .resist-key {
          font-size: 20px;
          color: #FFFFFF;
          margin-right: 4px;
          white-space: nowrap;
        }

        .resist-val {
          font-size: 22px;
          font-weight: 700;
          color: #00E6FF;
          font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
          margin-right: 4px;
          line-height: 1;
        }
      }

      /* 回水压力 */
      .max-resist-line-2{
        border:1px solid #00E6FF;
        padding:12px 10px;
        margin-top:60px;
        border-radius:6px;
      }
      .num-pressure {
        margin-bottom: 8px;
        color:#00E6FF;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
      }

      .pressure-sub {
        text-align: center;
        font-size: 18px;
        color: rgba(255,255,255,0.55);
        line-height:24px;
      }
    }
  }
}
</style>
