<template>
  <div class="page-content">
    <!-- 统计卡片 -->
    <ElRow :gutter="20" style="margin-bottom: 20px">
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElCard shadow="hover">
          <div class="stat-card">
            <div
              class="stat-icon"
              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
            >
              <i class="iconfont-sys">&#xe71d;</i>
            </div>
            <div class="stat-content">
              <div class="stat-label">佣金总额</div>
              <div class="stat-value">¥{{ accountInfo.totalCommission.toFixed(2) }}</div>
            </div>
          </div>
        </ElCard>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElCard shadow="hover">
          <div class="stat-card">
            <div
              class="stat-icon"
              style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
            >
              <i class="iconfont-sys">&#xe71e;</i>
            </div>
            <div class="stat-content">
              <div class="stat-label">可提现金额</div>
              <div class="stat-value">¥{{ accountInfo.availableAmount.toFixed(2) }}</div>
            </div>
          </div>
        </ElCard>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElCard shadow="hover">
          <div class="stat-card">
            <div
              class="stat-icon"
              style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
            >
              <i class="iconfont-sys">&#xe720;</i>
            </div>
            <div class="stat-content">
              <div class="stat-label">待入账金额</div>
              <div class="stat-value">¥{{ accountInfo.pendingAmount.toFixed(2) }}</div>
            </div>
          </div>
        </ElCard>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <ElCard shadow="hover">
          <div class="stat-card">
            <div
              class="stat-icon"
              style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
            >
              <i class="iconfont-sys">&#xe71f;</i>
            </div>
            <div class="stat-content">
              <div class="stat-label">已提现金额</div>
              <div class="stat-value">¥{{ accountInfo.withdrawnAmount.toFixed(2) }}</div>
            </div>
          </div>
        </ElCard>
      </ElCol>
    </ElRow>

    <!-- 操作按钮 -->
    <ElRow style="margin-bottom: 20px">
      <ElButton type="primary" @click="showWithdrawDialog">申请提现</ElButton>
      <ElButton @click="viewWithdrawHistory">提现记录</ElButton>
    </ElRow>

    <!-- 收支流水 -->
    <ElCard shadow="never">
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between">
          <span style="font-weight: 500">收支流水</span>
          <ElRadioGroup v-model="flowType" size="small">
            <ElRadioButton value="all">全部</ElRadioButton>
            <ElRadioButton value="income">收入</ElRadioButton>
            <ElRadioButton value="withdraw">提现</ElRadioButton>
          </ElRadioGroup>
        </div>
      </template>

      <ArtTable :data="filteredFlowData" index max-height="500">
        <template #default>
          <ElTableColumn label="流水号" prop="flowNo" min-width="180" />
          <ElTableColumn label="类型" prop="type">
            <template #default="scope">
              <ElTag :type="scope.row.type === 'income' ? 'success' : 'warning'">
                {{ scope.row.type === 'income' ? '收入' : '提现' }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn label="金额" prop="amount">
            <template #default="scope">
              <span
                :style="{
                  color:
                    scope.row.type === 'income'
                      ? 'var(--el-color-success)'
                      : 'var(--el-color-danger)'
                }"
              >
                {{ scope.row.type === 'income' ? '+' : '-' }}¥{{ scope.row.amount.toFixed(2) }}
              </span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="余额" prop="balance">
            <template #default="scope"> ¥{{ scope.row.balance.toFixed(2) }} </template>
          </ElTableColumn>
          <ElTableColumn label="说明" prop="description" show-overflow-tooltip />
          <ElTableColumn label="时间" prop="createTime" width="180" />
        </template>
      </ArtTable>
    </ElCard>

    <!-- 提现申请对话框 -->
    <ElDialog v-model="withdrawDialogVisible" title="申请提现" width="600px" align-center>
      <ElForm
        ref="withdrawFormRef"
        :model="withdrawForm"
        :rules="withdrawRules"
        label-width="120px"
      >
        <ElFormItem label="可提现金额">
          <span style="font-size: 20px; font-weight: 500; color: var(--el-color-success)">
            ¥{{ accountInfo.availableAmount.toFixed(2) }}
          </span>
        </ElFormItem>
        <ElFormItem label="提现金额" prop="amount">
          <ElInputNumber
            v-model="withdrawForm.amount"
            :min="1"
            :max="accountInfo.availableAmount"
            :precision="2"
            style="width: 100%"
          />
        </ElFormItem>
        <ElFormItem label="手续费">
          <span>¥{{ calculatedFee.toFixed(2) }}</span>
          <span style="margin-left: 8px; color: var(--el-text-color-secondary)">
            (费率: {{ feeRate * 100 }}%)
          </span>
        </ElFormItem>
        <ElFormItem label="实际到账">
          <span style="font-size: 18px; font-weight: 500; color: var(--el-color-success)">
            ¥{{ actualAmount.toFixed(2) }}
          </span>
        </ElFormItem>
        <ElFormItem label="收款银行" prop="bankName">
          <ElSelect
            v-model="withdrawForm.bankName"
            placeholder="请选择收款银行"
            style="width: 100%"
          >
            <ElOption label="中国工商银行" value="工商银行" />
            <ElOption label="中国建设银行" value="建设银行" />
            <ElOption label="中国农业银行" value="农业银行" />
            <ElOption label="中国银行" value="中国银行" />
            <ElOption label="招商银行" value="招商银行" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="银行账户" prop="bankAccount">
          <ElInput v-model="withdrawForm.bankAccount" placeholder="请输入银行账户" />
        </ElFormItem>
        <ElFormItem label="开户姓名" prop="accountName">
          <ElInput v-model="withdrawForm.accountName" placeholder="请输入开户姓名" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="withdrawDialogVisible = false">取消</ElButton>
          <ElButton type="primary" @click="submitWithdraw">提交申请</ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>

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

  defineOptions({ name: 'MyAccount' })

  const accountInfo = reactive({
    totalCommission: 158900.5,
    availableAmount: 58900.5,
    pendingAmount: 50000.0,
    withdrawnAmount: 50000.0
  })

  const flowType = ref('all')
  const withdrawDialogVisible = ref(false)
  const withdrawFormRef = ref<FormInstance>()
  const feeRate = 0.002 // 手续费率 0.2%

  const withdrawForm = reactive({
    amount: 0,
    bankName: '',
    bankAccount: '',
    accountName: ''
  })

  const withdrawRules = reactive<FormRules>({
    amount: [
      { required: true, message: '请输入提现金额', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value > accountInfo.availableAmount) {
            callback(new Error('提现金额不能大于可提现金额'))
          } else if (value < 1) {
            callback(new Error('提现金额不能小于1元'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ],
    bankName: [{ required: true, message: '请选择收款银行', trigger: 'change' }],
    bankAccount: [{ required: true, message: '请输入银行账户', trigger: 'blur' }],
    accountName: [{ required: true, message: '请输入开户姓名', trigger: 'blur' }]
  })

  const flowData = ref([
    {
      id: '1',
      flowNo: 'FL202601090001',
      type: 'income',
      amount: 1580.0,
      balance: 58900.5,
      description: '套餐销售佣金',
      createTime: '2026-01-09 10:30:00'
    },
    {
      id: '2',
      flowNo: 'FL202601080001',
      type: 'withdraw',
      amount: 5000.0,
      balance: 57320.5,
      description: '提现到账',
      createTime: '2026-01-08 15:00:00'
    },
    {
      id: '3',
      flowNo: 'FL202601070001',
      type: 'income',
      amount: 2360.0,
      balance: 62320.5,
      description: '号卡分配佣金',
      createTime: '2026-01-07 14:20:00'
    }
  ])

  const calculatedFee = computed(() => {
    return withdrawForm.amount * feeRate
  })

  const actualAmount = computed(() => {
    return withdrawForm.amount - calculatedFee.value
  })

  const filteredFlowData = computed(() => {
    if (flowType.value === 'all') return flowData.value
    return flowData.value.filter((item) => item.type === flowType.value)
  })

  const showWithdrawDialog = () => {
    withdrawForm.amount = 0
    withdrawForm.bankName = ''
    withdrawForm.bankAccount = ''
    withdrawForm.accountName = ''
    withdrawDialogVisible.value = true
  }

  const submitWithdraw = async () => {
    if (!withdrawFormRef.value) return
    await withdrawFormRef.value.validate((valid) => {
      if (valid) {
        ElMessage.success('提现申请提交成功，请等待审核')
        withdrawDialogVisible.value = false
      }
    })
  }

  const viewWithdrawHistory = () => {
    ElMessage.info('查看提现记录')
  }
</script>

<style lang="scss" scoped>
  .page-content {
    .stat-card {
      display: flex;
      gap: 16px;
      align-items: center;

      .stat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        font-size: 28px;
        color: white;
        border-radius: 12px;
      }

      .stat-content {
        flex: 1;

        .stat-label {
          margin-bottom: 8px;
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }

        .stat-value {
          font-size: 24px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }
    }
  }
</style>
