<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item" style="width: 230px">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="changzhan"
              placeholder="请选择"
              popper-class="select"
              clearable
              @change="
                () => {
                  getFengji();
                }
              "
            >
              <el-option
                v-for="item in changzhanArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 230px">
          <div class="lable">风机：</div>
          <div class="search-input">
            <el-select
              v-model="fengji"
              clearable
              placeholder="请选择"
              popper-class="select"
              :disabled="!changzhan"
              @change="
                () => {
                  getTableData();
                }
              "
            >
              <el-option
                v-for="item in fengjiArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 230px">
          <div class="lable">故障类型：</div>
          <div class="search-input">
            <el-select
              v-model="fault"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="
                () => {
                  getTableData();
                }
              "
            >
              <el-option
                v-for="item in faultArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- <div class="query-item">
          <div class="lable">算法：</div>
          <div class="search-input">
            <el-select
              v-model="method"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="
                () => {
                  getTableData();
                }
              "
            >
              <el-option
                v-for="item in methodArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div> -->
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="dateArray"
              type="daterange"
              value-format="YYYY-MM-DD HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              popper-class="date-select"
              @change="
                () => {
                  getTableData();
                }
              "
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="search">查询</button>
        </div>
        <div
          class="query-actions"
          :class="selectArray.length ? 'show' : 'hidden'"
          style="margin-left: 20px"
        >
          <button class="btn green" @click="confirm">打标签</button>
        </div>
      </div>
    </div>
    <div class="df-table">
      <el-table
        :data="tableData"
        class="custom-table"
        height="85vh"
        ref="gzTableRef"
        @selection-change="getSelectArray"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="stationcn" align="center" label="场站" />
        <el-table-column prop="windturbineid" align="center" label="风机" />
        <el-table-column prop="diagnosetype" align="center" label="诊断故障" />
        <el-table-column align="center" label="确认故障">
          <template v-slot="scope">
            <el-select
              size="mini"
              v-model="scope.row.faulttype"
              placeholder="请选择"
              popper-class="select"
              :disabled="scope.row.confirm"
              @change="
                (res) => {
                  changeTableItem(res, scope.row);
                }
              "
            >
              <el-option
                v-for="item in faultArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="algname" align="center" label="算法名" />
        <el-table-column prop="starttime" align="center" label="故障时间" />
        <el-table-column align="center" label="是否确认" >
          <template v-slot="scope">
            <span style="color:green" v-if="scope.row.confirm">{{scope.row.confirmName}}</span>
            <span v-else>{{scope.row.confirmName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="delItem(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { ElMessageBox } from "element-plus";
export default {
  components: {},
  data() {
    return {
      timmer: null,
      changzhan: "",
      changzhanArray: [],
      fengji: "",
      fengjiArray: [],
      fault: "",
      faultArray: [],
      method: "",
      methodArray: [],
      dateArray: [
        new Date(new Date().getTime() - 86400000).formatDate(
          "yyyy-MM-dd hh:mm:ss"
        ),
        new Date().formatDate("yyyy-MM-dd hh:mm:ss"),
      ],
      tableData: [],
      selectArray: [],
    };
  },
  created() {
    this.getChangeZhan();
    this.getFaultType()
    this.getMethod();

    this.timmer = setInterval(() => {
      this.getTableData(false);
    }, 30000);
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
  methods: {
    getSelectArray(res) {
      this.selectArray = res;
    },
    // 获取场站列表
    getChangeZhan() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/station/all",
        success(res) {
          that.changzhanArray = res.data;
          that.getFengji();
        },
      });
    },

    // 获取风机列表
    getFengji(fjId) {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/windturbine/all",
        data: {
          station: that.changzhan,
        },
        success(res) {
          that.fengjiArray = res.data;
          that.fengji = fjId || "";
          that.getTableData();
        },
      });
    },

    // 获取故障类型
    getFaultType() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "know/fault/type/all",
        success(res) {
          that.faultArray = res.data;
        },
      });
    },

    // 获取算法
    getMethod() {
      const that = this;
      //  that.API.requestData({
      //    method: "GET",
      //    baseURL: "http://192.168.1.18:9002/",
      //    subUrl: "",
      //    success(res) {
      //       that.methodArray=res.data;
      //    },
      //  });
    },

    //条件查询
    search() {
      this.getTableData();
    },

    // 获取表格数据
    getTableData(showLoading = true) {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "case/faultalg/list",
        showLoading,
        data: {
          station: that.changzhan,
          windturbineid: that.fengji,
          faultType: that.fault,
          st: that.dateArray[0],
          et: that.dateArray[1],
        },
        success(res) {
          res.data.forEach((ele) => {
            ele.confirmName = ele.confirm ? "是" : "否";
          });
          that.tableData = res.data;
        },
      });
    },

    // 修改表格内单项故障类型
    changeTableItem(id, data) {
      const that = this;
      const faultItem = that.faultArray.find((ele) => {
        return ele.id === id;
      });
      data.faultcode = faultItem.code;
      data.faulttype = faultItem.name;
      that.API.request({
        method: "POST",
        subUrl: "case/faultalg/edit",
        showLoading: true,
        data: Array.isArray(data) ? data : [data],
        success() {
          that.BASE.showMsg({
            type: "success",
            msg: "修改成功",
          });
          that.getTableData();
        },
      });
    },

    // 删除按钮逻辑
    delItem({ row }) {
      const that = this;
      ElMessageBox.alert(`确定进行删除该条？此操作不可逆！`, "", {
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        callback(action) {
          if (action === "confirm") {
            that.API.requestData({
              method: "GET",
              subUrl: "case/faultalg/delete",
              showLoading: true,
              data: {
                id: row.id,
              },
              success() {
                that.BASE.showMsg({
                  type: "success",
                  msg: "修改成功",
                });
                that.getTableData();
              },
            });
          }
        },
      });
    },

    confirm() {
      const that = this;
      if (
        that.selectArray.some((ele) => {
          return !ele.confirm;
        })
      ) {
        ElMessageBox.alert(`是否生成结论样本`, "", {
          showCancelButton: true,
          showConfirmButton: true,
          confirmButtonText: "生成",
          cancelButtonText: "取消",
          callback(action) {
            if (action === "confirm") {
              let data = [];

              that.selectArray.forEach((ele) => {
                if (!ele.confirm) {
                  ele.confirm = true;
                  data.push(ele);
                }
              });

              that.API.request({
                method: "POST",
                subUrl: "case/faultalg/confirm",
                showLoading: true,
                data,
                success() {
                  that.BASE.showMsg({
                    type: "success",
                    msg: "操作完成",
                  });
                  that.getTableData();
                },
              });
            }
          },
        });
      } else {
        that.BASE.showMsg({
          msg: "已生成结论样本的项目无法重复生成",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.query-actions button {
  white-space: nowrap;
}
.query-actions.show {
  position: relative;
  left: 0;
  width: 90px;
  transition: 0.2s;
  overflow: hidden;
}
.query-actions.hidden {
  position: relative;
  left: 45px;
  width: 0;
  transition: 0.2s;
  overflow: hidden;
}
</style>