<template>
  <ArtTableFullScreen>
    <div class="agent-recharge-page" id="table-full-screen">
      <!-- 搜索栏 -->
      <ArtSearchBar
        v-model:filter="searchForm"
        :items="searchFormItems"
        :show-expand="false"
        label-width="100"
        @reset="handleReset"
        @search="handleSearch"
      ></ArtSearchBar>

      <ElCard shadow="never" class="art-table-card">
        <!-- 表格头部 -->
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <ElButton
              type="primary"
              @click="showCreateDialog"
              v-if="hasAuth('agent_recharge:create')"
              >创建充值订单</ElButton
            >
          </template>
        </ArtTableHeader>

        <!-- 表格 -->
        <ArtTable
          ref="tableRef"
          row-key="id"
          :loading="loading"
          :data="rechargeList"
          :currentPage="pagination.page"
          :pageSize="pagination.page_size"
          :total="pagination.total"
          :marginTop="10"
          :actions="getActions"
          :inlineActionsCount="2"
          :actionsWidth="200"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <template #default>
            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </ArtTable>

        <!-- 创建充值订单对话框 -->
        <ElDialog
          v-model="createDialogVisible"
          title="创建充值订单"
          width="500px"
          @closed="handleCreateDialogClosed"
        >
          <ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
            <ElFormItem label="充值金额" prop="amount">
              <ElInputNumber
                v-model="createForm.amount"
                :min="0.01"
                :precision="2"
                :step="0.01"
                style="width: 100%"
                placeholder="请输入充值金额（元）"
              />
              <div style="margin-top: 8px; font-size: 12px; color: var(--el-text-color-secondary)">
                最小: ¥0.01，最大: 不限制
              </div>
            </ElFormItem>
            <ElFormItem label="支付方式" prop="payment_method">
              <ElSelect
                v-model="createForm.payment_method"
                placeholder="请选择支付方式"
                style="width: 100%"
              >
                <ElOption label="线下转账" value="offline" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="店铺" prop="shop_id">
              <ElCascader
                v-model="createForm.shop_id"
                :options="shopCascadeOptions"
                :props="shopCascadeProps"
                placeholder="请选择店铺"
                filterable
                clearable
                style="width: 100%"
                @change="handleShopChange"
              />
            </ElFormItem>
            <ElFormItem
              v-if="createForm.payment_method === 'offline'"
              label="支付凭证"
              prop="payment_voucher_key"
            >
              <VoucherUpload
                ref="uploadRef"
                v-model="createForm.payment_voucher_key"
                voucher-name="支付凭证"
                @uploading-change="voucherUploading = $event"
                @change="createFormRef?.validateField('payment_voucher_key')"
              />
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="createDialogVisible = false">取消</ElButton>
              <ElButton
                type="primary"
                @click="handleCreateRecharge"
                :loading="createLoading || voucherUploading"
                :disabled="voucherUploading"
              >
                {{ voucherUploading ? '凭证上传中...' : '确认创建' }}
              </ElButton>
            </div>
          </template>
        </ElDialog>

        <!-- 确认线下支付对话框 -->
        <ElDialog
          v-model="confirmPayDialogVisible"
          title="确认线下充值"
          width="25%"
          @closed="handleConfirmPayDialogClosed"
        >
          <ElForm
            ref="confirmPayFormRef"
            :model="confirmPayForm"
            :rules="confirmPayRules"
            label-width="80"
          >
            <ElFormItem label="充值单号">
              <span>{{ currentRecharge?.recharge_no }}</span>
            </ElFormItem>
            <ElFormItem label="充值金额">
              <span>{{ formatCurrency(currentRecharge?.amount || 0) }}</span>
            </ElFormItem>
            <ElFormItem label="操作密码" prop="operation_password">
              <ElInput
                v-model="confirmPayForm.operation_password"
                type="password"
                placeholder="请输入超级管理员统一设置的操作密码"
                show-password
              />
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="confirmPayDialogVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleConfirmPay" :loading="confirmPayLoading">
                确认支付
              </ElButton>
            </div>
          </template>
        </ElDialog>

        <!-- 支付凭证预览 -->
        <PaymentVoucherDialog
          :file-key="paymentVoucherFileKey"
          @close="paymentVoucherFileKey = ''"
        />
      </ElCard>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { h } from 'vue'
  import { useRouter } from 'vue-router'
  import { AgentRechargeService, ShopService } from '@/api/modules'
  import {
    ElMessage,
    ElTag,
    ElButton,
    ElCascader,
    ElInputNumber,
    ElSelect,
    ElOption
  } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
  import type {
    AgentRecharge,
    AgentRechargeQueryParams,
    AgentRechargeStatus,
    AgentRechargePaymentMethod,
    CreateAgentRechargeRequest,
    ConfirmOfflinePaymentRequest
  } from '@/types/api'
  import type { SearchFormItem } from '@/types'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { formatDateTime } from '@/utils/business/format'
  import { useAuth } from '@/composables/useAuth'
  import PaymentVoucherDialog from '@/components/business/PaymentVoucherDialog.vue'
  import VoucherUpload from '@/components/business/VoucherUpload.vue'

  defineOptions({ name: 'AgentRechargeList' })

  const router = useRouter()
  const { hasAuth } = useAuth()

  const loading = ref(false)
  const createLoading = ref(false)
  const voucherUploading = ref(false)
  const confirmPayLoading = ref(false)
  const tableRef = ref()
  const createDialogVisible = ref(false)
  const confirmPayDialogVisible = ref(false)
  const currentRecharge = ref<AgentRecharge | null>(null)
  const paymentVoucherFileKey = ref('')

  // 搜索表单初始值
  const initialSearchState: AgentRechargeQueryParams = {
    shop_id: undefined,
    status: undefined,
    dateRange: [],
    start_date: '',
    end_date: ''
  }

  // 搜索表单
  const searchForm = reactive<AgentRechargeQueryParams>({ ...initialSearchState })

  // 店铺选项
  const shopOptions = ref<any[]>([])
  // 店铺级联选择相关
  const shopCascadeOptions = ref<any[]>([])
  const shopCascadeProps = {
    lazy: true,
    checkStrictly: true,
    lazyLoad: async (node: any, resolve: any) => {
      const { level, value } = node
      const parentId = level === 0 ? undefined : value

      try {
        const res = await ShopService.getShopsCascade({ parent_id: parentId })
        if (res.code === 0) {
          const nodes = (res.data || []).map((item: any) => ({
            value: item.id,
            label: item.shop_name,
            leaf: !item.has_children
          }))
          resolve(nodes)
        } else {
          resolve([])
        }
      } catch (error) {
        console.error('加载店铺级联数据失败:', error)
        resolve([])
      }
    },
    value: 'value',
    label: 'label',
    children: 'children'
  }

  // 搜索表单配置
  const searchFormItems: SearchFormItem[] = [
    {
      label: '店铺',
      prop: 'shop_id',
      type: 'select',
      placeholder: '请选择店铺',
      options: () =>
        shopOptions.value.map((shop) => ({
          label: shop.shop_name,
          value: shop.id
        })),
      config: {
        clearable: true,
        filterable: true,
        remote: true,
        remoteMethod: (query: string) => searchShops(query)
      }
    },
    {
      label: '状态',
      prop: 'status',
      type: 'select',
      placeholder: '请选择状态',
      options: [
        { label: '待支付', value: 1 },
        { label: '已完成', value: 2 },
        { label: '已取消', value: 3 }
      ],
      config: {
        clearable: true
      }
    },
    {
      label: '开始至结束',
      prop: 'dateRange',
      type: 'date',
      config: {
        type: 'daterange',
        rangeSeparator: '至',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期',
        valueFormat: 'YYYY-MM-DD'
      }
    }
  ]

  // 分页
  const pagination = reactive({
    page: 1,
    page_size: 20,
    total: 0
  })

  // 列配置
  const columnOptions = [
    { label: '充值单号', prop: 'recharge_no' },
    { label: '店铺名称', prop: 'shop_name' },
    { label: '充值金额', prop: 'amount' },
    { label: '状态', prop: 'status' },
    { label: '支付方式', prop: 'payment_method' },
    { label: '支付通道', prop: 'payment_channel' },
    { label: '创建时间', prop: 'created_at' },
    { label: '支付时间', prop: 'paid_at' },
    { label: '完成时间', prop: 'completed_at' }
  ]

  const createFormRef = ref<FormInstance>()
  const confirmPayFormRef = ref<FormInstance>()
  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
  const MIN_RECHARGE_AMOUNT = 0.01

  const createRules = computed<FormRules>(() => {
    const rules: FormRules = {
      amount: [
        { required: true, message: '请输入充值金额', trigger: 'blur' },
        {
          validator: (_rule, value, callback) => {
            if (value == null || value === '') {
              callback()
              return
            }
            if (Number(value) < MIN_RECHARGE_AMOUNT) {
              callback(new Error(`充值金额最小为 ¥${MIN_RECHARGE_AMOUNT.toFixed(2)}`))
              return
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      payment_method: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
      shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }]
    }
    if (createForm.payment_method === 'offline') {
      rules.payment_voucher_key = [{ required: true, message: '请上传支付凭证', trigger: 'change' }]
    }
    return rules
  })

  const confirmPayRules = reactive<FormRules>({
    operation_password: [
      { required: true, message: '请输入超级管理员统一设置的操作密码', trigger: 'blur' }
    ]
  })

  const createForm = reactive<{
    amount: number
    payment_method: string
    shop_id: number | null
    payment_voucher_key?: string
  }>({
    amount: MIN_RECHARGE_AMOUNT,
    payment_method: '',
    shop_id: null,
    payment_voucher_key: undefined
  })

  const confirmPayForm = reactive<ConfirmOfflinePaymentRequest>({
    operation_password: ''
  })

  const rechargeList = ref<AgentRecharge[]>([])

  // 格式化货币 - 将分转换为元
  const formatCurrency = (amount: number): string => {
    return `¥${(amount / 100).toFixed(2)}`
  }

  // 获取状态标签类型
  const getStatusType = (
    status: AgentRechargeStatus
  ): 'warning' | 'success' | 'info' | 'danger' => {
    const statusMap: Record<AgentRechargeStatus, 'warning' | 'success' | 'info' | 'danger'> = {
      1: 'warning', // 待支付
      2: 'success', // 已支付
      3: 'success', // 已完成
      4: 'info', // 已关闭
      5: 'danger' // 已退款
    }
    return statusMap[status] || 'info'
  }

  // 获取状态文本（优先使用 status_name，否则使用本地映射）
  const getStatusText = (status: AgentRechargeStatus, statusName?: string): string => {
    if (statusName) return statusName
    const statusMap: Record<AgentRechargeStatus, string> = {
      1: '待支付',
      2: '已支付',
      3: '已完成',
      4: '已关闭',
      5: '已退款'
    }
    return statusMap[status] || '-'
  }

  // 获取支付方式文本
  const getPaymentMethodText = (method: AgentRechargePaymentMethod): string => {
    const methodMap: Record<AgentRechargePaymentMethod, string> = {
      wechat: '微信在线支付',
      offline: '线下转账'
    }
    return methodMap[method] || method
  }

  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    {
      prop: 'recharge_no',
      label: '充值单号',
      minWidth: 240,
      formatter: (row: AgentRecharge) => {
        return h(
          'span',
          {
            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
            onClick: (e: MouseEvent) => {
              e.stopPropagation()
              handleNameClick(row)
            }
          },
          row.recharge_no
        )
      }
    },
    {
      prop: 'shop_name',
      label: '店铺名称',
      minWidth: 150,
      showOverflowTooltip: true
    },
    {
      prop: 'amount',
      label: '充值金额',
      width: 120,
      formatter: (row: AgentRecharge) => formatCurrency(row.amount)
    },
    {
      prop: 'status',
      label: '状态',
      width: 100,
      formatter: (row: AgentRecharge) => {
        return h(ElTag, { type: getStatusType(row.status) }, () =>
          getStatusText(row.status, row.status_name)
        )
      }
    },
    {
      prop: 'payment_method',
      label: '支付方式',
      width: 120,
      formatter: (row: AgentRecharge) => getPaymentMethodText(row.payment_method)
    },
    {
      prop: 'payment_channel',
      label: '支付通道',
      width: 120,
      formatter: (row: AgentRecharge) => row.payment_channel || '-'
    },
    {
      prop: 'created_at',
      label: '创建时间',
      width: 180,
      formatter: (row: AgentRecharge) => formatDateTime(row.created_at)
    },
    {
      prop: 'paid_at',
      label: '支付时间',
      width: 180,
      formatter: (row: AgentRecharge) => (row.paid_at ? formatDateTime(row.paid_at) : '-')
    },
    {
      prop: 'completed_at',
      label: '完成时间',
      width: 180,
      formatter: (row: AgentRecharge) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
    }
  ])

  onMounted(() => {
    getTableData()
    loadShops()
  })

  let isFirstActivation = true
  onActivated(() => {
    if (!isFirstActivation) {
      getTableData()
    }
    isFirstActivation = false
  })

  // 加载店铺列表 - 改用级联查询
  const loadShops = async () => {
    try {
      // 加载顶级店铺用于级联选择
      const res2 = await ShopService.getShopsCascade({ parent_id: undefined })
      if (res2.code === 0) {
        shopCascadeOptions.value = (res2.data || []).map((item: any) => ({
          value: item.id,
          label: item.shop_name,
          leaf: !item.has_children
        }))
      }
    } catch (error) {
      console.error('Load shops failed:', error)
    }
  }

  // 搜索店铺（用于搜索表单远程搜索）
  const searchShops = async (query: string) => {
    try {
      const params: any = {
        page: 1,
        page_size: 20
      }
      if (query) {
        params.shop_name = query
      }
      const res = await ShopService.getShops(params)
      if (res.code === 0) {
        shopOptions.value = res.data.items || []
      }
    } catch (error) {
      console.error('Search shops failed:', error)
    }
  }

  // 处理店铺选择变化
  const handleShopChange = (value: any) => {
    if (Array.isArray(value) && value.length > 0) {
      createForm.shop_id = value[value.length - 1]
    } else {
      createForm.shop_id = null
    }
  }

  // 获取充值订单列表
  const getTableData = async () => {
    loading.value = true
    try {
      const params: AgentRechargeQueryParams = {
        page: pagination.page,
        page_size: pagination.page_size,
        shop_id: searchForm.shop_id,
        status: searchForm.status,
        start_date: searchForm.start_date || undefined,
        end_date: searchForm.end_date || undefined
      }
      const res = await AgentRechargeService.getAgentRecharges(params)
      if (res.code === 0) {
        rechargeList.value = res.data.items || []
        pagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
    } finally {
      loading.value = false
    }
  }

  // 重置搜索
  const handleReset = () => {
    Object.assign(searchForm, { ...initialSearchState })
    pagination.page = 1
    getTableData()
  }

  // 搜索
  const handleSearch = () => {
    // 处理日期范围
    if (searchForm.dateRange && Array.isArray(searchForm.dateRange)) {
      searchForm.start_date = searchForm.dateRange[0]
      searchForm.end_date = searchForm.dateRange[1]
    } else {
      searchForm.start_date = ''
      searchForm.end_date = ''
    }
    pagination.page = 1
    getTableData()
  }

  // 刷新表格
  const handleRefresh = () => {
    getTableData()
  }

  // 处理表格分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.page_size = newPageSize
    getTableData()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.page = newCurrentPage
    getTableData()
  }

  // 显示创建订单对话框
  const showCreateDialog = async () => {
    // 重新加载店铺列表，确保获取最新数据
    await loadShops()
    createForm.payment_method = ''
    createDialogVisible.value = true
  }

  // 对话框关闭后的清理
  const handleCreateDialogClosed = () => {
    createFormRef.value?.resetFields()
    createForm.amount = MIN_RECHARGE_AMOUNT
    createForm.payment_method = ''
    createForm.shop_id = null
    createForm.payment_voucher_key = undefined
    voucherUploading.value = false
    uploadRef.value?.clearFiles(false)
  }

  // 创建充值订单
  const handleCreateRecharge = async () => {
    const formRef = createFormRef.value
    if (!formRef) return
    if (voucherUploading.value) {
      ElMessage.warning('支付凭证上传中，请稍候')
      return
    }

    await formRef.validate(async (valid) => {
      if (valid) {
        createLoading.value = true
        try {
          const data: CreateAgentRechargeRequest = {
            amount: Math.round(createForm.amount * 100), // 元转分
            payment_method: createForm.payment_method as AgentRechargePaymentMethod,
            shop_id: createForm.shop_id!
          }

          if (createForm.payment_method === 'offline' && createForm.payment_voucher_key) {
            data.payment_voucher_key = createForm.payment_voucher_key
          }

          await AgentRechargeService.createAgentRecharge(data)
          ElMessage.success('充值订单创建成功')
          createDialogVisible.value = false
          formRef.resetFields()
          await getTableData()
        } catch (error) {
          console.error(error)
        } finally {
          createLoading.value = false
        }
      }
    })
  }

  // 显示确认支付对话框
  const handleShowConfirmPay = (row: AgentRecharge) => {
    currentRecharge.value = row
    confirmPayDialogVisible.value = true
  }

  // 确认支付对话框关闭后的清理
  const handleConfirmPayDialogClosed = () => {
    confirmPayFormRef.value?.resetFields()
    confirmPayForm.operation_password = ''
    currentRecharge.value = null
  }

  // 确认线下支付
  const handleConfirmPay = async () => {
    const formRef = confirmPayFormRef.value
    const recharge = currentRecharge.value
    if (!formRef || !recharge) return

    await formRef.validate(async (valid) => {
      if (valid) {
        confirmPayLoading.value = true
        try {
          await AgentRechargeService.confirmOfflinePayment(recharge.id, {
            operation_password: confirmPayForm.operation_password
          })
          ElMessage.success('确认支付成功')
          confirmPayDialogVisible.value = false
          formRef.resetFields()
          await getTableData()
        } catch (error) {
          console.error(error)
        } finally {
          confirmPayLoading.value = false
        }
      }
    })
  }

  // 处理名称点击
  const handleNameClick = (row: AgentRecharge) => {
    if (hasAuth('agent_recharge:detail_page')) {
      handleViewDetail(row)
    } else {
      ElMessage.warning('您没有查看详情的权限')
    }
  }

  // 查看详情
  const handleViewDetail = (row: AgentRecharge) => {
    router.push({
      name: 'AgentRechargeDetailRoute',
      params: { id: row.id }
    })
  }

  // 获取操作按钮
  const getActions = (row: AgentRecharge) => {
    const actions: any[] = []

    // 线下支付且有凭证可以查看
    if (
      row.payment_method === 'offline' &&
      row.payment_voucher_key &&
      hasAuth('agent_recharge:view_payment_voucher')
    ) {
      actions.push({
        label: '查看支付凭证',
        handler: () => handleViewPaymentVoucher(row),
        type: 'primary'
      })
    }

    // 待支付且线下转账的订单可以确认支付
    if (
      row.status === 1 &&
      row.payment_method === 'offline' &&
      hasAuth('agent_recharge:confirm_payment')
    ) {
      actions.push({
        label: '确认支付',
        handler: () => handleShowConfirmPay(row),
        type: 'primary'
      })
    }

    return actions
  }

  // 查看支付凭证
  const handleViewPaymentVoucher = (row: AgentRecharge) => {
    if (!row.payment_voucher_key) return
    paymentVoucherFileKey.value = row.payment_voucher_key
  }
</script>

<style scoped lang="scss">
  .agent-recharge-page {
    height: 100%;
  }
</style>
