<template>
  <!-- 数据状态- 故障及离线设备分析 -->
  <div class="equipFault">
    <div class="tabsBtn">
      <el-button :type="tabIndex == item.key ? 'warning' : ''" 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-loading="echartLoading" v-if="tabIndex == 1 && chartOption.xAxis.data.length > 0"></div>
      <!-- 暂无数据 -->
      <el-empty :image-size="80" v-if="tabIndex == 1 && chartOption.xAxis.data.length == 0" />
      <!-- 历次故障分析 -->
      <el-table v-loading="tableLoadingError" :data="tableDataError" border height="200" v-if="tabIndex == 2">
        <el-table-column prop="fromDatetime" label="离线开始时间"></el-table-column>
        <el-table-column prop="toDatetime" label="恢复日期"></el-table-column>
        <el-table-column prop="durationTime" label="持续时长"></el-table-column>
        <el-table-column prop="faultType" label="故障类型">
          <template #default="scope">
            <span>{{
              scope.row.faultType == 'low_battery'
                ? '低电压'
                : scope.row.faultType == 'low_signal'
                ? '低信号'
                : scope.row.faultType == 'exception'
                ? '异常值'
                : scope.row.faultType == 'offline'
                ? '离线'
                : '--'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">工单处理完成</template>
        </el-table-column>
      </el-table>
      <!-- 运维记录分析 -->
      <el-table :data="tableDataYW" border height="200" v-if="tabIndex == 3">
        <el-table-column prop="typeName1" label="养护类型"></el-table-column>
        <el-table-column prop="typeName2" label="计划养护时间"></el-table-column>
        <el-table-column prop="typeName3" label="实际养护时间"></el-table-column>
        <el-table-column prop="typeName4" label="实施人"></el-table-column>
        <el-table-column prop="typeName5" label="片区责任人"></el-table-column>
        <el-table-column prop="typeName6" label="行为分析"></el-table-column>
      </el-table>
      <!-- 问题建议 -->
      <!-- <div class="suggest-nopx" v-if="tabIndex == 4">
        {{ problemSuggest }}
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { monitorPropertyEchart, stationFaultTime, stationFaultSuggest } from '@/api/dataAnalysis/syntherticData';

const props = defineProps({
  stationRow: Object,
});
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([]);
const tableDataYW = ref([]);
const problemSuggest = ref('');
const echartLoading = ref(true);
const tableLoadingError = ref(true);
const dateRange = ref([]);
const chartOption = reactive({
  grid: {
    left: '2%',
    right: '2%',
    bottom: '2%',
    top: '15%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none',
    },
  },

  legend: {
    data: ['电量', '信号量'],
    top: 0,
    textStyle: {
      color: '#fff',
    },
  },
  xAxis: {
    type: 'category',
    data: ['01:00'],
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#fff', //字体颜色
    },
  },
  yAxis: {
    axisLabel: {
      color: '#fff', //字体颜色
      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],
    },
  ],
});

// tab切换
function changeTab(key) {
  tabIndex.value = key;
  switch (key) {
    case '1':
      // 电量及信号分析
      chartOption.series = [];
      chartOption.legend.data = [];
      echartLoading.value = true;
      let params = {
        startTime: dateRange.value[0],
        endTime: dateRange.value[1],
        stCode: props.stationRow.stCode,
        monitorCodeList: 'vt,signal',
      };
      monitorPropertyEchart(params).then(res => {
        let datas = res.data;
        if (datas.propertyMonitorXList.length == 0) {
          // 无数据
          chartOption.xAxis.data = [];
          return false;
        } else {
          // 有数据
          chartOption.xAxis.data = datas.propertyMonitorXList;
          datas.propertyMonitorList.map(item => {
            chartOption.series.push({
              name: item.monitorPropertyName + item.propertyUnit,
              type: 'line',
              smooth: true,
              data: item.ylist,
            });
            chartOption.legend.data.push(item.monitorPropertyName + item.propertyUnit);
          });
          setTimeout(() => {
            intChart();
          });
          echartLoading.value = false;
        }
      });
      break;
    case '2':
      // 历次故障分析
      tableLoadingError.value = true;
      stationFaultTime({ stCode: props.stationRow.stCode }).then(res => {
        tableDataError.value = res.data;
        tableLoadingError.value = false;
      });
      break;
    case '3':
      // 运维记录分析
      tableDataYW.value = [
        {
          typeName1: '定期养护',
          typeName2: '2023年5月',
          typeName3: '--',
          typeName4: '--',
          typeName5: '朱方仁',
          typeName6: '未运维',
        },
        {
          typeName1: '定期养护',
          typeName2: '2023年2月',
          typeName3: '2023年3月',
          typeName4: '陈迁',
          typeName5: '朱方仁',
          typeName6: '正常',
        },
      ];
      break;
    case '4':
      // 问题监测建议
      stationFaultSuggest(props.stationRow.stCode).then(res => {
        problemSuggest.value = res.data;
      });
      break;
  }
}

// echarts
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  myChart.value = proxy.echarts.init(document.getElementById('lightEchart-nopx'));
  // 绘制图表
  myChart.value.setOption(chartOption);
}
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  // console.log('故障及离线设备分析获取参数--', props.stationRow);
  // 获取右侧搜索日期
  dateRange.value = localStorage.getItem('searchDateRangeEquip').split(',');
  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;
      white-space: pre-wrap;
    }
  }
}
</style>