<script setup lang="ts">
import moment from 'moment';
import * as echarts from 'echarts';
import { ref } from 'vue';

const route = useRoute();
const router = useRouter();
const detail = ref();
const activeName = ref();
const myChart1 = ref(null);
const myChart2 = ref(null);
const myChart3 = ref(null);
const myChart4 = ref(null);
const myChart5 = ref(null);
const myChart6 = ref(null);

function dealData() {
  console.info(detail.value);
  detail.value = {
    ...detail.value,
    dataTimestamp: moment(Number(detail.value.dataTimestamp)).format('YYYY-MM-DD HH:mm:ss'),
    stateChinese: detail.value.state === 1 ? '在线' : detail.value.state === 2 ? '离线' : '报警',
    warningInfoData: detail.value.warningInfoData === 0 ? '无' : detail.value.state === 1 ? '异常' : '报警',
    updateShelfEndTime: moment(Number(detail.value.updateShelfEndTime)).format('YYYY-MM-DD HH:mm:ss')
  };
}
function initChart(a: any, b: any, c: any, d: any, e?: any, f?: any) {
  const instance = echarts.getInstanceByDom(c);
  if (instance) {
    echarts.dispose(instance);
  }
  const chart1 = echarts.init(c);
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    dataZoom: [
      {
        type: 'slider', // 滑动条
        show: true,
        xAxisIndex: [0], // 控制哪个x轴
        start: 0, // 初始显示范围的起始百分比
        end: 100, // 初始显示范围的结束百分比
        handleIcon:
          'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2,
          height: 10
        },
        labelFormatter: function (value) {
          return value;
        },
        // 阻止事件冒泡
        handleMove: function (params) {
          if (params.event.event) {
            params.event.event.stopPropagation();
          }
        },
        bottom: '8%',
        height: 10
      },
      {
        type: 'inside', // 内置型dataZoom组件，允许用户通过鼠标滚轮或触控缩放
        xAxisIndex: [0],
        start: 0,
        end: 100
      }
    ],
    grid: {
      left: '7%',
      right: '10%',
      bottom: '-100%',
      top: '5%',
      height: '82%'
    },
    xAxis: {
      type: 'category',
      data: b,
      boundaryGap: true, // 坐标轴两边留白策略
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: d + '(单位' + f + ')',
      nameTextStyle: {
        padding: [0, 0, e, 0],
        verticalAlign: 'bottom'
      },
      nameLocation: 'center'
    },
    series: [
      {
        data: a,
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#ff7f50' }, // 0% 处的颜色
              { offset: 1, color: '#87cefa' } // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  };
  chart1 && chart1.setOption(option);
}
function handleClick(a) {
  const nv = a.props.name;
  if (nv === 'first') {
    setTimeout(() => {
      initChart(detail.value.chart1Value, detail.value.chart1Index, myChart1.value, '直流电流参数', 25, 'A');
    }, 500);
  } else if (nv === 'second') {
    setTimeout(() => {
      initChart(detail.value.chart2Value, detail.value.chart2Index, myChart2.value, '直流电压参数', 25, 'V');
    }, 500);
  } else if (nv === 'third') {
    setTimeout(() => {
      initChart(detail.value.chart3Value, detail.value.chart3Index, myChart3.value, '直流功率参数', 25, 'kwh');
    }, 500);
  } else if (nv === 'fourth') {
    setTimeout(() => {
      initChart(detail.value.chart4Value, detail.value.chart4Index, myChart4.value, 'mppt电流参数', 25, 'A');
    }, 500);
  } else if (nv === 'fifth') {
    setTimeout(() => {
      initChart(detail.value.chart5Value, detail.value.chart5Index, myChart5.value, 'mppt电压参数', 25, 'V');
    }, 500);
  } else if (nv === 'sixth') {
    setTimeout(() => {
      initChart(detail.value.chart6Value, detail.value.chart6Index, myChart6.value, 'mppt功率参数', 25, 'kwh');
    }, 500);
  }
}

watch(
  activeName,
  (nv) => {
    if (nv === 'first') {
      setTimeout(() => {
        initChart(detail.value.chart1Value, detail.value.chart1Index, myChart1.value, '直流电流参数', 25, 'A');
      }, 500);
    }
  },
  { immediate: false }
);

onBeforeMount(() => {
  localStorage.setItem('detail', route.query.detail);
  detail.value = JSON.parse(localStorage.getItem('detail'));
  dealData();
  activeName.value = 'first';
});
onBeforeUnmount(() => {
  localStorage.removeItem('detail');
});
</script>

<template>
  <div class="container">
    <div class="head flex-c">
      <div class="row1 flex-a">
        <div class="nbqName">{{ detail.name }}</div>
        <div class="stationId">电站ID：{{ detail.stationId }}</div>
        <el-button icon="RefreshRight"></el-button>
      </div>
      <div class="row2">数据上报时间:{{ detail.dataTimestamp }}</div>
    </div>
    <el-card class="base-info">
      <div class="title">基本信息</div>
      <el-form style="margin-left: 20px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="名称：" prop="name">
              <div>{{ detail.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="SN：" prop="sn">
              <div>{{ detail.sn }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态：" prop="stateChinese">
              <div class="dot dot-g" v-if="detail.stateChinese === '在线'"></div>
              <div class="dot dot-r" v-if="detail.stateChinese === '报警'"></div>
              <div class="dot dot-o" v-if="detail.stateChinese === '离线'"></div>
              <div>{{ detail.stateChinese }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :prop="detail.model" label="型号：">
              <div>{{ detail.model }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="detail.stationName" label="所属电站：">
              <div>{{ detail.stationName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="detail.updateShelfEndTime" label="质保结束时间：">
              <div>{{ detail.updateShelfEndTime }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :prop="detail.type" label="逆变器类型：">
              <div>{{ detail.type || '暂无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="detail.nationalStandardstr" label="国家标准：">
              <div>{{ detail.nationalStandardstr }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="detail.collectorId" label="所属采集器：">
              <div>{{ detail.collectorId }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="block-2 flex">
      <el-card class="in-time">
        <div class="title">实时数据</div>
        <el-form label-position="top" class="intime-form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="实时功率" prop="pac">
                <div>{{ detail.pac }}{{ detail.pacStr }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="当日能量" prop="eToday">
                <div>{{ detail.eToday }}{{ detail.eTodayStr }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="满发小时数" prop="fullHour">
                <div>{{ detail.fullHour }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="当月能量" prop="eMonth">
                <div>{{ detail.eMonth }}{{ detail.eMonthStr }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="报警信息" prop="warningInfoData">
                <div>{{ detail.warningInfoData }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="当年能量" prop="eYear">
                <div>{{ detail.eYear }}{{ detail.eYearStr }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="逆变器温度" prop="inverterTemperature">
                <div>{{ detail.inverterTemperature }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总能量" prop="eTotal">
                <div>{{ detail.eTotal }}{{ detail.eTotalStr }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="in-time">
        <div class="title">功率数据</div>
        <el-form label-position="top" class="intime-form">
          <el-row>
            <el-col :span="8">
              <el-form-item label="逆变器无功功率" prop="reactivePower">
                <div>{{ detail.reactivePower }}{{ detail.reactivePowerStr }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="逆变器视在功率" prop="apparentPower">
                <div>{{ detail.apparentPower }}{{ detail.apparentPowerStr }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="逆变器总直流输入功率" prop="dcPac">
                <div>{{ detail.dcPac }}{{ detail.dcPacStr }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="电网总有功功率" prop="pSum">
                <div>{{ detail.psum }}{{ detail.psumStr }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="功率百分比" prop="pacPec">
                <div>{{ detail.pacPec }}%</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-card class="chart-block">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="直流电流参数" name="first">
          <div class="chartDom" ref="myChart1"></div>
        </el-tab-pane>
        <el-tab-pane label="直流电压参数" name="second">
          <div class="chartDom" ref="myChart2"></div>
        </el-tab-pane>
        <el-tab-pane label="直流功率参数" name="third">
          <div class="chartDom" ref="myChart3"></div>
        </el-tab-pane>
        <el-tab-pane label="mppt电流参数" name="fourth">
          <div class="chartDom" ref="myChart4"></div>
        </el-tab-pane>
        <el-tab-pane label="mppt电压参数" name="fifth">
          <div class="chartDom" ref="myChart5"></div>
        </el-tab-pane>
        <el-tab-pane label="mppt功率参数" name="sixth">
          <div class="chartDom" ref="myChart6"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.container {
  .head {
    margin-top: 10px;
    margin-left: 40px;
    font-size: 16px;
    .row1 {
      .stationId {
        margin-left: 10px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
      }
      .el-button {
        width: 30px;
        height: 30px;
        margin-left: 10px;
      }
    }
  }
  .base-info {
    width: 100%;
    min-height: 100px;
    margin-left: 40px;
    margin-top: 10px;
    .title {
      margin-bottom: 10px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      margin-right: 5px;
      &-g {
        background-color: #1ab394;
      }

      &-r {
        background-color: red;
      }

      &-o {
        background-color: gray;
      }
    }
  }
  .block-2 {
    width: 100%;
    height: 280px;
    margin-left: 40px;
    margin-top: 10px;
    justify-content: space-between;
    .el-card {
      width: 49.7%;
      height: 100%;
    }
    .in-time {
      .title {
        margin-bottom: 15px;
      }
      :deep(.intime-form) {
        margin-left: 20px;
        .el-form-item {
          .el-form-item__label {
            margin-bottom: 0;
          }
          .el-form-item__content {
            height: 12px;
          }
        }
      }
    }
  }
  .chart-block {
    width: 50%;
    height: 280px;
    margin-left: 40px;
    margin-top: 10px;
    .chartDom {
      width: 800px;
      height: 200px;
    }
  }
}
</style>
