<template>
  <div class="app-container">
    <div class="head">
      梯控楼层关系表
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="back"
        >返回</el-button
      >
    </div>
    <!-- 主题表格 -->
    <el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      class="table"
      @row-click="handleRowClick"
      v-loading="loading"
    >
      <el-table-column
        prop="hexadecimalFloor"
        label="楼层"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="actualityFloor"
        label="实际楼层（可编辑）"
        align="center"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.editable">
            <el-input
              style="width: 30%"
              ref="editingInput"
              v-model="scope.row.actualityFloor"
              size="mini"
              @blur="saveRow(scope.row)"
            ></el-input>
          </template>
          <template v-else>
            <span>{{ scope.row.actualityFloor }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 60px 0 0 350px">
      <el-button type="primary" plain @click="back" style="margin-right: 80px"
        >取消</el-button
      >
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { floorList, floorAdd } from "@/api/floor";
export default {
  data() {
    return {
      loading: false,
      tableData: [
        // { hexadecimalFloor: "1", actualityFloor: "1", editable: false },
        // { hexadecimalFloor: "2", actualityFloor: "2", editable: false },
      ],
      currentFloor: "", // 当前楼层的值
      currentIndex: -1, // 当前楼层行的索引
    };
  },
  created() {
    this.getFloorList();
  },
  methods: {
    // 获取楼层列表
    async getFloorList() {
      this.loading = true;
      const res = await floorList();
      // console.log(res);
      // 动态添加editable属性
      this.tableData = res.data.map((item) => {
        return { ...item, editable: false };
      });
      this.loading = false;
    },
    // 返回
    back() {
      this.$router.back();
    },
    // 编辑楼层
    handleRowClick(row) {
      row.editable = true;
      this.currentFloor = row.actualityFloor; // 当前楼层的值
      this.currentIndex = this.tableData.indexOf(row); // 当前楼层行的索引
      this.$nextTick(() => {
        this.$refs.editingInput.focus();
      });
    },
    saveRow(row) {
      row.editable = false;
      //   !isNaN(parseFloat(this.tableData[currentIndex].actualityFloor)) //判断楼层行的值是否为数值类型
      //   isFinite(this.tableData[currentIndex].actualityFloor)  //判断是否在 JavaScript 的安全整数范围内
      const currentIndex = this.currentIndex;
      const inputValue = this.tableData[currentIndex].actualityFloor;
      if (/^-?[1-9a-zA-Z]{1,}\d*$/.test(inputValue)) {
        // 判断当前楼层是否可以转换为数值类型
        if (
          !isNaN(parseFloat(inputValue)) &&
          isFinite(inputValue) &&
          Number(inputValue) > 0
        ) {
          for (let i = currentIndex + 1; i < this.tableData.length; i++) {
            this.tableData[i].actualityFloor = String(
              Number(inputValue) + i - currentIndex
            );
          }
        }
      } else {
        this.$message.error("实际楼层只能为整数或英文字母组合，请重新输入");
      }
    },
    // 保存
    async submit() {
      const currentIndex = this.currentIndex;
      const inputValue = this.tableData[currentIndex].actualityFloor;
      if (/^-?[1-9a-zA-Z]{1,}\d*$/.test(inputValue)) {
      } else {
        this.$message.error("实际楼层只能为整数或英文字母组合，请重新输入");
        return;
      }
      const actualityFloorSet = new Set();
      const duplicateFloors = [];

      for (let i = 0; i < this.tableData.length; i++) {
        const { hexadecimalFloor, actualityFloor } = this.tableData[i];
        if (actualityFloorSet.has(actualityFloor)) {
          duplicateFloors.push(actualityFloor);
        }
        actualityFloorSet.add(actualityFloor);
      }

      if (duplicateFloors.length > 0) {
        // 如果存在重复的actualFloor，则使用MessageBox组件进行提示
        const duplicateFloorsString = duplicateFloors.join(", ");
        this.$message.error(
          `实际楼层 ${duplicateFloorsString} 重复,请重新输入`
        );
        return;
      }
      const data = this.tableData.map((item) => {
        const { hexadecimalFloor, actualityFloor } = item;
        return { hexadecimalFloor, actualityFloor };
      });
      // console.log(data);
      await floorAdd(data);
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  margin-left: 16px;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
}
.table {
  margin: 20px 0 0 30px;
  width: 70%;
}
</style>
