<template>
  <div class="content-main">
    <el-row class="lrkMar">
      <el-form
        :model="formData"
        ref="formData"
        :rules="formData.rules"
        :inline="true"
      >
        <el-table
          :data="formData.tableList"
          v-loading="listLoading"
          stripe
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column align="center" label="序号" type="index" width="70">
          </el-table-column>
          <el-table-column align="center" prop="lypz" label="品种">
            <template slot-scope="scope">
              <el-form-item
                v-if="(isAdd && !scope.row.id) || isEdit == scope.row.id"
                :rules="formData.rules.lypz"
                :prop="'tableList.' + scope.$index + '.lypz'"
              >
                <el-cascader
                  class="inputWidth"
                  :options="pzOptions"
                  :props="pzProps"
                  :show-all-levels="false"
                  v-model="scope.row.lypz"
                  placeholder="请选择"
                ></el-cascader>
              </el-form-item>
              <span v-else>{{ scope.row.pzmc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wdyjgx"
            label="温度预警高限"
            width=""
          >
            <template slot-scope="scope">
              <el-form-item
                v-if="(isAdd && !scope.row.id) || isEdit == scope.row.id"
                :rules="formData.rules.wdyjgx"
                :prop="'tableList.' + scope.$index + '.wdyjgx'"
              >
                <el-input
                  placeholder="设置温度"
                  v-model="scope.row.wdyjgx"
                ></el-input>
              </el-form-item>
              <span v-else>{{ scope.row.wdyjgx }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wdyjdx"
            label="温度预警低限"
            width=""
          >
            <template slot-scope="scope">
              <el-form-item
                v-if="(isAdd && !scope.row.id) || isEdit == scope.row.id"
                :rules="formData.rules.wdyjdx"
                :prop="'tableList.' + scope.$index + '.wdyjdx'"
              >
                <el-input
                  placeholder="设置温度"
                  v-model="scope.row.wdyjdx"
                ></el-input>
              </el-form-item>
              <span v-else>{{ scope.row.wdyjdx }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wdbjgx"
            label="温度报警高限"
            width=""
          >
            <template slot-scope="scope">
              <el-form-item
                v-if="(isAdd && !scope.row.id) || isEdit == scope.row.id"
                :rules="formData.rules.wdbjgx"
                :prop="'tableList.' + scope.$index + '.wdbjgx'"
              >
                <el-input
                  placeholder="设置温度"
                  v-model="scope.row.wdbjgx"
                ></el-input>
              </el-form-item>
              <span v-else>{{ scope.row.wdbjgx }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="sdbjgx"
            label="湿度报警高限"
            width=""
          >
            <template slot-scope="scope">
              <el-form-item
                v-if="(isAdd && !scope.row.id) || isEdit == scope.row.id"
                :rules="formData.rules.sdbjgx"
                :prop="'tableList.' + scope.$index + '.sdbjgx'"
              >
                <el-input
                  placeholder="设置温度"
                  v-model="scope.row.sdbjgx"
                ></el-input>
              </el-form-item>
              <span v-else>{{ scope.row.sdbjgx }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ccnx" label="存储年限" width="">
            <template slot-scope="scope">
              <el-form-item
                v-if="(isAdd && !scope.row.id) || isEdit == scope.row.id"
                :rules="formData.rules.ccnx"
                :prop="'tableList.' + scope.$index + '.ccnx'"
              >
                <el-input
                  placeholder="x年x月"
                  v-model="scope.row.ccnx"
                ></el-input>
              </el-form-item>
              <span v-else>{{ scope.row.ccnx }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div class="btn_control">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="编辑"
                  placement="top"
                  v-if="scope.row.id && isEdit != scope.row.id"
                >
                  <el-button
                    type="primary"
                    size="small"
                    class="operate_show_btn iconfont iconxiugai1"
                    @click="editHandle(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="取消"
                  placement="top"
                  v-if="scope.row.id && isEdit == scope.row.id"
                >
                  <el-button
                    type="primary"
                    size="small"
                    class="operate_show_btn iconfont iconquxiao"
                    @click="cancelHandle(scope.row)"
                  ></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="addTable" v-if="!isAdd">
        <el-tooltip class="item" effect="light" content="新增" placement="top">
          <span
            class="iconfont iconzengjia addTableSpan"
            @click="addTableItem"
          ></span>
        </el-tooltip>
      </div>
      <div class="saveTable" v-if="isAdd || isEdit != ''">
        <el-button
          type="primary"
          size="small"
          class="iconfont iconbaocun"
          @click="saveTodo"
          >保存</el-button
        >
        <el-button
          type="primary"
          size="small"
          class="iconfont iconfanhui"
          @click="returnList"
          >返回</el-button
        >
      </div>
    </el-row>
  </div>
</template>
<script>
import {
  thresholdList,
  thresholdUpdate,
} from "@/api/earlyWarning/alarmThreshold/index";
import { getVarietyList } from "@/api/login/login.js";

export default {
  data() {
    return {
      formData: {
        tableList: [],
        rules: {
          lypz: {
            required: true,
            trigger: "change",
            message: "请选择",
          },
          wdyjgx: [
            { required: true, message: "请设置温度", trigger: "blur" },
            {
              pattern: /^[+-]?\d+(.\d+)?$/,
              message: "请输入数字格式",
              trigger: "blur",
            },
          ],
          wdyjdx: [
            { required: true, message: "请设置温度", trigger: "blur" },
            {
              pattern: /^[+-]?\d+(.\d+)?$/,
              message: "请输入数字格式",
              trigger: "blur",
            },
          ],
          wdbjgx: [
            { required: true, message: "请设置温度", trigger: "blur" },
            {
              pattern: /^[+-]?\d+(.\d+)?$/,
              message: "请输入数字格式",
              trigger: "blur",
            },
          ],
          sdbjgx: [
            { required: true, message: "请设置温度", trigger: "blur" },
            {
              pattern: /^[+-]?\d+(.\d+)?$/,
              message: "请输入数字格式",
              trigger: "blur",
            },
          ],
          ccnx: [
            { required: true, message: "请输入存储年限", trigger: "blur" },
            {
              pattern: /^\d{1,2}年(\d{1,2}月)?$/,
              message: "请输入x年(x月)",
              trigger: "blur",
            },
          ],
        },
      },
      isAdd: false,
      listLoading: true,
      pzProps: {
        label: "dictName",
        value: "dictCode",
        children: "",
        emitPath: false,
      },
      pzOptions: [],
      isEdit: "",
    };
  },
  methods: {
    // 获取列表
    getList() {
      thresholdList()
        .then((res) => {
          this.listLoading = false;
          this.formData.tableList = res;
        })
        .catch((err) => {
          this.listLoading = false;
          this.$message.error("获取数据失败");
        });
    },
    //新增
    addTableItem() {
      this.isAdd = true;
      this.formData.tableList.push({
        lypz: "",
        wdyjgx: "",
        wdyjdx: "",
        wdbjgx: "",
        sdbjgx: "",
        ccnx: "",
      });
    },
    // 编辑
    editHandle(row) {
      this.isEdit = row.id;
    },
    // 取消编辑
    cancelHandle(row) {
      this.isEdit = "";
    },
    // 保存
    saveTodo() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.save();
        } else {
          console.log("请先填写必填项");
        }
      });
    },
    save() {
      let data = [...this.formData.tableList];
      thresholdUpdate(data)
        .then((res) => {
          this.getList();
        })
        .catch((e) => {
          console.log(e);
        });
      this.isAdd = false;
      this.isEdit = "";
      this.getList();
    },
    // 返回
    returnList() {
      if (this.isEdit == "") {
        let num = this.formData.tableList.length;
        this.formData.tableList.splice(num - 1, 1);
        this.isAdd = false;
      } else {
        if (this.isAdd) {
          let num = this.formData.tableList.length;
          this.formData.tableList.splice(num - 1, 1);
          this.isAdd = false;
          this.isEdit = "";
          this.getList();
        } else {
          this.isEdit = "";
          this.getList();
        }
      }
    },
    // 获取品种
    async getVarieties() {
      let res = await getVarietyList();
      if (res.infoCode === 200) {
        this.pzOptions = res.data;
        return;
      }
      this.$message.error(res.msg || "获取品种列表失败");
    },
  },
  created() {
    this.getList();
    this.getVarieties();
  },
};
</script>
<style lang="scss" scoped>
.addTable {
  text-align: right;
  margin-right: 22px;
}
.addTableSpan {
  font-size: 24px;
  // font-weight: bold;
  color: #4588db;
  cursor: pointer;
  margin-right: 20px;
}
.saveTable {
  text-align: center;
  padding: 10px 0;
}
/deep/ .btn_control {
  display: flex;
  justify-content: center;
}
</style>