<template>
  <!-- 数据状态- 故障及离线设备分析 -->
  <div class="equipFault">
    <div class="tabsBtn">
      <el-button
        :type="tabIndex == item.key ? 'primary' : ''"
        v-for="item in tabsArr"
        :key="item.key"
        @click="changeTab(item.key)"
      >
        {{ item.name }}
      </el-button>
    </div>
    <div class="content">
      <!-- 电量及信号分析 -->
      <div id="lightEchart-nopx" v-if="tabIndex == 1"></div>
      <!-- 历次故障分析 -->
      <el-table :data="tableDataError" border height="200" v-if="tabIndex == 2">
        <el-table-column prop="typeName" label="序号"></el-table-column>
        <el-table-column prop="typeName" label="离线开始时间"></el-table-column>
        <el-table-column prop="typeName" label="恢复日期"></el-table-column>
        <el-table-column prop="typeName" label="持续时长"></el-table-column>
        <el-table-column prop="typeName" label="原因分析"></el-table-column>
        <el-table-column prop="typeName" label="状态"></el-table-column>
      </el-table>
      <!-- 运维记录分析 -->
      <el-table :data="tableDataYW" border height="200" v-if="tabIndex == 3">
        <el-table-column prop="typeName" label="序号"></el-table-column>
        <el-table-column prop="typeName" label="养护类型"></el-table-column>
        <el-table-column prop="typeName" label="计划养护时间"></el-table-column>
        <el-table-column prop="typeName" label="实际养护时间"></el-table-column>
        <el-table-column prop="typeName" label="实施人"></el-table-column>
        <el-table-column prop="typeName" label="片区责任人"></el-table-column>
        <el-table-column prop="typeName" label="行为分析"></el-table-column>
      </el-table>
      <!-- 问题建议 -->
      <div class="suggest-nopx" v-if="tabIndex == 4">
        1、电池电量消耗过快，最近十四天电量从80%降到无法开机，无法支撑1个月进行一次运维的频率，建议联系厂家售后联系更换电池；<br />
        2、信号不稳定，最近十四天信号频繁出现波动，可能影响数据向平台的传输；<br />
        3、运维未按照要求进行，最近两个月没有运维记录，最近一年出现4次设备故障，建议联系厂家售后落实月度巡查机制。
      </div>
    </div>
  </div>
</template>
<script setup>
import {} from '@/api/dataAnalysis/syntherticData';

const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const tabIndex = ref('1');
const tabsArr = ref([
  { name: '电量及信号分析', key: '1' },
  { name: '历次故障分析', key: '2' },
  { name: '运维记录分析', key: '3' },
  { name: '问题监测建议', key: '4' },
]);
const tableDataError = ref([{ typeName: '1' }, { typeName: '1' }, { typeName: '1' }]);
const tableDataYW = ref([{ typeName: '1' }, { typeName: '1' }, { typeName: '1' }]);

// tab切换
function changeTab(key) {
  tabIndex.value = key;
  if (key == 1) {
    setTimeout(() => {
      intChart();
    });
  }
}

// echarts
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById('lightEchart-nopx'));
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'none',
      },
    },
    legend: {
      data: ['电量', '信号量'],
      top: 0,
    },
    xAxis: {
      type: 'category',
      data: ['01:00', '02:00', '03:00'],
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      axisLabel: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true, // 显示网格线
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '电量',
        type: 'line',
        smooth: true,
        data: [12, 13, 24],
      },
      {
        name: '信号量',
        type: 'line',
        smooth: true,
        data: [11, 16, 28],
      },
    ],
  });
}
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  changeTab('1');
  window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss">
.equipFault {
  width: 100%;
  .tabsBtn {
    text-align: center;
  }
  .content {
    margin-top: 15px;
    #lightEchart-nopx {
      width: 100%;
      height: 200px;
    }
    .suggest-nopx {
      line-height: 26px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ebf5ff;
      height: 200px;
      overflow: auto;
    }
  }
}
</style>