<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NTag,
  NPopconfirm,
  NSelect,
  NDatePicker,
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import InvoiceModal from './InvoiceModal.vue'

import { formatDate, renderIcon } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
import TheIcon from '@/components/icon/TheIcon.vue'

defineOptions({ name: '开票记录' })

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')

// 开票/查看弹窗相关状态
const invoiceModalVisible = ref(false)
const invoiceModalMode = ref('invoice') // 'invoice' 或 'view'
const currentInvoice = ref(null)

// 状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '未开票', value: 'pending' },
  { label: '已开票', value: 'invoiced' },
  { label: '已退款', value: 'refunded' },
  { label: '已拒绝', value: 'rejected' },
]

// 开票类型选项
const invoiceTypeOptions = [
  { label: '增值税普通发票', value: 'normal' },
  { label: '增值税专用发票', value: 'special' },
]

// 供票类型选项
const ticketTypeOptions = [
  { label: '纸质发票', value: 'paper' },
  { label: '电子发票', value: 'electronic' },
]

const {
  modalVisible,
  modalTitle,
  modalAction,
  modalLoading,
  handleSave,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
} = useCRUD({
  name: '开票记录',
  initForm: {},
  doCreate: api.createInvoice,
  doUpdate: api.updateInvoice,
  doDelete: api.deleteInvoice,
  refresh: () => $table.value?.handleSearch(),
})

onMounted(() => {
  $table.value?.handleSearch()
})

// 状态标签渲染
const renderStatus = (status) => {
  const statusMap = {
    pending: { type: 'warning', text: '未开票' },
    invoiced: { type: 'success', text: '已开票' },
    refunded: { type: 'info', text: '已退款' },
    rejected: { type: 'error', text: '已拒绝' },
  }
  const config = statusMap[status] || { type: 'default', text: '未知' }
  return h(NTag, { type: config.type }, { default: () => config.text })
}

// 开票类型渲染
const renderInvoiceType = (type) => {
  const typeMap = {
    normal: '增值税普通发票',
    special: '增值税专用发票',
  }
  return typeMap[type] || type
}

// 供票类型渲染
const renderTicketType = (type) => {
  const typeMap = {
    paper: '纸质发票',
    electronic: '电子发票',
  }
  return typeMap[type] || type
}

const columns = [
  {
    title: 'ID',
    key: 'id',
    width: 60,
    align: 'center',
  },
  {
    title: '提交时间',
    key: 'created_at',
    width: 100,
    align: 'center',
    render(row) {
      return formatDate(row.created_at)
    },
  },
  {
    title: '供票类型',
    key: 'ticket_type',
    width: 80,
    align: 'center',
    render(row) {
      return renderTicketType(row.ticket_type)
    },
  },
  {
    title: '手机号',
    key: 'phone',
    width: 100,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '邮箱号',
    key: 'email',
    width: 120,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '公司名称',
    key: 'company_name',
    width: 150,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '公司税号',
    key: 'tax_number',
    width: 150,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '注册地址',
    key: 'register_address',
    width: 150,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '注册电话',
    key: 'register_phone',
    width: 100,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '开户银行',
    key: 'bank_name',
    width: 120,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '银行账号',
    key: 'bank_account',
    width: 150,
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '开票类型',
    key: 'invoice_type',
    width: 120,
    align: 'center',
    render(row) {
      return renderInvoiceType(row.invoice_type)
    },
  },
  {
    title: '状态',
    key: 'status',
    width: 80,
    align: 'center',
    render(row) {
      return renderStatus(row.status)
    },
  },
  {
    title: '操作',
    key: 'actions',
    width: 180,
    align: 'center',
    fixed: 'right',
    render(row) {
      return [
        // 开票按钮 - 未开票状态显示
        row.status === 'pending' &&
          h(
            NButton,
            {
              size: 'small',
              type: 'success',
              style: 'margin-right: 8px;',
              onClick: () => handleInvoice(row),
            },
            {
              default: () => '开票',
            }
          ),
        // 退款按钮 - 未开票状态显示
        row.status === 'pending' &&
          h(
            NPopconfirm,
            {
              onPositiveClick: () => handleRefund(row),
            },
            {
              trigger: () =>
                h(
                  NButton,
                  {
                    size: 'small',
                    type: 'primary',
                    style: 'margin-right: 8px;',
                  },
                  {
                    default: () => '退款',
                  }
                ),
              default: () => h('div', {}, '确认退款？'),
            }
          ),
        // 查看按钮 - 已开票状态显示
        row.status === 'invoiced' &&
          h(
            NButton,
            {
              size: 'small',
              type: 'warning',
              style: 'margin-right: 8px;',
              onClick: () => handleView(row),
            },
            {
              default: () => '查看',
            }
          ),
      ]
    },
  },
]

// 更新状态
async function handleUpdateStatus(row, status) {
  try {
    await api.updateInvoiceStatus({ id: row.id, status })
    $message.success('开票成功')
    $table.value?.handleSearch()
  } catch (error) {
    $message.error('开票失败: ' + error.message)
  }
}

// 退款处理
async function handleRefund(row) {
  try {
    // 如果是pending状态，直接退款并更新状态为refunded
    if (row.status === 'pending') {
      await api.updateInvoiceStatus({ id: row.id, status: 'refunded' })
      $message.success('退款成功')
    } else {
      await api.refundInvoice({ id: row.id })
      $message.success('退款成功')
    }
    $table.value?.handleSearch()
  } catch (error) {
    $message.error('退款失败: ' + error.message)
  }
}

