<template>
  <div class="recommend">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :name="item.name"
        :label="item.label"
        v-for="(item, i) in tabList"
        :key="i"
      >
        <div class="recommend_card">
          <el-card class="box-card" v-for="item in dataList" :key="item">
            <div class="card-header">
              <span>{{ item.stationName + item.windturbineCode }}</span>
              <el-button plain @click="Report(item)">诊断报告</el-button>
            </div>
            <div class="card-content">
              <div class="card-text">
                <div class="card-text-row">
                  <span class="card-text-span"
                    >{{ textFifter(item, item.maxEarlyType)
                    }}{{ textFifter(item, item.maxParts) }}</span
                  >
                </div>
                <div class="card-text-row">
                  <span>总分：</span><span>{{ item.totalscore }}</span>
                  <span style="margin-left:20px">{{handleClickTab?.label}}</span>{{handleClickTab?'：' : ''}}<span>{{ item[handleClickTab?.name+"score"] }}</span>
                </div>
                <div class="card-text-row">
                  <span>报告时间：</span><span>{{ item.statdate }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog v-model="dialogVisible" width="80%" :before-close="dialogClose">
      <!-- <el-affix :offset="120"> -->
      <el-button plain @click="savePdf">导出(PDF)</el-button>
      <!-- </el-affix> -->
      <div class="pdfDom">
        <div class="title">诊断报告</div>
        <el-descriptions size="large" :column="4">
          <el-descriptions-item label="风机："
            >{{
              currentItem?.windturbineName
            }}</el-descriptions-item
          >
          <el-descriptions-item label="型号：">{{currentItem?.model}}</el-descriptions-item>
          <el-descriptions-item label="评级结果："
            >{{ scoreFifter(currentItem?.totalscore) }} ({{
              currentItem?.totalscore
            }}分)</el-descriptions-item
          >
          <el-descriptions-item label="报告时间：">{{
            currentItem?.statdate
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="Perspectives">
          <p>
            评级观点：该风机于{{
              dayjs(currentItem?.statdate).format("YYYY-MM-DD")
            }}日运行状况{{ scoreFifter(currentItem?.totalscore) }},{{
              textFifter(currentItem, currentItem.maxEarlyType)
            }},{{ textFifter(currentItem, currentItem.maxParts) }}
            {{
              currentItem?.totalscore < 50 ? "不需要" : "需要"
            }}安排检修人员排查
          </p>
        </div>
        <div class="table1">
          <div>预警类型分布：</div>
          <div
            class="dChart"
            style="height: 500px"
            height="100%"
            id="pieChart"
          ></div>
        </div>
        <div class="table1">
          <div>预警部件分布：</div>
          <div class="dChart" height="100%" id="Chart2"></div>
        </div>
        <div class="table1">
          <div>预警明细：</div>
          <div
            class="dChart"
            style="height: 500px"
            height="100%"
            id="Chart3"
          ></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { earlywarnscore_list, warning_query_new3 } from "/@/api/api.js";
import Get_PDF from "/@/tools/htmlToPdf.js";
import dayjs from "dayjs";
import * as echarts from "echarts";
import { ElNotification, ElMessage, ElMessageBox } from "element-plus";
onMounted(() => {
  getearlywarnscore_list();
});
const dataList = ref([]);
const dataListOld = ref([]);

const chatList = ref([]);
const currentItem = ref(null);
const handleClickTab = ref(null);
const activeName = ref("total");
const tabList = ref([
  {
    name: "total",
    label: "全部",
  },
  {
    name: "sensor",
    label: "传感器异常",
  },
  {
    name: "parts",
    label: "零部件隐患",
  },
  {
    name: "control",
    label: "控制参数",
  },
  {
    name: "performance",
    label: "性能下降",
  },
  {
    name: "otherscore",
    label: "其它",
  },
]);
const dialogVisible = ref(false);
const option1 = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      data: [],
    },
  ],
};
const option2 = {
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      barMaxWidth: 40,
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};
const option3 = {
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "8%",
    right: "4%",
    bottom: "8%",
    containLabel: true,
  },
  legend: {},
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      interval: 0, //强制文字产生间隔
      rotate: 20, //文字逆时针旋转45°
    },
    nameTextStyle: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      barMaxWidth: 40,
      name: "次数",
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
    {
      barMaxWidth: 40,
      name: "时间(分钟)",
      data: [200, 120, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};
const maxobj = {
  变桨系统: "bjxtscore",
  传动链: "cdlscore",
  发电机: "fdjscore",
  齿轮箱: "clxscore",
  测风系统: "cfxtscore",
  机舱: "jcscore",
  主控柜: "zkgscore",

  传感器异常: "sensorscore",
  零部件隐患: "partsscore",
  控制参数: "controlscore",
  性能下降: "performancescore",
  其它: "otherscore",
};
//排序
const handleClick = (tab, event) => {
  if (tab.props.name != "total") {
    dataList.value=dataList.value.filter((e) => {
      return e.totalscore != 0;
    });
    console.warn(tab);
    handleClickTab.value = tab.props
    let tabname = tab.props.name + "score";
    dataList.value.sort((a, b) => {
      return b[tabname] - a[tabname];
    });
  } else {
    handleClickTab.value = null
    dataList.value =dataListOld.value
  }
};
//诊断报告
const Report = async (item) => {
  console.warn(item);
  getwarning_query_new(item.stationId,item.windturbineid);
  dialogVisible.value = true;
  currentItem.value = item;
  option1.series[0].data = [
    { value: item.sensorscore, name: "传感器异常" },
    { value: item.partsscore, name: "零部件隐患" },
    { value: item.controlscore, name: "控制参数" },
    { value: item.performancescore, name: "性能下降" },
    { value: item.otherscore, name: "其它" },
  ];
  option2.xAxis.data = [
    "变桨系统",
    "传动链",
    "发电机",
    "齿轮箱",
    "测风系统",
    "机舱",
    "主控柜",
  ];
  option2.series[0].data = [
    item.bjxtscore,
    item.cdlscore,
    item.fdjscore,
    item.clxscore,
    item.cfxtscore,
    item.jcscore,
    item.zkgscore,
  ];
  nextTick(() => {
    toEcharts("pieChart", option1);
    toEcharts("Chart2", option2);
  });
};
//柱状图
const toEcharts = (dom, option) => {
  let chat = echarts.init(document.getElementById(dom));
  chat.setOption(option);
  chatList.value.push(chat);
};
//getData
const getearlywarnscore_list = async () => {
  const data = await earlywarnscore_list({ windturbineid: "" });
  dataList.value = data.sort((a, b) => {
    return b.totalscore - a.totalscore;
  });
  dataListOld.value = dataList.value
};

//get 预警分析
let startdate = dayjs(new Date(new Date() - 1 * 24 * 60 * 60 * 1000)).format(
  "YYYY-MM-DD"
);
let enddate = dayjs(new Date()).format("YYYY-MM-DD");
const getwarning_query_new = async (stationId,id) => {
  const { data } = await warning_query_new3({
    stationid: stationId,
    startdate: dayjs(startdate).format("YYYY-MM-DD"),
    enddate: dayjs(enddate).format("YYYY-MM-DD"),
    windturbineid: id,
  });
  let res = Object.values(data);
  option3.xAxis.data = [];
  option3.series[0].data = [];
  option3.series[1].data = [];
  res.forEach((e) => {
    option3.xAxis.data.push(e.alertText);
    option3.series[0].data.push(e.count);
    option3.series[1].data.push(e.time);
  });
  await toEcharts("Chart3", option3);
};
const dialogClose = (done) => {
  console.warn(chatList.value);
  chatList.value.forEach((e) => {
    e?.clear(); //销毁
  });
  done();
};
const textFifter = (v, k) => {
  if (v[maxobj[k]] > 20) {
    return k + "问题很多!";
  } else if (10 <= v[maxobj[k]] && v[maxobj[k]] <= 20) {
    return k + "问题较多!";
  } else if (v[maxobj[k]] == 0) {
    return k + "运行状态良好!";
  } else {
    return k + "出现了问题!";
  }
};
const scoreFifter = (v) => {
  if (v > 50) {
    return "差!";
  } else if (20 <= v && v <= 50) {
    return "一般!";
  } else {
    return "良好!";
  }
};
//导出(pdf)
const savePdf = () => {
  Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "诊断报告");
};
</script>
<style lang="less" scoped>
.fifter {
  display: flex;
  align-items: center;
  width: 100%;
  .fifter_bar {
    margin-right: 2vw;
  }
}
.recommend_card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .box-card {
    width: 19.5%;
    margin: 3px;
    :deep .el-card__body {
      padding: 10px;
    }
    .card-header {
      padding: 3px;
      padding-bottom: 5px;
      box-sizing: border-box;
      border-bottom: 1px solid #cacaca;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-content {
      padding: 3px;
      font-size: 14px;
      color: #5f5f5f;
      .card-text {
        margin: 3px 0;
        .card-text-row {
          margin: 6px 0;
          .card-text-span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
.pdfDom {
  width: 100%;
  font-size: 18px;
  .title {
    text-align: center;
    margin: 20px 0;
    font-size: 26px;
  }
  :deep .el-descriptions__body {
    font-size: 18px;
  }
  .Perspectives {
    margin: 10px 0;
  }
  .table1 {
    margin: 20px;
  }
}
.dChart {
  width: 100%;
  height: 300px;
  display: inline-block;
}
</style>
