<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-01-08 11:56:02
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-01-15 15:28:26
 * @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="segmentId">
        <el-select
          v-model="setupForm.segmentId"
          placeholder="请选择路段"
          filterable
          clearable
        >
          <el-option
            v-for="item in segmentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="病害类型" prop="defectType">
        <el-select
          v-model="setupForm.defectType"
          placeholder="请选择病害"
          clearable
        >
          <el-option
            v-for="item in tableDefect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </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="['xj:inspection-warn:warning-setup: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 label="道路名称" align="center" prop="segmentName" />
      <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)"
            v-hasPermi="['xj:inspection-warn:warning-setup:add']"
            >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['xj:inspection-warn:warning-setup:add']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <!-- <div class="pagination-part">
      <el-pagination
        background
        :current-page.sync="pagination.page"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="pagination.size"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
      >
      </el-pagination>
    </div> -->
    <!-- 新增/编辑弹窗 -->
    <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"
        :segmentList="segmentList"
        :dialogItem="dialogItem"
        @cancel="addCancel"
      ></add-setup>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDefectList,
  getWarnSetupList,
  updateWarnSetup,
  getSegment,
  delWarnSetup,
} from "@/api/xj/warnSetup";
import AddSetup from "./components/add-setup.vue";
export default {
  name: "WarningSetup",
  components: {
    AddSetup,
  },
  data() {
    return {
      // 传查询接口表单
      searchForm: {},
      // 预警设置表单
      setupForm: {
        segmentId: "",
        defectType: "",
      },
      // 路段下拉选项
      segmentList: [],
      // 病害类型绑定
      paramsDefectType: [],
      // 病害类型下拉
      tableDefect: [],
      // 预警设置列表
      setupList: [],
      // 列表加载状态
      loading: false,
      // 列表已选数组
      checkIds: [],
      // 非多个禁用
      multiple: true,
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 新增弹窗是否显示
      addVisible: false,
      // 传弹窗数据
      dialogItem: {},
    };
  },
  created() {
    this.getTableData();
    this.getTableDefect();
    this.getSegmentList();
  },
  methods: {
    /**
     * @description: 获取路段下拉数据
     * @param {*} val
     * @return {*}
     */
    getSegmentList() {
      getSegment().then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data;
        }
      });
    },

    /**
     * @description: 获取列表病害类型对应数据
     * @param {*} val
     * @return {*}
     */
    getTableDefect() {
      getDefectList().then(({ code, data }) => {
        if (code === 200) {
          this.tableDefect = data;
        }
      });
    },

    /**
     * @description: 点击查询事件
     * @param {*}
     * @return {*}
     */
    handleQuery() {
      this.pagination.page = 1;
      this.searchForm = JSON.parse(JSON.stringify(this.setupForm));
      this.getTableData();
    },

    /**
     * @description: 点击重置事件
     * @param {*}
     * @return {*}
     */
    resetQuery() {
      this.pagination.page = 1;
      this.searchForm = {};
      this.setupForm = {
        segmentId: "",
        defectType: "",
      };
      this.paramsDefectType = [];
      this.getTableData();
    },

    /**
     * @description: 获取预警设置列表数据
     * @param {*}
     * @return {*}
     */
    getTableData() {
      this.loading = true;
      getWarnSetupList({ ...this.pagination, ...this.searchForm })
        .then(({ code, data }) => {
          if (code === 200) {
            this.setupList = data;
            // this.tableTotal = data.total;
          }
        })
        .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(`是否确认删除选中的1条记录？`)
        .then(() => {
          return delWarnSetup(checkIds);
        })
        .then(() => {
          this.getTableData();
          // 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>
