<template>
  <el-dialog
    width="70%"
    top="10vh"
    custom-class="modal"
    :close-on-click-modal="false"
  >
    <template #title>
      <div class="showTitles">
        <div class="left">
          <div class="titles">模型训练</div>
          <button v-if="!trainingFlag" class="btn" @click="startTraining()">
            开始训练
          </button>
          <button v-if="trainingFlag" disabled>训练中</button>
        </div>

        <div class="selects">
          <div style="margin-right: 20px">
            比例：
            <el-select
              v-model="percent"
              @change="selectSearch()"
              clearable
              placeholder="请选择"
              popper-class="select"
              style="width: 120px; margin-left: 20px"
            >
              <el-option
                v-for="item in percentList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
          <div>
            故障前时间范围：
            <el-select
              v-model="intervalValue"
              clearable
              placeholder="请选择"
              popper-class="select"
              style="width: 105px; margin-left: 20px"
            >
              <el-option
                v-for="item in timeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
        </div>
      </div>
    </template>
    <div style="height: 70vh; overflow-y: auto">
      <el-row :type="'flex'" class="content">
        <el-col :span="12" class="pd-l-8">
          <div class="titleBar">
            <div class="titleName">训练级</div>
          </div>
          <el-table
            ref="multipleTable"
            empty-text="暂无数据"
            :data="trainingList"
            :header-cell-style="{
              height: '40px',
              background: 'rgba(83, 98, 104, 0.2)',
              color: '#b2bdc0',
              'border-bottom': '0px solid red',
            }"
            :cell-style="{
              height: '40px',
              'border-bottom': 'solid 0px #242424',
            }"
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column
              prop="starttime"
              label="故障时间"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stationen"
              label="风场"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stationcn"
              label="场站名称"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机编号"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="model"
              label="风机型号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="faulttype"
              label="故障"
              width="120"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12" class="pd-l-8">
          <div class="titleBar">
            <div class="titleName">测试级</div>
          </div>
          <el-table
            ref="multipleTable"
            empty-text="暂无数据"
            :data="testList"
            :header-cell-style="{
              height: '40px',
              background: 'rgba(83, 98, 104, 0.2)',
              color: '#b2bdc0',
              'border-bottom': '0px solid red',
            }"
            :cell-style="{
              height: '40px',
              'border-bottom': 'solid 0px #242424',
            }"
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column
              prop="starttime"
              label="故障时间"
              width="175"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stationen"
              label="风场"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stationcn"
              label="场站名称"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机编号"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="model"
              label="风机型号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="faulttype"
              label="故障"
              width="110"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import axios from "axios";