// 开票处理
function handleInvoice(row) {
  currentInvoice.value = row
  invoiceModalMode.value = 'invoice'
  invoiceModalVisible.value = true
}

// 查看详情
function handleView(row) {
  currentInvoice.value = row
  invoiceModalMode.value = 'view'
  invoiceModalVisible.value = true
}

// 确认开票/查看操作
async function handleInvoiceConfirm(data) {
  try {
    if (invoiceModalMode.value === 'invoice') {
      // 开票操作
      await api.sendInvoice(data)
      await api.updateInvoiceStatus({ id: data.id, status: 'invoiced' })
      $message.success('开票成功')
    } else {
      // 查看操作（可能是重新发送）
      await api.sendInvoice(data)
      $message.success('发送成功')
    }
    invoiceModalVisible.value = false
    $table.value?.handleSearch()
  } catch (error) {
    $message.error('操作失败: ' + error.message)
  }
}

const validateForm = {
  company_name: [
    {
      required: true,
      message: '请输入公司名称',
      trigger: ['input', 'blur'],
    },
  ],
  tax_number: [
    {
      required: true,
      message: '请输入公司税号',
      trigger: ['input', 'blur'],
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['input', 'blur'],
    },
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: ['input', 'blur'],
    },
  ],
}
</script>

<template>
  <CommonPage show-footer title="开票记录">
    <!-- 表格 -->
    <CrudTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :get-data="api.getInvoiceList"
    >
      <template #queryBar>
        <QueryBarItem label="提交时间" :label-width="80">
          <NDatePicker
            v-model:value="queryItems.created_at"
            type="daterange"
            clearable
            placeholder="请选择提交时间"
            style="width: 280px"
            @update:value="$table?.handleSearch()"
          />
        </QueryBarItem>
        <QueryBarItem label="手机号" :label-width="80">
          <NInput
            v-model:value="queryItems.phone"
            clearable
            type="text"
            placeholder="请输入手机号"
            style="width: 200px"
            @keypress.enter="$table?.handleSearch()"
          />
        </QueryBarItem>
        <QueryBarItem label="状态" :label-width="80">
          <NSelect
            v-model:value="queryItems.status"
            :options="statusOptions"
            placeholder="请选择状态"
            clearable
            style="width: 200px"
            @update:value="$table?.handleSearch()"
          />
        </QueryBarItem>
        <QueryBarItem label="公司名称" :label-width="80">
          <NInput
            v-model:value="queryItems.company_name"
            clearable
            type="text"
            placeholder="请输入公司名称"
            style="width: 200px"
            @keypress.enter="$table?.handleSearch()"
          />
        </QueryBarItem>
        <QueryBarItem label="公司税号" :label-width="80">
          <NInput
            v-model:value="queryItems.tax_number"
            clearable
            type="text"
            placeholder="请输入公司税号"
            style="width: 200px"
            @keypress.enter="$table?.handleSearch()"
          />
        </QueryBarItem>
      </template>
    </CrudTable>

    <!-- 新增/编辑 弹窗 -->
    <CrudModal
      v-model:visible="modalVisible"
      :title="modalTitle"
      :loading="modalLoading"
      @save="handleSave"
    >
      <NForm
        ref="modalFormRef"
        label-placement="left"
        label-align="left"
        :label-width="100"
        :model="modalForm"
        :rules="validateForm"
      >
        <NFormItem label="公司名称" path="company_name">
          <NInput v-model:value="modalForm.company_name" clearable placeholder="请输入公司名称" />
        </NFormItem>
        <NFormItem label="公司税号" path="tax_number">
          <NInput v-model:value="modalForm.tax_number" clearable placeholder="请输入公司税号" />
        </NFormItem>
        <NFormItem label="手机号" path="phone">
          <NInput v-model:value="modalForm.phone" clearable placeholder="请输入手机号" />
        </NFormItem>
        <NFormItem label="邮箱" path="email">
          <NInput v-model:value="modalForm.email" clearable placeholder="请输入邮箱" />
        </NFormItem>
        <NFormItem label="注册地址" path="register_address">
          <NInput
            v-model:value="modalForm.register_address"
            clearable
            placeholder="请输入注册地址"
          />
        </NFormItem>
        <NFormItem label="注册电话" path="register_phone">
          <NInput
            v-model:value="modalForm.register_phone"
            clearable
            placeholder="请输入注册电话"
          />
        </NFormItem>
        <NFormItem label="开户银行" path="bank_name">
          <NInput v-model:value="modalForm.bank_name" clearable placeholder="请输入开户银行" />
        </NFormItem>
        <NFormItem label="银行账号" path="bank_account">
          <NInput v-model:value="modalForm.bank_account" clearable placeholder="请输入银行账号" />
        </NFormItem>
        <NFormItem label="供票类型" path="ticket_type">
          <NSelect
            v-model:value="modalForm.ticket_type"
            :options="ticketTypeOptions"
            placeholder="请选择供票类型"
          />
        </NFormItem>
        <NFormItem label="开票类型" path="invoice_type">
          <NSelect
            v-model:value="modalForm.invoice_type"
            :options="invoiceTypeOptions"
            placeholder="请选择开票类型"
          />
        </NFormItem>
      </NForm>
    </CrudModal>

    <!-- 开票/查看弹窗 -->
    <InvoiceModal
      v-model:visible="invoiceModalVisible"
      :invoice-data="currentInvoice"
      :mode="invoiceModalMode"
      @confirm="handleInvoiceConfirm"
    />
  </CommonPage>
</template>
