<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-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="650px"
        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="650px" 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 name="GuZhangJiLiXianSheBeiFenXi">
import {
  monitorPropertyEchart,
  stationFaultTime,
  stationFaultSuggest,
} from "@/api/dataAnalysis/syntherticData";

const props = defineProps({
  SiteNo: String,
  dataID: String,
});
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,
  },
  xAxis: {
    type: "category",
    data: ["01: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],
    },
  ],
});

// 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.SiteNo,
        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.SiteNo }).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.SiteNo).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"), "dark");
  // 绘制图表
  myChart.value.setOption(chartOption);
}
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  console.log("故障及离线设备分析获取参数--", props);
  // 获取右侧查询日期
  dateRange.value = localStorage.getItem("searchDateRangeEquip").split(",");
  changeTab("1");
  window.addEventListener("resize", resizeTheChart);
});
</script>
<style lang="scss" scoped>
.equipFault {
  width: 100%;
  height: 100%;
  .tabsBtn {
    text-align: left;
    .el-button {
      border-radius: 15px;
      margin-right: 15px;
    }
  }
  .content {
    margin-top: 15px;
    height: calc(100% - 40px);
    #lightEchart-nopx {
      width: 100%;
      height: 100%;
    }
    .suggest-nopx {
      line-height: 26px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ebf5ff;
      height: calc(100% - 40px);
      overflow: auto;
      white-space: pre-wrap;
    }
  }
}
</style>