<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="widget"
              placeholder="请选择"
              popper-class="select"
              @change="
                () => {
                  getTableData();
                }
              "
            >
              <el-option
                v-for="item in widgetArray"
                :key="item.code"
                :value="item.code"
                :label="item.widget"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="df-table">
      <el-table
        :data="tableData"
        class="custom-table"
        height="85vh"
      >
        <el-table-column type="index" label="检修步骤" align="center" width="100" />
        <el-table-column prop="widget" align="center" label="检修类型" width="300"/>
        <el-table-column prop="process" align="left" label="检修过程" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      widget: null,
      widgetArray: null,
      tableData: [],
    };
  },
  components: {},
  created() {
    this.getMaintenance();
  },
  methods: {
    getMaintenance() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "know/maintenance/type",
        success(res) {
          that.widgetArray = res.data;
          that.widget = that.widgetArray[0]?.code;
          that.getTableData();
        },
      });
    },
    getTableData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "know/maintenance/list",
        data: {
          code: that.widget,
        },
        success(res) {
          that.tableData = res.data;
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.ruleBox {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;

  .radioBox {
    width: 20%;
    height: 95%;
    max-height: 95%;
    margin: 10% 0 10% 20px;
    overflow-y: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .el-radio {
      display: block;
    }
  }

  .tableBox {
    width: 90%;
    height: 90%;
    margin: 10% 20px;
  }
}
</style>