<template>
    <div class="bind-list">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form :inline="true" :model="queryParams" ref="queryForm">
          <el-form-item label="设备SN" prop="sn">
            <el-input v-model="queryParams.sn" placeholder="请输入设备SN" clearable />
          </el-form-item>
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
              <el-option label="全部" value="" />
              <el-option label="绑定" value="bind" />
              <el-option label="解绑" value="unbind" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户类型" prop="userType">
            <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
              <el-option label="全部" value="" />
              <el-option label="商户" value="merchant" />
            </el-select>
          </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>
  
      <!-- 表格区域 -->
      <el-table
        v-loading="loading"
        :data="filteredList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="时间" align="center" prop="time" sortable />
        <el-table-column label="设备" align="center" prop="deviceSn" sortable />
        <el-table-column label="用户" align="center" prop="user" sortable />
        <el-table-column label="用户类型" align="center" prop="userType">
          <template #default="scope">
            <el-tag size="mini" type="info">{{ scope.row.userType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" prop="type">
          <template #default="scope">
            <el-tag size="mini" :type="scope.row.type === '绑定' ? 'success' : 'danger'">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  export default {
    name: "BindList",
    data() {
      return {
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 绑定记录表格数据（模拟数据）
        bindList: [
          {
            id: 1,
            time: '2025-01-07 22:01:39',
            deviceSn: 'SN6080708',
            user: '微信yWKI',
            userType: '商户',
            type: '绑定'
          },
          {
            id: 2,
            time: '2025-01-07 22:01:31',
            deviceSn: 'SN6080708',
            user: '微信yWKI',
            userType: '商户',
            type: '解绑'
          },
          {
            id: 3,
            time: '2025-01-07 21:58:35',
            deviceSn: 'SN6080708',
            user: '微信yWKI',
            userType: '商户',
            type: '绑定'
          },
          {
            id: 4,
            time: '2025-01-07 21:58:16',
            deviceSn: 'SN6080708',
            user: '微信yWKI',
            userType: '商户',
            type: '解绑'
          },
          {
            id: 5,
            time: '2025-01-06 18:51:10',
            deviceSn: 'SN6080708',
            user: '微信yWKI',
            userType: '商户',
            type: '绑定'
          }
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          sn: undefined,
          userName: undefined,
          type: undefined,
          userType: undefined
        }
      };
    },
    computed: {
      filteredList() {
        let list = [...this.bindList];
        
        // 根据查询条件筛选
        if (this.queryParams.sn) {
          list = list.filter(item => item.deviceSn.includes(this.queryParams.sn));
        }
        if (this.queryParams.userName) {
          list = list.filter(item => item.user.includes(this.queryParams.userName));
        }
        if (this.queryParams.type) {
          const type = this.queryParams.type === 'bind' ? '绑定' : '解绑';
          list = list.filter(item => item.type === type);
        }
        if (this.queryParams.userType) {
          list = list.filter(item => item.userType === '商户');
        }
  
        // 更新总数
        this.total = list.length;
  
        // 分页处理
        const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
        const end = start + this.queryParams.pageSize;
        return list.slice(start, end);
      }
    },
    methods: {
      /** 查询绑定记录列表 */
      getList() {
        // 使用计算属性自动处理
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 20,
          sn: undefined,
          userName: undefined,
          type: undefined,
          userType: undefined
        };
        this.getList();
      },
      /** 多选框选中数据 */
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
      }
    }
  };
  </script>
  
  <style scoped>
  .bind-list {
    padding: 20px;
  }
  
  .search-area {
    margin-bottom: 20px;
  }
  </style>