<template>
  <div class="page-content">
    <ElRow>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElInput v-model="searchQuery" placeholder="号卡名称/编码" clearable></ElInput>
      </ElCol>
      <div style="width: 12px"></div>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElSelect v-model="operatorFilter" placeholder="运营商" clearable style="width: 100%">
          <ElOption label="中国移动" value="cmcc" />
          <ElOption label="中国联通" value="cucc" />
          <ElOption label="中国电信" value="ctcc" />
        </ElSelect>
      </ElCol>
      <div style="width: 12px"></div>
      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
        <ElButton v-ripple @click="handleSearch">搜索</ElButton>
        <ElButton v-ripple @click="showDialog('add')">新增号卡</ElButton>
      </ElCol>
    </ElRow>

    <ArtTable :data="filteredData" index>
      <template #default>
        <ElTableColumn label="号卡名称" prop="cardName" min-width="150" />
        <ElTableColumn label="号卡编码" prop="cardCode" />
        <ElTableColumn label="运营商" prop="operator">
          <template #default="scope">
            <ElTag :type="getOperatorTagType(scope.row.operator)">
              {{ getOperatorText(scope.row.operator) }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="套餐类型" prop="packageType" />
        <ElTableColumn label="月租(元)" prop="monthlyFee">
          <template #default="scope"> ¥{{ scope.row.monthlyFee.toFixed(2) }} </template>
        </ElTableColumn>
        <ElTableColumn label="库存" prop="stock" />
        <ElTableColumn label="状态" prop="status">
          <template #default="scope">
            <ElTag :type="scope.row.status === 'online' ? 'success' : 'info'">
              {{ scope.row.status === 'online' ? '上架' : '下架' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="创建时间" prop="createTime" width="180" />
        <ElTableColumn fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button link @click="showDialog('edit', scope.row)">编辑</el-button>
            <el-button
              link
              :type="scope.row.status === 'online' ? 'danger' : 'primary'"
              @click="toggleStatus(scope.row)"
            >
              {{ scope.row.status === 'online' ? '下架' : '上架' }}
            </el-button>
          </template>
        </ElTableColumn>
      </template>
    </ArtTable>

    <ElDialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增号卡' : '编辑号卡'"
      width="700px"
      align-center
    >
      <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
        <ElRow :gutter="20">
          <ElCol :span="12">
            <ElFormItem label="号卡名称" prop="cardName">
              <ElInput v-model="form.cardName" placeholder="请输入号卡名称" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="号卡编码" prop="cardCode">
              <ElInput v-model="form.cardCode" placeholder="请输入号卡编码" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow :gutter="20">
          <ElCol :span="12">
            <ElFormItem label="运营商" prop="operator">
              <ElSelect v-model="form.operator" placeholder="请选择运营商" style="width: 100%">
                <ElOption label="中国移动" value="cmcc" />
                <ElOption label="中国联通" value="cucc" />
                <ElOption label="中国电信" value="ctcc" />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="套餐类型" prop="packageType">
              <ElInput v-model="form.packageType" placeholder="例如：流量套餐" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow :gutter="20">
          <ElCol :span="12">
            <ElFormItem label="月租(元)" prop="monthlyFee">
              <ElInputNumber v-model="form.monthlyFee" :min="0" :precision="2" style="width: 100%" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="初始库存" prop="stock">
              <ElInputNumber v-model="form.stock" :min="0" style="width: 100%" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElFormItem label="号卡描述" prop="description">
          <ElInput v-model="form.description" type="textarea" :rows="3" placeholder="请输入号卡描述" />
        </ElFormItem>
        <ElFormItem label="状态">
          <ElSwitch v-model="form.status" active-value="online" inactive-value="offline" />
          <span style="margin-left: 8px; color: var(--el-text-color-secondary)">{{
            form.status === 'online' ? '上架' : '下架'
          }}</span>
        </ElFormItem>
      </ElForm>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="dialogVisible = false">取消</ElButton>
          <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'

  defineOptions({ name: 'SimCard' })

  interface SimCard {
    id?: string
    cardName: string
    cardCode: string
    operator: string
    packageType: string
    monthlyFee: number
    stock: number
    description?: string
    status: 'online' | 'offline'
    createTime?: string
  }

  const mockData = ref<SimCard[]>([
    {
      id: '1',
      cardName: '移动流量卡30GB',
      cardCode: 'CARD_CMCC_30GB',
      operator: 'cmcc',
      packageType: '流量套餐',
      monthlyFee: 29.9,
      stock: 1000,
      description: '移动30GB流量卡，全国通用',
      status: 'online',
      createTime: '2026-01-01 10:00:00'
    },
    {
      id: '2',
      cardName: '联通流量卡50GB',
      cardCode: 'CARD_CUCC_50GB',
      operator: 'cucc',
      packageType: '流量套餐',
      monthlyFee: 49.9,
      stock: 800,
      description: '联通50GB流量卡，全国通用',
      status: 'online',
      createTime: '2026-01-02 11:00:00'
    }
  ])

  const searchQuery = ref('')
  const operatorFilter = ref('')
  const dialogVisible = ref(false)
  const dialogType = ref<'add' | 'edit'>('add')
  const formRef = ref<FormInstance>()

  const form = reactive<SimCard>({
    cardName: '',
    cardCode: '',
    operator: '',
    packageType: '',
    monthlyFee: 0,
    stock: 0,
    description: '',
    status: 'online'
  })

  const rules = reactive<FormRules>({
    cardName: [{ required: true, message: '请输入号卡名称', trigger: 'blur' }],
    cardCode: [{ required: true, message: '请输入号卡编码', trigger: 'blur' }],
    operator: [{ required: true, message: '请选择运营商', trigger: 'change' }],
    monthlyFee: [{ required: true, message: '请输入月租', trigger: 'blur' }]
  })

  const filteredData = computed(() => {
    let data = mockData.value
    if (searchQuery.value) {
      data = data.filter(
        (item) => item.cardName.includes(searchQuery.value) || item.cardCode.includes(searchQuery.value)
      )
    }
    if (operatorFilter.value) {
      data = data.filter((item) => item.operator === operatorFilter.value)
    }
    return data
  })

  const getOperatorText = (operator: string) => {
    const map: Record<string, string> = { cmcc: '中国移动', cucc: '中国联通', ctcc: '中国电信' }
    return map[operator] || '未知'
  }

  const getOperatorTagType = (operator: string) => {
    const map: Record<string, string> = { cmcc: '', cucc: 'success', ctcc: 'warning' }
    return map[operator] || 'info'
  }

  const handleSearch = () => {}

  const showDialog = (type: 'add' | 'edit', row?: SimCard) => {
    dialogType.value = type
    dialogVisible.value = true
    if (type === 'edit' && row) {
      Object.assign(form, row)
    } else {
      Object.assign(form, {
        cardName: '',
        cardCode: '',
        operator: '',
        packageType: '',
        monthlyFee: 0,
        stock: 0,
        description: '',
        status: 'online'
      })
    }
  }

  const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
      if (valid) {
        if (dialogType.value === 'add') {
          mockData.value.push({
            ...form,
            id: Date.now().toString(),
            createTime: new Date().toLocaleString('zh-CN')
          })
          ElMessage.success('新增成功')
        } else {
          const index = mockData.value.findIndex((item) => item.id === form.id)
          if (index !== -1) mockData.value[index] = { ...form }
          ElMessage.success('修改成功')
        }
        dialogVisible.value = false
        formEl.resetFields()
      }
    })
  }

  const toggleStatus = (row: SimCard) => {
    const action = row.status === 'online' ? '下架' : '上架'
    ElMessageBox.confirm(`确定要${action}该号卡吗？`, `${action}确认`, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      row.status = row.status === 'online' ? 'offline' : 'online'
      ElMessage.success(`${action}成功`)
    })
  }
</script>
