<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-17 10:40:54
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-09 17:17:53
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\index.vue
 * @Description: 路线管理-终端管理
-->

<template>
  <div class="section-content">
    <!-- 搜索表单 -->
    <div class="section-form">
      <el-form :model="sectionForm" ref="queryForm" size="small" :inline="true" label-width="6rem">
        <el-form-item label="设备编号" prop="clientId">
          <el-input v-model="sectionForm.clientId" 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>
    </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="clientId" />
      <el-table-column label="所属车辆" align="center" prop="plateNo" />
      <el-table-column label="作业范围" align="center" prop="segmentCode" />
      <el-table-column label="设备状态" align="center" prop="name" />
      <el-table-column label="网络连接" align="center" prop="name" />
      <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-view" @click="viewTable(scope.row)">查看
          </el-button>
          <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="60%" append-to-body :close-on-click-modal="false"
      destroy-on-close @close="addCancel">
      <terminal-add v-if="addVisible" :dialogItem="dialogItem" @addCancel="addCancel"></terminal-add>
    </el-dialog>
  </div>
</template>

<script>
import { getTerminalList, deleteTerminal } from "@/api/xj/terminal";
import TerminalAdd from "./components/terminal-add.vue";

export default {
  components: { TerminalAdd },
  name: "RouteTerminal",
  data() {
    return {
      // 搜索表单
      sectionForm: {
        // segmentCode: "",
        clientId: "",
      },
      // 查询表单
      searchForm: {},
      // 列表加载状态
      loading: false,
      // 非多个禁用
      multiple: true,
      // 列表数据
      sectionList: [],
      // 列表已选数组
      checkIds: [],
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 弹窗标题
      addTitle: "",
      // 弹窗显隐控制
      addVisible: false,
      // 传弹窗数据
      dialogItem: {},
    };
  },
  mounted() { },
  created() {
    this.getTableList();
  },
  methods: {
    /**
     * @description: 点击搜索事件
     * @param {*} val
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
      this.getTableList();
    },

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

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

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

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

    /**
     * @description: 列表查看事件
     * @param {*} val
     * @return {*}
     */
    viewTable() { },

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

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

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

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

    /**
     * @description: 关闭弹窗事件
     * @param {*} val
     * @return {*}
     */
    addCancel() {
      this.addTitle = "";
      this.dialogItem = {};
      this.addVisible = false;
    },
  },
};
</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>
