<script setup lang="ts">
import type { MjFormProps, MjGridProps } from '#/components/mj/mj-table'

import { useUserStore } from '@vben/stores'

import { ElMessage, ElMessageBox } from 'element-plus'

import { spLearnWithdrawService } from '#/api/service/sp/learn-withdraw'
import MjTable, { mj_form_select } from '#/components/mj/mj-table'
import hud from '#/utils/hud'
import obj from '#/utils/obj'

import { useSearchSp } from '../hooks/search'

import 'element-plus/dist/index.css'

const gridRef = ref()

// 是否为超管
const { userInfo } = storeToRefs(useUserStore())
const spData = ref({})
const spRender = useSearchSp({
  getData: () => spData.value,
})

// 申请状态: 0: 申请中, 1: 审核通过, 2: 审核不通过
const status_ing = 0
const status_pass = 1
const status_reject = 2
const statusMap = {
  [status_ing]: '申请中',
  [status_pass]: '审核通过',
  [status_reject]: '审核不通过',
} as any
const statusList = obj.map2options(statusMap)

// 搜索表单
const searchForm = {
  titleWidth: 65,
  items: obj.joinObjs<any>(
    userInfo.value.isSpStaff || {
      title: '服务商',
      field: 'providerId',
      span: 8,
      itemRender: spRender,
    },
    {
      title: '状态',
      field: 'status',
      itemRender: {
        name: mj_form_select,
        options: statusList,
        props: { clearable: true },
      },
    },
    {
      title: '时间',
      field: 'timeRange',
      itemRender: {
        name: 'VxeDateRangePicker',
        props: { clearable: true, type: 'datetime' },
      },
    },
  ),
} as MjFormProps

// 表格
const grid = {
  columns: obj.joinObjs<any>(
    { type: 'seq' },
    !userInfo.value.isFinance || {
      field: 'providerName',
      title: '服务商',
    },
    {
      field: 'amount',
      title: '金额',
      formatter: 'money',
    },
    {
      field: 'bankPerson',
      title: '开户人',
      formatter: userInfo.value.isFinance ? '' : 'redaction',
    },
    {
      field: 'bankAccount',
      title: '账号',
      formatter: userInfo.value.isFinance ? '' : 'redaction',
    },
    {
      field: 'bankName',
      title: '开户行',
      formatter: userInfo.value.isFinance ? '' : 'redaction',
    },
    {
      field: 'status',
      title: '状态',
      formatter({ row }: any) {
        return statusMap[row.status]
      },
    },
    { field: 'auditUserName', title: '审核人' },
    { field: 'auditTime', title: '审核时间' },
    { field: 'reason', title: '拒绝原因' },
    !userInfo.value.isFinance || {
      fixed: 'right',
      title: '操作',
      slots: { default: 'operation' },
    },
  ),
  cellClassName({ column, row }) {
    if (column.field === 'status') {
      if (row.status === status_pass) {
        return 'progress-100'
      }
      if (row.status === status_ing) {
        return 'progress-80'
      }
      return 'progress-1'
    }
  },
  beforeLoadData(params) {
    // 拆分时间参数
    if (params.timeRange) {
      const times = params.timeRange.split(',')
      params.startTime = times[0]
      params.endTime = times[1]
      delete params.timeRange
    }
    // 如果是服务商人员
    if (userInfo.value.isSpStaff) {
      params.providerId = userInfo.value.providerId
    }
    return params
  },
} as MjGridProps

// 通过
async function pass(row: any) {
  hud.confirmLoad('确定通过吗？', {
    task: async () => {
      await spLearnWithdrawService.audit({
        id: row.id,
        status: status_pass,
      })
      gridRef.value.reload()
    },
  })
}

// 拒绝
// async function reject(row: any) {
//   hud.confirmLoad('确定拒绝吗？', {
//     task: async () => {
//       await spLearnWithdrawService.audit({
//         id: row.id,
//         status: status_reject,
//       })
//       gridRef.value.reload()
//     },
//   })
// }
// 拒绝并且输入原因
async function rejectWithReason(row: any) {
  try {
    const { value: reason } = await ElMessageBox.prompt('确定拒绝吗？', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '请填写拒绝理由',
      inputValidator: (val) => {
        if (!val || !val.trim()) {
          return '请填写拒绝理由'
        }
        return true
      },
      type: 'warning',
    })
    // 用户点击了确定并输入了理由
    await spLearnWithdrawService.audit({
      id: row.id,
      status: status_reject,
      reason,
    })
    gridRef.value.reload()
    ElMessage.success('已拒绝')
  } catch {
    // 用户点击了取消或关闭了对话框
    ElMessage.info('已取消操作')
  }
}
</script>

<template>
  <div class="withdraw g-container">
    <MjTable
      ref="gridRef"
      :grid="grid"
      :service="spLearnWithdrawService"
      hide-remove
      hide-toolbar
      :search-form="searchForm"
    >
      <template #operation="{ row }">
        <el-button
          v-if="row.status === status_ing"
          type="success"
          @click="pass(row)"
        >
          通过
        </el-button>
        <el-button
          v-if="row.status === status_ing"
          type="danger"
          @click="rejectWithReason(row)"
        >
          拒绝
        </el-button>
      </template>
    </MjTable>
  </div>
</template>

<style lang="scss" scoped></style>