import BASE from "@tools/basicTool.js";
export default {
  components: {
  },
  data() {
    return {
      trainingList: [],
      testList: [],
      randoms: [],
      trainingFlag: false,
      percent: 7,
      intervalValue: 1,
      faultList: {
        JC: "机舱故障",
        BJ: "变桨故障",
        PH: "偏航故障",
        FDJ: "发电机故障",
        CLX: "齿轮箱故障",
        YY: "液压故障",
        ZZ: "主轴故障",
        ZK: "主控故障",
        BPQ: "变频器故障",
      },
      percentList: [
        {
          label: "10%",
          value: 1,
        },
        {
          label: "20%",
          value: 2,
        },
        {
          label: "30%",
          value: 4,
        },
        {
          label: "40%",
          value: 4,
        },
        {
          label: "50%",
          value: 5,
        },
        {
          label: "60%",
          value: 6,
        },
        {
          label: "70%",
          value: 7,
        },
        {
          label: "80%",
          value: 8,
        },
        {
          label: "90%",
          value: 9,
        },
        {
          label: "100%",
          value: 10,
        },
      ],
      timeList: [
        { label: "1小时", value: 1 },
        { label: "1.5小时", value: 1.5 },
        { label: "2小时", value: 2 },
        { label: "2.5小时", value: 2.5 },
        { label: "3小时", value: 3 },
        { label: "3.5小时", value: 3.5 },
        { label: "4小时", value: 4 },
        { label: "4.5小时", value: 4.5 },
        { label: "5小时", value: 5 },
        { label: "5.5小时", value: 5.5 },
        { label: "6小时", value: 6 },
        { label: "6.5小时", value: 6.5 },
        { label: "7小时", value: 7 },
        { label: "7.5小时", value: 7.5 },
        { label: "8小时", value: 8 },
        { label: "8.5小时", value: 8.5 },
        { label: "9小时", value: 9 },
        { label: "9.5小时", value: 9.5 },
        { label: "10小时", value: 10 },
        { label: "10.5小时", value: 10.5 },
        { label: "11小时", value: 11 },
        { label: "11.5小时", value: 11.5 },
        { label: "12小时", value: 12 },
      ],
      exportTrainingLists: [],
      exportTestList: [],
      exportList: [],
      resultData: [],
      tHeader: [],
    };
  },
  props: {
    allData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    chooseAlgorithm: {
      type: String,
    },
  },
  updated() {
    this.selectSearch();
  },
  methods: {
    selectSearch() {
      (this.trainingList = []),
        (this.testList = []),
        (this.randoms = []),
        this.handleData();
    },
    handleData() {
      let max = this.allData.length;
      let number = ((max * this.percent) / 10).toFixed(0);
      if (this.randoms.length >= number) {
        this.randoms.forEach((item) => {
          this.trainingList.push(this.allData[item]);
        });
        this.testList = this.allData.filter(
          (val) => this.trainingList.indexOf(val) === -1
        );
        this.trainingList.sort(this.Compare("faultTime"));
        this.testList.sort(this.Compare("faultTime"));
      } else {
        let num = this.getRandoms(0, max - 1);
        if (this.randoms.filter((item) => item === num).length > 0) {
          this.handleData();
        } else {
          this.randoms.push(num);
          this.handleData();
        }
      }
    },
    getRandoms(Min, Max) {
      let Range = Max - Min;
      let Rand = Math.random();
      let num = Min + Math.round(Range * Rand);
      return num;
    },
    Compare(property) {
      return function (a, b) {
        var value1 = new Date(a[property]).getTime();
        var value2 = new Date(b[property]).getTime();
        return value2 - value1;
      };
    },
    startTraining() {
      let params = {};
      let dataInfos = []
      let dataParams = []
      this.trainingList.forEach((item) => {
        let datas = {};
        datas.startTs =
          new Date(item.starttime).getTime() - this.intervalValue * 3600000;
        datas.endTs = new Date(item.starttime).getTime();
        datas.thingId = item.windturbineid;
        datas.modelId = item.model;
        datas.stationId = item.stationen;
        datas.id = item.faultid;
        datas.faultTime = new Date(item.starttime).getTime();
        datas.tag = item.faultcode
        dataInfos.push(datas);
      });
      this.chooseAlgorithm.parameters.forEach(item =>{
          dataParams.push(item.value)
      })
      let algorithm = {
        name: this.chooseAlgorithm.name,
        parameter: JSON.stringify(dataParams)
      }
      params.algorithm = algorithm
      params.dataInfos = dataInfos
      axios({
        method: "post",
        url: "http://192.168.10.18:8080/api/supervised/execute",
        data: params,
        header: {
          "Content-Type": "application/json",
        },
      }).then((res) => {
        if (res.data === "success") {
          this.BASE.showMsg({
            type: "success",
            msg: "训练中...",
          });
          // this.trainingFlag = true;
          this.$emit("click-training");
        }else{
          this.BASE.showMsg({
            type: "warning",
            msg: res.data,
          });
        }
      });
    },
  },
};
</script>
<style scope lang="less">
.showTitles {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    flex-direction: row;
    align-items: center;

    .titles {
      margin-right: 20px;
    }
  }
}
.selects {
  display: flex;
  flex-direction: row;
  margin-right: 43px;
}
.titleBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .titleName {
    color: #ffffff;
    font-size: 16px;
  }
}
.buttons {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;

  .btn {
    margin-right: 15px;
  }
}
</style>