<template>
  <div class="order-list-container">
    <!-- 主容器 -->
    <el-card class="main-container" shadow="never">
      <!-- 搜索和操作栏 -->
      <div class="filter-section">
        <div class="filter-content">
          <el-form :inline="true" :model="queryParams" class="filter-form">
            <el-form-item label="关键词">
              <el-input v-model="queryParams.key" placeholder="订单名称/ID" clearable style="width: 150px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="用户ID">
              <el-input v-model="queryParams.user_id" placeholder="用户ID" clearable style="width: 120px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="用户关键词">
              <el-input v-model="queryParams.user_key" placeholder="用户名/手机号/邮箱" clearable style="width: 180px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryParams.state" placeholder="全部" clearable style="width: 120px">
                <el-option label="待支付" value="0" />
                <el-option label="已支付" value="1" />
                <el-option label="已失效" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <el-icon><Search /></el-icon>搜索
              </el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="action-bar">
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>新增订单
            </el-button>
            <el-button type="success" @click="fetchOrderList">
              <el-icon><Refresh /></el-icon>刷新
            </el-button>
          </div>
        </div>
      </div>

      <!-- 订单列表 -->
      <div class="table-section">
        <!-- 骨架屏 -->
        <div v-if="loading" class="skeleton-container">
          <div v-for="i in 5" :key="i" class="skeleton-row">
            <div class="skeleton-cell skeleton-checkbox"></div>
            <div class="skeleton-cell skeleton-id"></div>
            <div class="skeleton-cell skeleton-name"></div>
            <div class="skeleton-cell skeleton-user"></div>
            <div class="skeleton-cell skeleton-price"></div>
            <div class="skeleton-cell skeleton-status"></div>
            <div class="skeleton-cell skeleton-time"></div>
            <div class="skeleton-cell skeleton-action"></div>
          </div>
        </div>

        <el-table
          v-else
          v-loading="loading"
          :data="orderList"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="订单ID" width="100" />
          <el-table-column prop="name" label="订单名称" min-width="180" />
          <el-table-column prop="userId" label="用户ID" width="100" />
          <el-table-column prop="commodityId" label="商品ID" width="100" />
          <el-table-column label="表名" width="120">
            <template #default="{ row }">
              <el-tag size="small">{{ row.table  || '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" width="120">
            <template #default="{ row }">
              <span class="amount">¥{{ (row.price / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="续费价格" width="120">
            <template #default="{ row }">
              <span class="renew-price">¥{{ (row.renewPrice / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="80">
            <template #default="{ row }">
              <span>{{ row.payNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.state)">
                {{ getStatusText(row.state) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="支付方式" width="100">
            <template #default="{ row }">
              <span>{{ row.payType || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="过期时间" width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.expireTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.CreatedAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button type="primary" link @click="handleView(row)">查看</el-button>
                <el-button type="warning" link @click="handleEdit(row)">编辑</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.count"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          class="pagination"
        />
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="订单详情"
      width="800px"
      append-to-body
    >
      <el-descriptions :column="2" border v-if="orderDetail">
        <el-descriptions-item label="订单ID">{{ orderDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="订单名称">{{ orderDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ orderDetail.userId }}</el-descriptions-item>
        <el-descriptions-item label="商品ID">{{ orderDetail.commodityId }}</el-descriptions-item>
        <el-descriptions-item label="表名">{{ orderDetail.table }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ orderDetail.payNum }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">¥{{ (orderDetail.price / 100).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="续费价格">¥{{ (orderDetail.renewPrice / 100).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getStatusType(orderDetail.state)">
            {{ getStatusText(orderDetail.state) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ orderDetail.payType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="过期时间">{{ formatDate(orderDetail.expireTime) }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(orderDetail.CreatedAt) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDate(orderDetail.UpdatedAt) }}</el-descriptions-item>
        <el-descriptions-item label="参数信息">{{ orderDetail.args || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ orderDetail.note || '无' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 订单表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增订单' : '编辑订单'"
      width="700px"
      append-to-body
    >
      <el-form
        ref="orderFormRef"
        :model="orderForm"
        :rules="orderRules"
        label-width="120px"
      >
        <el-form-item label="订单名称" prop="name">
          <el-input v-model="orderForm.name" placeholder="请输入订单名称" />
        </el-form-item>
        <el-form-item label="所属表" prop="table">
          <el-input v-model="orderForm.table" placeholder="请输入所属表" />
        </el-form-item>
        <el-form-item label="用户ID" prop="user_id">
          <div class="selector-field">
            <div class="selector-info" v-if="selectedUserInfo">
              <el-tag type="primary" effect="plain">
                ID: {{ orderForm.user_id }} - {{ selectedUserInfo.user_name }}
              </el-tag>
            </div>
            <div class="selector-actions">
              <el-button type="primary" @click="userSelectorVisible = true">
                <el-icon><User /></el-icon>
                {{ orderForm.user_id ? '更换用户' : '选择用户' }}
              </el-button>
              <el-button v-if="orderForm.user_id" @click="clearUser">清除</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商品ID" prop="commodity_id">
          <div class="selector-field">
            <div class="selector-info" v-if="selectedProductInfo">
              <el-tag type="success" effect="plain">
                ID: {{ orderForm.commodity_id }} - {{ selectedProductInfo.name }}
              </el-tag>
            </div>
            <div class="selector-actions">
              <el-button type="success" @click="productSelectorVisible = true">
                <el-icon><ShoppingCart /></el-icon>
                {{ orderForm.commodity_id ? '更换商品' : '选择商品' }}
              </el-button>
              <el-button v-if="orderForm.commodity_id" @click="clearProduct">清除</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="购买数量" prop="pay_num">
          <el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
        </el-form-item>
        <el-form-item label="价格(分)" prop="price">
          <el-input-number v-model="orderForm.price" :min="0" placeholder="请输入价格(分)" style="width: 100%" />
        </el-form-item>
        <el-form-item label="续费价格(分)" prop="renew_price">
          <el-input-number v-model="orderForm.renew_price" :min="0" placeholder="请输入续费价格(分)" style="width: 100%" />
        </el-form-item>
        <el-form-item label="过期时间" prop="expire_time">
          <el-input-number v-model="orderForm.expire_time" :min="0" placeholder="请输入过期时间(时间戳)" style="width: 100%" />
        </el-form-item>
        <el-form-item label="优惠码ID" prop="discount_code_id">
          <div class="selector-field">
            <div class="selector-info" v-if="selectedDiscountCodeInfo">
              <el-tag type="warning" effect="plain">
                ID: {{ orderForm.discount_code_id }} - {{ selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code }}
              </el-tag>
            </div>
            <div class="selector-actions">
              <el-button type="warning" @click="discountCodeSelectorVisible = true">
                <el-icon><Ticket /></el-icon>
                {{ orderForm.discount_code_id ? '更换优惠码' : '选择优惠码' }}
              </el-button>
              <el-button v-if="orderForm.discount_code_id" @click="clearDiscountCode">清除</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="代金券ID" prop="coupon_id">
          <div class="selector-field">
            <div class="selector-info" v-if="selectedVoucherInfo">
              <el-tag type="danger" effect="plain">
                ID: {{ orderForm.coupon_id }} - {{ selectedVoucherInfo.name || selectedVoucherInfo.code }}
              </el-tag>
            </div>
            <div class="selector-actions">
              <el-button type="danger" @click="voucherSelectorVisible = true">
                <el-icon><Money /></el-icon>
                {{ orderForm.coupon_id ? '更换代金券' : '选择代金券' }}
              </el-button>
              <el-button v-if="orderForm.coupon_id" @click="clearVoucher">清除</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="订单状态" prop="state">
          <el-radio-group v-model="orderForm.state">
            <el-radio :label="0">待支付</el-radio>
            <el-radio :label="1">已支付</el-radio>
            <el-radio :label="2">已失效</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付方式" prop="pay_type">
          <el-input v-model="orderForm.pay_type" placeholder="请输入支付类型" />
        </el-form-item>
        <el-form-item label="订单参数" prop="args">
          <el-input v-model="orderForm.args" placeholder="请输入订单参数" />
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="orderForm.note" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户选择器 -->
    <UserListSelector
      v-model="userSelectorVisible"
      :current-user-id="orderForm.user_id"
      @confirm="handleUserSelect"
    />

    <!-- 商品选择器 -->
    <ProductSelector
      v-model="productSelectorVisible"
      :current-product-id="orderForm.commodity_id"
      @confirm="handleProductSelect"
    />

    <!-- 优惠码选择器 -->
    <DiscountCodeSelector
      v-model="discountCodeSelectorVisible"
      :current-code-id="orderForm.discount_code_id"
      @confirm="handleDiscountCodeSelect"
    />

    <!-- 代金券选择器 -->
    <VoucherSelector
      v-model="voucherSelectorVisible"
      :current-voucher-id="orderForm.coupon_id"
      @confirm="handleVoucherSelect"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money } from '@element-plus/icons-vue'
import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
import UserListSelector from '@/components/admin/UserListSelector.vue'
import ProductSelector from '@/components/admin/ProductSelector.vue'
import DiscountCodeSelector from '@/components/admin/DiscountCodeSelector.vue'
import VoucherSelector from '@/components/admin/VoucherSelector.vue'

// 查询参数
const queryParams = reactive({
  page: 1,
  count: 10,
  key: '',
  state: '',
  user_id: '',
  user_key: ''
})

// 订单表单
const orderForm = reactive({
  order_id: undefined,
  name: '',
  table: '',
  user_id: undefined,
  commodity_id: 0,
  pay_num: 1,
  price: 0,
  renew_price: 0,
  expire_time: 0,
  discount_code_id: 0,
  coupon_id: 0,
  state: 0,
  pay_type: '',
  args: '',
  note: ''
})

const orderRules = {
  name: [
    { required: true, message: '请输入订单名称', trigger: 'blur' }
  ],
  table: [
    { required: true, message: '请输入所属表', trigger: 'blur' }
  ],
  user_id: [
    { required: true, message: '请输入用户ID', trigger: 'blur' },
    { type: 'number', message: '用户ID必须是数字', trigger: 'blur' }
  ],
  coupon_id: [
    { required: true, message: '请输入代金券ID', trigger: 'blur' },
    { type: 'number', message: '代金券ID必须是数字', trigger: 'blur' }
  ],
  pay_num: [
    { required: true, message: '请输入购买数量', trigger: 'blur' }
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' }
  ]
}

// 状态数据
const loading = ref(false)
const orderList = ref([])
const orderDetail = ref(null)
const total = ref(0)
const selectedRows = ref([])
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const dialogType = ref('add')
const orderFormRef = ref(null)

// 选择器弹窗状态
const userSelectorVisible = ref(false)
const productSelectorVisible = ref(false)
const discountCodeSelectorVisible = ref(false)
const voucherSelectorVisible = ref(false)

// 选择的显示信息
const selectedUserInfo = ref(null)
const selectedProductInfo = ref(null)
const selectedDiscountCodeInfo = ref(null)
const selectedVoucherInfo = ref(null)

// 获取订单列表
const fetchOrderList = async () => {
  loading.value = true
  try {
    // 过滤空值参数
    const params = {}
    Object.keys(queryParams).forEach(key => {
      if (queryParams[key] !== '' && queryParams[key] !== null && queryParams[key] !== undefined) {
        params[key] = queryParams[key]
      }
    })
    const res = await getOrderList(params)
    console.log('订单列表数据:', res.data)
    if (res.data.code === 200) {
      orderList.value = res.data.data.list || []
      total.value = res.data.data.all_count || 0
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 获取订单状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',  // 待支付
    1: 'success', // 已支付
    2: 'info',     // 已失效
  }
  return statusMap[status] || 'info'
}

// 获取订单状态文本
// state 0:未支付 1:已支付 2:已失效
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已失效'
  }
  return statusMap[status] || '未知'
}

// 查询
const handleQuery = () => {
  queryParams.page = 1
  fetchOrderList()
}

// 重置查询
const resetQuery = () => {
  queryParams.key = ''
  queryParams.state = ''
  queryParams.user_id = ''
  queryParams.user_key = ''
  queryParams.page = 1
  fetchOrderList()
}

// 选择项变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 分页
const handleSizeChange = (size) => {
  queryParams.count = size
  fetchOrderList()
}

const handleCurrentChange = (page) => {
  queryParams.page = page
  fetchOrderList()
}

// 新增订单
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  clearAllSelections()
  Object.assign(orderForm, {
    order_id: undefined,
    name: '',
    table: '',
    user_id: undefined,
    commodity_id: 0,
    pay_num: 1,
    price: 0,
    renew_price: 0,
    expire_time: 0,
    discount_code_id: 0,
    coupon_id: 0,
    state: 0,
    pay_type: '',
    args: '',
    note: ''
  })
  orderFormRef.value?.resetFields()
}

// 查看订单详情
const handleView = async (row) => {
  try {
    const res = await getOrderDetail({ order_id: row.id })
    if (res.data.code === 200) {
      orderDetail.value = res.data.data
      detailDialogVisible.value = true
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
  }
}

// 编辑订单
const handleEdit = (row) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  clearAllSelections()
  
  Object.assign(orderForm, {
    order_id: row.id,
    name: row.name,
    table: row.table,
    user_id: row.userId,
    commodity_id: row.commodityId,
    pay_num: row.payNum,
    price: row.price,
    renew_price: row.renewPrice,
    expire_time: row.expireTime ? new Date(row.expireTime).getTime() / 1000 : 0,
    discount_code_id: 0, // 从详情接口获取
    coupon_id: 0, // 从详情接口获取
    state: row.state,
    pay_type: row.payType || '',
    args: row.args || '',
    note: row.note || ''
  })
  
  // 设置显示信息（只显示ID，名称需要从选择器中获取）
  if (row.userId) {
    selectedUserInfo.value = { user_id: row.userId, user_name: `用户${row.userId}` }
  }
  if (row.commodityId) {
    selectedProductInfo.value = { id: row.commodityId, name: `商品${row.commodityId}` }
  }
}

// 删除订单
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除订单 ${row.name} 吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteOrder({ id: row.id })
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
        fetchOrderList()
      }
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.error(error.response?.data?.message || '删除失败')
    }
  }).catch(() => {})
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }
  ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('批量删除成功')
    fetchOrderList()
  }).catch(() => {})
}

// 提交表单
const submitForm = () => {
  orderFormRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        // 准备提交的数据
        const submitData = {
          name: orderForm.name,
          table: orderForm.table,
          user_id: Number(orderForm.user_id),
          commodity_id: Number(orderForm.commodity_id),
          pay_num: Number(orderForm.pay_num),
          price: Number(orderForm.price),
          renew_price: Number(orderForm.renew_price),
          expire_time: Number(orderForm.expire_time),
          discount_code_id: Number(orderForm.discount_code_id),
          coupon_id: Number(orderForm.coupon_id),
          state: Number(orderForm.state),
          pay_type: orderForm.pay_type || '',
          args: orderForm.args || '',
          note: orderForm.note || ''
        }
        
        // 如果是编辑，添加order_id
        if (dialogType.value === 'edit') {
          submitData.order_id = Number(orderForm.order_id)
        }
        
        console.log('提交订单数据:', submitData)
        
        let res
        if (dialogType.value === 'add') {
          res = await createOrder(submitData)
        } else {
          res = await updateOrder(submitData)
        }
        
        if (res.data.code === 200) {
          ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
          dialogVisible.value = false
          fetchOrderList()
        }
      } catch (error) {
        console.error('操作失败:', error)
        ElMessage.error(error.response?.data?.message || '操作失败')
      }
    }
  })
}

// 用户选择处理
const handleUserSelect = (user) => {
  orderForm.user_id = user.user_id
  selectedUserInfo.value = user
}

const clearUser = () => {
  orderForm.user_id = undefined
  selectedUserInfo.value = null
}

// 商品选择处理
const handleProductSelect = (product) => {
  orderForm.commodity_id = product.id
  selectedProductInfo.value = product
  // 自动填充表名
  if (product.table) {
    orderForm.table = product.table
  }
}

const clearProduct = () => {
  orderForm.commodity_id = 0
  selectedProductInfo.value = null
}

// 优惠码选择处理
const handleDiscountCodeSelect = (code) => {
  orderForm.discount_code_id = code.id
  selectedDiscountCodeInfo.value = code
}

const clearDiscountCode = () => {
  orderForm.discount_code_id = 0
  selectedDiscountCodeInfo.value = null
}

// 代金券选择处理
const handleVoucherSelect = (voucher) => {
  orderForm.coupon_id = voucher.id
  selectedVoucherInfo.value = voucher
}

const clearVoucher = () => {
  orderForm.coupon_id = 0
  selectedVoucherInfo.value = null
}

// 清除所有选择信息
const clearAllSelections = () => {
  selectedUserInfo.value = null
  selectedProductInfo.value = null
  selectedDiscountCodeInfo.value = null
  selectedVoucherInfo.value = null
}

// 初始化
onMounted(() => {
  fetchOrderList()
})
</script>

<style scoped>
.order-list-container {
  padding: 0;
}

.main-container {
  border: 1px solid #e1e8ed;
  background: #ffffff;
}

.filter-section {
  padding: 0;
  border-bottom: 1px solid #e1e8ed;
  background: #fafbfc;
}

.filter-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 8px;
}

.filter-form :deep(.el-form-item__label) {
  font-size: 13px;
}

.action-bar {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.table-section {
  padding: 0;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.amount {
  color: #f56c6c;
  font-weight: bold;
  font-size: 14px;
}

.renew-price {
  color: #409eff;
  font-weight: 500;
  font-size: 14px;
}

.pagination {
  margin-top: 20px;
  padding: 16px 20px;
  border-top: 1px solid #e1e8ed;
  background: #fafbfc;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
}

/* 表格样式优化 */
:deep(.el-table) {
  border: none;
  color: #2c3e50;
}

:deep(.el-table__header) {
  background: #f8f9fa;
}

:deep(.el-table th) {
  background: #f8f9fa !important;
  border-bottom: 2px solid #e1e8ed;
  color: #2c3e50;
  font-weight: 600;
  font-size: 13px;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f0f2f5;
  color: #34495e;
}

:deep(.el-table tr:hover > td) {
  background-color: #f8f9fa !important;
}

:deep(.el-card__body) {
  padding: 0;
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 20px;
}

.skeleton-row {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 16px;
}

.skeleton-row:last-child {
  border-bottom: none;
}

.skeleton-cell {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-checkbox { width: 55px; }
.skeleton-id { width: 100px; }
.skeleton-name { width: 180px; }
.skeleton-user { width: 100px; }
.skeleton-price { width: 120px; }
.skeleton-status { width: 100px; }
.skeleton-time { width: 170px; }
.skeleton-action { width: 200px; height: 32px; }

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 选择器字段样式 */
.selector-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selector-info {
  display: flex;
  align-items: center;
}

.selector-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>
