<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-15 13:29:47
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-19 15:31:51
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-section\index.vue
 * @Description: 路线管理-道路段
-->

<template>
  <div class="section-content">
    <!-- 搜索表单 -->
    <div class="section-form">
      <el-form
        :model="sectionForm"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="5rem"
      >
        <!-- <el-form-item label="路段编码" prop="segmentCode">
          <el-input
            v-model="sectionForm.segmentCode"
            placeholder="请输入路段编码，唯一"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="路段名称" prop="segmentName">
          <el-input
            v-model="sectionForm.segmentName"
            placeholder="请输入路段名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </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>
    </div>
    <!-- 操作按钮 -->
    <div class="btn-row">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增
      </el-button>
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="deleteTable(null)"
        >删除
      </el-button>
      <!-- <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出
      </el-button> -->
    </div>
    <!-- 列表 -->
    <el-table
      ref="roadTable"
      v-loading="loading"
      :data="sectionList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="路段编码" align="center" prop="segmentCode" />
      <el-table-column
        label="路段名称"
        show-overflow-tooltip
        align="center"
        prop="segmentName"
      />
      <el-table-column label="道路类型" align="center" prop="roadType" />
      <el-table-column label="里程" align="center" prop="mileage" />
      <el-table-column label="路宽" align="center" prop="width" />
      <el-table-column label="起点桩" align="center" prop="stakeStart" />
      <el-table-column label="终止桩" align="center" prop="stakeEnd" />
      <el-table-column label="车道数量" align="center" prop="laneCount" />
      <el-table-column label="养护级别" align="center" prop="curingLevel" />
      <el-table-column label="最大限速" align="center" prop="maxSpeedLimit" />
      <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="editTable(scope.row)"
            >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deleteTable(scope.row)"
            >删除
          </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="addTitle"
      :visible.sync="addVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
    >
      <section-add
        v-if="addVisible"
        :dialogItem="dialogItem"
        :routeList="routeList"
        :deptIdList="deptIdList"
        @addCancel="addCancel"
      ></section-add>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSectionList,
  deleteSection,
  getSegmentList,
  getDeptList,
} from "@/api/xj/section";
import SectionAdd from "./components/section-add.vue";

export default {
  components: { SectionAdd },
  name: "RouteSection",
  data() {
    return {
      // 搜索表单
      sectionForm: {
        // segmentCode: "",
        segmentName: "",
      },
      // 查询表单
      searchForm: {},
      // 列表加载状态
      loading: false,
      // 非多个禁用
      multiple: true,
      // 列表数据
      sectionList: [],
      // 列表已选数组
      checkIds: [],
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 弹窗标题
      addTitle: "",
      // 弹窗显隐控制
      addVisible: false,
      // 传弹窗数据
      dialogItem: {},
      // 路线下拉数据
      routeList: [],
      // 管理站下拉数据
      deptIdList: [],
    };
  },
  mounted() {
    this.getTableList();
  },
  created() {
    this.getRoadList();
    this.getDeptIdList();
  },
  methods: {
    /**
     * @description: 获取管理站下拉数据
     * @return {*}
     */
    getDeptIdList() {
      getDeptList().then(({ data }) => {
        this.deptIdList = data;
      });
    },

    /**
     * @description: 获取路线下拉数据
     * @return {*}
     */
    getRoadList() {
      getSegmentList().then(({ code, data }) => {
        if (code === 200) {
          this.routeList = data;
        }
      });
    },

    /**
     * @description: 点击搜索事件
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
      this.getTableList();
    },

    /**
     * @description: 点击重置事件
     * @return {*}
     */
    resetQuery() {
      this.sectionForm = {
        // segmentCode: "",
        segmentName: "",
      };
      this.searchForm = {};
      this.getTableList();
    },

    /**
     * @description: 获取列表数据
     * @return {*}
     */
    getTableList() {
      const params = {
        ...this.searchForm,
        ...this.pagination,
      };
      getSectionList(params).then(({ code, data }) => {
        if (code === 200) {
          this.sectionList = data.rows;
          this.tableTotal = data.total;
        }
      });
    },

    /**
     * @description: 点击新增
     * @return {*}
     */
    handleAdd() {
      this.addTitle = "新增路段";
      this.dialogItem = {
        title: "新增",
      };
      this.addVisible = true;
    },

    /**
     * @description: 点击导出
     * @return {*}
     */
    handleExport() {},

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

    /**
     * @description: 列表修改事件
     * @return {*}
     */
    editTable(item) {
      this.addTitle = "修改路段";
      this.dialogItem = {
        title: "修改",
        item,
      };
      this.addVisible = true;
    },

    /**
     * @description: 列表删除/批量删除事件
     * @return {*}
     */
    deleteTable(row) {
      const checkIds = row ? [row.id] : this.checkIds;
      if (!checkIds.length) {
        this.$modal.msgWarning("请选择要删除的记录");
        return;
      }
      this.$modal
        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
        .then(() => {
          return deleteSection(checkIds);
        })
        .then(() => {
          this.getTableList();
          this.$refs.roadTable.clearSelection();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

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

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

    /**
     * @description: 关闭弹窗事件
     * @return {*}
     */
    addCancel() {
      this.addVisible = false;
      this.addTitle = "";
      this.dialogItem = {};
      this.getTableList();
    },
  },
};
</script>

<style lang="scss" scoped>
.section-content {
  padding: 1rem;
}

.section-form {
  width: 100%;
  height: 5%;
}

.btn-row {
  height: 6%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

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