<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-01-08 11:56:02
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-17 13:31:41
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\index.vue
 * @Description: 预警中心-预警设置
-->
<template>
  <div class="content">
    <!-- <el-form
      :model="setupForm"
      ref="setupForm"
      size="small"
      :inline="true"
      label-width="5rem"
    >
      <el-form-item label="病害类型" prop="paramsDefectType">
        <el-cascader
          v-model="paramsDefectType"
          :options="tableDefect"
          :props="{
            checkStrictly: true,
            emitPath: true,
            children: 'subTypes',
          }"
          clearable
        ></el-cascader>
      </el-form-item>

      <el-form-item label="病害长度" prop="lengthRange">
        <el-input-number
          v-model="setupForm.minLen"
          controls-position="right"
          placeholder="最小长度"
          :min="0"
        ></el-input-number>
        <span style="margin: 0 5px">-</span>
        <el-input-number
          v-model="setupForm.maxLen"
          controls-position="right"
          placeholder="最大长度"
          :min="0"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="病害面积" prop="areaRange">
        <el-input-number
          v-model="setupForm.minArea"
          controls-position="right"
          placeholder="最小面积"
          :min="0"
        ></el-input-number>
        <span style="margin: 0 5px">-</span>
        <el-input-number
          v-model="setupForm.maxArea"
          controls-position="right"
          placeholder="最大面积"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:defect:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete(null)"
          v-hasPermi="['system:defect:remove']"
          >删除
        </el-button>
      </el-col>
    </el-row> -->
    <!-- 表格 -->
    <el-table
      ref="setupTable"
      :data="setupList"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column
        width="200"
        label="预警名称"
        align="center"
        prop="defectName"
      >
      </el-table-column>
      <el-table-column label="预警标准" align="center" prop="meteringType" />
      <el-table-column label="预警长度" align="center" prop="length" />
      <el-table-column label="预警面积" align="center" prop="area" />
      <el-table-column label="预警状态" align="center" prop="area">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="启用"
            @change="handleStatusChange(scope.row)"
            inactive-value="停用"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      title="预警设置"
      :visible.sync="addVisible"
      width="30rem"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
    >
      <add-setup
        v-if="addVisible"
        :tableDefect="tableDefect"
        :dialogItem="dialogItem"
        @cancel="addCancel"
      ></add-setup>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDefectList,
  getWarnSetupList,
  updateWarnSetup,
} from "@/api/xj/warnSetup";
import AddSetup from "./components/add-setup.vue";
export default {
  name: "WarningSetup",
  components: {
    AddSetup,
  },
  data() {
    return {
      // 预警设置表单
      setupForm: {},
      // 病害类型绑定
      paramsDefectType: [],
      // 病害类型下拉
      tableDefect: [],
      // 预警设置列表
      setupList: [],
      // 列表加载状态
      loading: false,
      // 列表已选数组
      checkIds: [],
      // 非多个禁用
      multiple: true,
      // 新增弹窗是否显示
      addVisible: false,
      //   传弹窗数据
      dialogItem: {},
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /**
     * @description: 获取列表病害类型对应数据
     * @param {*} val
     * @return {*}
     */
    getTableDefect() {
      getDefectList().then(({ code, data }) => {
        if (code === 200) {
          this.tableDefect = data;
        }
      });
    },

    /**
     * @description: 获取预警设置列表数据
     * @param {*}
     * @return {*}
     */
    getTableData() {
      this.loading = true;
      getWarnSetupList()
        .then(({ code, data }) => {
          if (code === 200) {
            this.setupList = data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * @description: 切换预警状态事件
     * @param {*} row
     * @return {*}
     */
    handleStatusChange(row) {
      updateWarnSetup(row).then(({ code, msg }) => {
        if (code === 200) {
          this.$modal.msgSuccess(msg);
          this.getTableData();
        }
      });
    },

    /**
     * @description: 列表选择改变事件
     * @param {*}
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    /**
     * @description: 点击新增事件
     * @param {*}
     * @return {*}
     */
    handleAdd() {
      this.addVisible = true;
      this.dialogItem = {};
    },

    /**
     * @description: 点击删除事件
     * @param {*} row
     * @return {*}
     */
    handleDelete(row) {
      const checkIds = row ? [row.id] : this.checkIds;
      if (!checkIds.length) {
        this.$modal.msgWarning("请选择要删除的记录");
        return;
      }
      this.$modal
        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
        .then(() => {
          //   return deleteRoad(checkIds);
        })
        .then(() => {
          this.getRoadList();
          this.$refs.defectTable.clearSelection();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    /**
     * @description: 点击编辑事件
     * @param {*} row
     * @return {*}
     */
    handleUpdate(row) {
      this.dialogItem = row;
      this.addVisible = true;
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getTableData();
    },

    /**
     * @description: 切换每条/页
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getTableData();
    },

    /**
     * @description: 新增弹窗取消事件
     * @param {*}
     * @return {*}
     */
    addCancel() {
      this.addVisible = false;
      this.dialogItem = {};
      this.getTableData();
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
  overflow-y: auto;
}

.mb8 {
  margin-bottom: 0.5rem;
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>
