<template>
  <div class="member-table">
    <div class="table-card">
      <div class="table-header">
        <p>会员权益</p>
        <div class="member-intro">
          <el-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom"><h-icon type="register_help"></h-icon></el-tooltip>
        </div>
        
        <div class="search-wrapper">
          <el-input
            v-model="form.snCode"
            placeholder="搜索相机SN码"
            class="search-input"
          >
            <template #suffix>
              <h-icon
                class="search-btn"
                type="search"
                @click="handleKeywordSearch"
              />
            </template>
          </el-input>
        </div>
      </div>
      
      <div class="table-content">
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
          border
          v-loading="loading"
        >
          <el-table-column
            prop="packageName"
            label="会员权益ID"
            width="180"
            align="center"
          >
            <template #default="{ row }">
              <span>{{ row.packageName || '--' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="snCode"
            label="授权相机S/N码"
            width="200"
            align="center"
          >
            <template #default="{ row }">
              <span>{{ row.snCode || '未绑定' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="buyDate"
            label="购买日期"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              <span>{{ row.buyDate || '--' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="expiredDate"
            label="到期日期"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              <span :class="{ 'is-expired': isExpired(row.expiredDate) }">
                {{ row.expiredDate || '--' }}
              </span>
            </template>
          </el-table-column>
          
          <el-table-column
            label="操作"
            width="200"
            align="center"
          >
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button
                  type="primary"
                  link
                  @click="handleBind(row)" 
                >
                  {{ row.snCode ? '解除' : '授权' }}
                </el-button>
                <el-button
                  type="primary"
                  link
                  @click="handleRenew(row)"
                >
                  续费
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          v-if="total > 0"
          v-model:current-page="form.pageNum"
          v-model:page-size="form.pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
        />
        
        <div v-if="total === 0 && !loading" class="no-data">
          <div class="no-data-img"></div>
          <p v-if="isSearching">
            未找到相关数据
          </p>
          <p v-else>
            暂无会员数据，<el-button type="primary" link @click="goToBuy">去购买</el-button>
          </p>
        </div>
      </div>
    </div>
    
    <!-- 绑定设备弹窗 -->
    <el-dialog
      v-model="showBindDialog"
      title="绑定设备"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="bind-form">
        <el-form :model="bindForm" label-width="120px">
          <el-form-item label="设备序列号:">
            <el-input
              v-model="bindForm.snCode"
              placeholder="请输入设备序列号"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="showBindDialog = false">取消</el-button>
        <el-button type="primary" @click="handleBindConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// import { Search } from '@element-plus/icons-vue'

// 响应式数据
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const showBindDialog = ref(false)
const selectedItem = ref({})
const isSearching = ref(false)

const form = reactive({
  pageNum: 1,
  pageSize: 10,
  snCode: ''
})

const bindForm = reactive({
  snCode: ''
})

// 方法
const getTableList = () => {
  loading.value = true
  // 模拟API调用
  setTimeout(() => {
    // 模拟数据
    const mockData = [
      {
        id: 1,
        packageName: '基础套餐',
        snCode: 'SN123456789',
        buyDate: '2024-01-15',
        expiredDate: '2024-12-15'
      },
      {
        id: 2,
        packageName: '高级套餐',
        snCode: '',
        buyDate: '2024-02-20',
        expiredDate: '2024-11-20'
      },
      {
        id: 3,
        packageName: '专业套餐',
        snCode: 'SN987654321',
        buyDate: '2023-12-10',
        expiredDate: '2024-01-10'
      }
    ]
    
    tableData.value = mockData
    total.value = mockData.length
    loading.value = false
  }, 1000)
}

const handleKeywordSearch = () => {
  form.pageNum = 1
  isSearching.value = !!form.snCode
  getTableList()
}

const handleSizeChange = (size) => {
  form.pageSize = size
  getTableList()
}

const handleCurrentChange = (page) => {
  form.pageNum = page
  getTableList()
}

const handleBind = (item) => {
  selectedItem.value = item
  bindForm.snCode = item.snCode || ''
  showBindDialog.value = true
}

const handleBindConfirm = () => {
  if (!bindForm.snCode.trim()) {
    ElMessage.warning('请输入设备序列号')
    return
  }
  
  // 模拟绑定API调用
  setTimeout(() => {
    ElMessage.success('绑定成功')
    showBindDialog.value = false
    getTableList()
  }, 1000)
}

const handleRenew = (item) => {
  selectedItem.value = item
  ElMessage.info('跳转到续费页面')
  // 这里可以添加路由跳转逻辑
}

const goToBuy = () => {
  ElMessage.info('跳转到购买页面')
  // 这里可以添加路由跳转逻辑
}

const isExpired = (date) => {
  if (!date) return false
  return new Date(date) < new Date()
}

onMounted(() => {
  getTableList()
})
</script>

<style lang="less" scoped>
.member-table {
  .table-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .table-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 30px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    
    p {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
    
    .member-intro {
      position: relative;
      margin-left: 10px;
      
      .help-icon {
        cursor: pointer;
        color: #999;
        font-size: 14px;
      }
      
      &:hover .intro-tooltip {
        display: block;
      }
      
      .intro-tooltip {
        position: absolute;
        bottom: -15px;
        left: -50px;
        transform: translateY(100%);
        padding: 12px 16px;
        background: #333;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        display: none;
        z-index: 1000;
        
        &::before {
          content: '';
          position: absolute;
          top: -6px;
          left: 50px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid #333;
        }
        
        p {
          margin: 0;
          line-height: 1.4;
          
          &:not(:last-child) {
            margin-bottom: 8px;
          }
        }
      }
    }
    
    .search-wrapper {
      position: absolute;
      right: 30px;
      
      .search-input {
        width: 250px;
        
        :deep(.el-input__wrapper) {
          border-radius: 6px;
          height: 40px;
        }
      }
      
      .search-btn {
        cursor: pointer;
        color: #999;
      }
    }
  }
  
  .table-content {
    padding: 20px 30px 30px;
    
    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
    }
    
    .is-expired {
      color: #f56c6c;
    }
    
    .pagination {
      margin-top: 20px;
      justify-content: center;
    }
    
    .no-data {
      padding: 60px 0;
      text-align: center;
      color: #666;
      
      .no-data-img {
        width: 120px;
        height: 120px;
        margin: 0 auto 16px;
        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiBmaWxsPSIjRjVGNUY1Ii8+CjxwYXRoIGQ9Ik02MCA0MEMzNS44IDQwIDE2IDU5LjggMTYgODRTMzUuOCAxMjggNjAgMTI4UzEwNCAxMDguMiAxMDQgODRTODQuMiA0MCA2MCA0MFoiIGZpbGw9IiNEREREREQiLz4KPHBhdGggZD0iTTQ4IDc2QzQ4IDcyLjcgNTAuNyA3MCA1NCA3MEg2NkM2OS4zIDcwIDcyIDcyLjcgNzIgNzZWODhDNzIgOTEuMyA2OS4zIDk0IDY2IDk0SDU0QzUwLjcgOTQgNDggOTEuMyA0OCA4OFY3NloiIGZpbGw9IiNCQkJCQkIiLz4KPC9zdmc+Cg==') no-repeat center;
        background-size: contain;
      }
      
      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }
  
  .bind-form {
    padding: 20px 0;
  }
}

// Element Plus 样式覆盖
:deep(.el-table) {
  .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: #fafafa;
        color: #333;
        font-weight: 600;
      }
    }
  }
  
  .el-table__body-wrapper {
    .el-table__body {
      tr:hover > td {
        background-color: #f5f7fa;
      }
    }
  }
}

:deep(.el-pagination) {
  justify-content: flex-start!important;
  .el-pagination__total,
  .el-pagination__jump {
    color: #666;
  }
}
</style>
