<template>
  <div v-loading="loading">
    <div class="newly">
      <el-button type="primary" @click="addRow" size="small">新增</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="异常数量" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditing">
            <el-input
              v-model="scope.row.errCount"
              type="number"
              :min="1"
              @input="checkErrCount(scope.row)"
            ></el-input>
          </div>
          <div v-else>
            {{ scope.row.errCount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="解决异常" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditing">
            <el-input
              v-model="scope.row.handleErrCount"
              type="number"
              :min="1"
              @input="checkHandleErrCount(scope.row)"
            ></el-input>
          </div>
          <div v-else>
            {{ scope.row.handleErrCount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="分析类型">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditing && setDataState === 'add'">
            <el-select v-model="scope.row.analysisTypeCode" size="small">
              <el-option
                v-for="item in analysisTypeList"
                :key="item.typeCode"
                :label="item.typeName"
                :value="item.typeCode"
              ></el-option>
            </el-select>
          </div>
          <div v-else>
            {{ scope.row.analysisTypeName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="机组名称" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditing && setDataState === 'add'">
            <el-select v-model="scope.row.engineCode" size="small">
              <el-option
                v-for="item in windEngineGroupList"
                :key="item.engineCode"
                :label="item.engineName"
                :value="item.engineCode"
              ></el-option>
            </el-select>
          </div>
          <div v-else>
            {{ scope.row.engineName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="errDesc" label="异常信息" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditing">
            <el-input v-model="scope.row.errDesc"></el-input>
          </div>
          <div v-else>
            {{ scope.row.errDesc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="更新时间" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditing">
            {{ scope.row.updateTime ? scope.row.updateTime : "/" }}
          </div>
          <div v-else>
            {{ scope.row.updateTime ? scope.row.updateTime : "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isEditing"
            size="small"
            @click="editRow(scope.$index)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.isEditing"
            size="small"
            @click="submitRow(scope.$index)"
            >提交</el-button
          >
          <el-button @click="deleteRow(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="formInline.pageNum"
        layout="total, prev, pager, next"
        :page-size="formInline.pageSize"
        :total="formInline.totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  analysisErrQuery,
  analysisErrAdd,
  analysisEditQuery,
  analysisErrDel,
  analysisErrEdit,
} from "@/api/performance";

export default {
  props: {
    batchCode: String,
  },
  data() {
    return {
      loading: false,
      setDataState: "",
      formInline: {
        pageNum: 1,
        pageSize: 5,
        totalSize: 0,
      },
      menuOptions: [],
      tableData: [],
      windEngineGroupList: [],
      analysisTypeList: [],
    };
  },
  created() {
    this.getWindCodeList(this.batchCode);
    this.getTableList(this.batchCode);
  },
  watch: {
    batchCode(newVal) {
      this.getWindCodeList(newVal);
      this.getTableList(newVal);
    },
  },

  methods: {
    checkErrCount(row) {
      if (row.errCount < 1) {
        row.errCount = 1;
      }
    },
    checkHandleErrCount(row) {
      if (row.handleErrCount < 1) {
        row.handleErrCount = 1;
      }
    },
    // 分页数据切换
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getTableList(this.batchCode);
    },
    async getWindCodeList(batchCode) {
      this.loading = true;
      try {
        const response = await analysisEditQuery({ batchCode });
        this.analysisTypeList = response.data.analysisTypeList;
        this.windEngineGroupList = response.data.windEngineGroupList;
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
    async getTableList(batchCode) {
      this.loading = true;
      try {
        const response = await analysisErrQuery({
          batchCode,
          pageNum: this.formInline.pageNum,
          pageSize: 5,
        });
        this.tableData = response.data.list;
        this.formInline.totalSize = response.data.totalSize;
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
    // 新增数据
    addRow() {
      this.setDataState = "add";
      this.tableData.unshift({
        batchCode: "",
        engineCode: "",
        analysisTypeCode: "",
        errCount: "",
        handleErrCount: "",
        isEditing: true,
      });
    },
    // 编辑行
    editRow(index) {
      this.setDataState = "edit";
      this.$set(this.tableData[index], "isEditing", true);
    },
    // 提交行
    async submitRow(index) {
      if (this.setDataState === "add") {
        this.loading = true;
        try {
          await analysisErrAdd({
            batchCode: this.batchCode,
            engineCode: this.tableData[0].engineCode,
            analysisTypeCode: this.tableData[0].analysisTypeCode,
            errCount: this.tableData[0].errCount,
            errDesc: this.tableData[index].errDesc,
            handleErrCount: this.tableData[0].handleErrCount,
          });
          this.$set(this.tableData[index], "isEditing", false);
          this.getTableList(this.batchCode);
          this.loading = false;
          this.$message({
            type: "success",
            message: "新增成功",
          });
        } catch (err) {
          console.error(err);
          this.loading = false;
        }
      } else if (this.setDataState === "edit") {
        this.loading = true;
        try {
          await analysisErrEdit({
            id: this.tableData[index].id,
            errCount: this.tableData[index].errCount,
            errDesc: this.tableData[index].errDesc,
            handleErrCount: this.tableData[index].handleErrCount,
          });
          this.$set(this.tableData[index], "isEditing", false);
          this.loading = false;
          this.$message({
            type: "success",
            message: "编辑成功",
          });
          this.getTableList(this.batchCode);
        } catch (err) {
          console.error(err);
          this.loading = false;
        }
      }

      // 处理提交逻辑，例如发送数据到服务器
    },
    // 删除行
    async deleteRow(row) {
      this.loading = true;
      try {
        await analysisErrDel({ id: row.id });
        this.loading = false;
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getTableList(this.batchCode);
      } catch (err) {
        console.error(err);
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
