<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">机组型号：</div>
          <div class="search-input">
            <el-select
              v-model="processType"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="getWidgetArray"
            >
              <el-option
                v-for="item in processTypeArray"
                :key="item.category"
                :label="item.name"
                :value="item.category"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">故障类型：</div>
          <div class="search-input">
            <el-select
              v-model="WidgetType"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="getTableData"
            >
              <el-option
                v-for="item in WidgetArray"
                :key="item.code"
                :label="item.widget"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="getTableData">搜索</button>
      </div>
    </div>
    <div class="df-table">
      <el-table :data="tableData" class="custom-table" height="85vh">
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column
          prop="name"
          align="center"
          label="故障名称"
          width="250"
        />
        <el-table-column
          prop="cause"
          align="center"
          label="故障原因"
          show-overflow-tooltip
          width="400"
        />
        <el-table-column
          prop="process"
          align="center"
          label="处理方法"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="操作" width="150">
          <template v-slot="scope">
            <el-button type="text" @click="getDetails(scope)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="know-info">
      <el-dialog
        title="详细信息"
        v-model="showDetails"
        custom-class="modal"
        :close-on-click-modal="false"
      >
        <table class="table-card" :key="index">
          <tr>
            <th>故障分类</th>
            <td>{{ infoData.widget || "" }}</td>
            <th>故障类型</th>
            <td>{{ infoData.type || "" }}</td>
          </tr>
          <tr>
            <th>故障名称</th>
            <td>{{ infoData.name || "" }}</td>
            <th>故障标识</th>
            <td>{{ infoData.identification || "" }}</td>
          </tr>
          <tr>
            <th>故障原因</th>
            <td colspan="3">{{ infoData.cause || "" }}</td>
          </tr>
          <tr>
            <th>处理方法</th>
            <td colspan="3">{{ infoData.process || "" }}</td>
          </tr>
          <tr>
            <th>风机厂家</th>
            <td>{{ infoData.manufacturer || "" }}</td>
            <th>风机型号</th>
            <td>{{ infoData.model || "" }}</td>
          </tr>
          <tr>
            <th>创建时间</th>
            <td colspan="3">{{ infoData.createtime || "" }}</td>
          </tr>
        </table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      processTypeArray: [],
      processType: "",
      WidgetArray: [],
      WidgetType: "",
      nameArray: [],
      nameType: "",
      showDetails: false,
      infoData: {},
      tableData: [],
    };
  },
  created() {
    this.getProcessType();
  },
  methods: {
    getProcessType() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "know/process/type",
        data: {},
        success(res) {
          that.processTypeArray = res.data;
          that.processType = res?.data[0]?.category;
          that.getWidgetArray();
        },
      });
    },
    getWidgetArray() {
      const that = this;
      that.WidgetType = [];
      if (that.processType) {
        that.API.requestData({
          method: "GET",
          subUrl: "know/process/widget/list",
          data: {
            category: that.processType,
          },
          success(res) {
            that.WidgetArray = res.data;
            that.WidgetType = res?.data[0]?.code;
            that.getTableData();
          },
        });
      }
    },
    getTableData() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "know/process/name/list",
        data: {
          category: that.processType,
          code: that.WidgetType,
        },
        success(res) {
          that.tableData = res.data;
        },
      });
    },
    getDetails(row) {
      console.log(row.row);
      this.showDetails = true;
       this.infoData = row.row;   
    }
  },
};
</script>

<style lang="less" scope>
.know-info {
  max-height: 600px;
    overflow-y: scroll;
  .table-card {
    border-collapse: collapse;
    width: 100%;
    color: @white;
    margin-bottom: 32px;

    tr {
      font-size: 12px;
      th {
        width: 120px;
        height: 60px;
        border: 0.093vh solid @darkgray;
        line-height: 27px;
        padding: 0 4px;
      }
      td {
        height: 60px;
        border: 0.093vh solid @darkgray;
        line-height: 27px;
        padding: 0 8px;
      }
    }
  }
}
</style>
