<!--
 * @Author: your name
 * @Date: 2021-11-29 17:27:07
 * @LastEditTime: 2021-12-05 12:01:20
 * @LastEditors: Please set LastEditors
 * @Description: 报警设置的表格
 * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\alarm-table.vue
-->
<template>
  <div class="alarm-table">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="major" label="大项" width="180"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column label="一级">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.firstLevel"
            active-color="#13ce66"
            inactive-color="#ccc"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="二级">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.secondLevel"
            active-color="#13ce66"
            inactive-color="#ccc"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="amount3" label="三级">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.thirdLevel"
            active-color="#13ce66"
            inactive-color="#ccc"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getAlarmSets, postAlarmSets } from "utils/chenApi";
export default {
  data() {
    return {
      tableData: [],
      value: false,
    };
  },
  mounted() {
    this.initAlarmSets();
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const smallItem = {
        rowspan: 0,
        colspan: 0,
      };
      if (columnIndex === 0) {
        if (rowIndex < 2) {
          if (rowIndex === 0) {
            return {
              rowspan: 2,
              colspan: 1,
            };
          } else {
            return smallItem;
          }
        } else if (rowIndex < 6) {
          if (rowIndex === 2) {
            return {
              rowspan: 4,
              colspan: 1,
            };
          } else {
            return smallItem;
          }
        } else if (rowIndex < 11) {
          if (rowIndex === 6) {
            return {
              rowspan: 5,
              colspan: 1,
            };
          } else {
            return smallItem;
          }
        } else if (rowIndex < 14) {
          if (rowIndex === 11) {
            return {
              rowspan: 3,
              colspan: 1,
            };
          } else {
            return smallItem;
          }
        } else {
          if (rowIndex === 14) {
            return {
              rowspan: 4,
              colspan: 1,
            };
          } else {
            return smallItem;
          }
        }
      }
    },
    initAlarmSets() {
      getAlarmSets({}).then(({ code, data }) => {
        if (code === 10000) {
          this.tableData = data;
        }
      });
    },
    async addAlarmSets() {
      const farmId = Number(localStorage.getItem("lastFarmId"));
      const params = this.tableData.map((item) => {
        return {
          ...item,
          farmId,
        };
      });
      const res = await postAlarmSets(params);
      console.log(res);
      this.initAlarmSets();
    },
  },
};
</script>
<style scoped></style>
