<template>
  <CommonPage show-footer :title="$route.title">
    <n-row gutter="12">
      <n-col :span="24">
        <div flex>
          <n-card w-400>
            <n-statistic label="总提现金额(含已驳回)" tabular-nums>
              <n-number-animation
                ref="numberAnimationInstRef"
                :from="0"
                :to="cardData.total / 100"
                :precision="2"
              />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-400>
            <n-statistic label="待处理金额" tabular-nums>
              <n-number-animation
                ref="numberAnimationInstRef"
                :from="0"
                :to="cardData.service || 0 / 100"
                :precision="2"
              />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-400>
            <n-statistic label="服务费" tabular-nums>
              <n-number-animation
                ref="numberAnimationInstRef"
                :from="0"
                :to="cardData.commission || 0 / 100"
                :precision="2"
              />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-400>
            <n-statistic label="已审核金额" tabular-nums>
              <n-number-animation
                ref="numberAnimationInstRef"
                :from="0"
                :to="cardData.count || 0 / 100"
              />
            </n-statistic>
          </n-card>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <span w-80>提现状态:</span>
          <n-radio-group v-model:value="queryData.status" class="ml-10">
            <n-radio-button
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 flex items-center>
          <span w-80>号码搜索:</span>
          <n-input v-model:value="queryData.word" style="width: 25%" placeholder="请输入手机号码" />
        </div>
      </n-col>
      <n-col :span="10">
        <div mt-10 flex items-center>
          <span w-80>申请时间:</span>
          <n-date-picker
            v-model:formatted-value="queryData.time"
            value-format="yyyy-MM-dd"
            type="daterange"
            clearable
          />
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <n-button type="primary" @click="getList">搜索</n-button>
          <n-button ml-10 @click="clearQueryData">重置</n-button>
        </div>
      </n-col>
    </n-row>
    <n-data-table
      class="mt-10"
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />
    <!-- 打款记录 -->
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 500px"
        title="打款记录"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
          <n-grid :cols="1" :x-gap="24">
            <n-form-item-gi :span="12" label="打款截图" path="img">
              <Upload v-model:list="model.img" />
            </n-form-item-gi>
            <n-form-item-gi>
              <div w-full flex justify-center>
                <n-button type="primary" @click="ok">确定</n-button>
                <n-button class="ml-10" @click="clear">关闭</n-button>
              </div>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-card>
    </n-modal>
  </CommonPage>
</template>

<script setup>
import api from './api'
import { NButton, NImage, NTag } from 'naive-ui'
import Upload from '@/components/Upload.vue'
import { h, withDirectives, resolveDirective } from 'vue'
const vPerms = resolveDirective('perms')
const vRole = [[vPerms, ['/admin/store/amount/withdraw/edit']]]

const showModal = ref(false)

const queryData = ref({
  status: '',
  word: '',
  time: '',
})

const cardData = ref({
  total: 0,
  service: 0,
  count: 0,
  commission: 0,
})

const songs = ref([
  {
    value: 1,
    label: '已审核',
  },
  {
    value: 2,
    label: '已驳回',
  },
  {
    value: 3,
    label: '待审核',
  },
])

const nowRow = ref({})

const formRef = ref(null)

const model = ref({
  img: [],
})

const rules = {
  img: { required: true, type: 'array', message: '请上传打款截图' },
}

const columns = ref([
  {
    title: '名字',
    key: 'name',
    align: 'center',
  },
  {
    title: '电话',
    key: 'phone',
    align: 'center',
  },
  {
    title: '银行名称',
    key: 'bank',
    align: 'center',
  },
  {
    title: '银行卡号',
    key: 'bank_card',
    align: 'center',
  },
  {
    title: '账户名称',
    key: 'bank_name',
    align: 'center',
  },
  {
    title: '法人',
    key: 'bank_user',
    align: 'center',
  },
  {
    title: '提现金额',
    key: 'integral',
    align: 'center',
  },
  {
    title: '服务费',
    key: 'commission',
    align: 'center',
  },
  {
    title: '实际到账',
    key: 'number',
    align: 'center',
  },
  {
    title: '剩余余额',
    key: 'residue',
    align: 'center',
  },
  {
    title: '手续费比例',
    slot: 'commission_number',
    align: 'center',
    render: (row) => {
      return h(
        'span',
        {},
        {
          default: () => `${row.commission_number}%`,
        }
      )
    },
  },
  {
    title: '手续费类型',
    key: 'commission_type',
    align: 'center',
    render: (row) => {
      return h(
        NTag,
        {
          type: row.commission_type === 1 ? 'success' : 'warning',
        },
        {
          default: () => (row.commission_type === 1 ? '百分比' : '固定值'),
        }
      )
    },
  },
  {
    title: '审核状态',
    align: 'center',
    slot: 'status',
    render: (row) => {
      return h(
        NTag,
        {
          type: row.status === 1 ? 'success' : row.status === 2 ? 'error' : 'warning',
        },
        {
          default: () => (row.status === 1 ? '已审核' : row.status === 2 ? '已驳回' : '待审核'),
        }
      )
    },
  },
  {
    title: '申请时间',
    key: 'add_time',
    align: 'center',
  },
  {
    title: '打款截图',
    slot: 'img',
    render: (row) => {
      return h(NImage, {
        src: row.status_img,
        width: '50',
      })
    },
  },
  {
    title: '操作',
    align: 'center',
    slot: 'action',
    render: (row) => {
      if (row.status === 3) {
        return [
          withDirectives(
            h(
              NButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  nowRow.value = row
                  showModal.value = true
                },
              },
              {
                default: () => '审核',
              }
            ),
            vRole
          ),
          withDirectives(
            h(
              NButton,
              {
                class: 'ml-10',
                text: true,
                type: 'error',
                onClick: () => {
                  nowRow.value = row
                  refuse()
                },
              },
              {
                default: () => '拒绝',
              }
            ),
            vRole
          ),
        ]
      }
    },
  },
])
const loading = ref(false)
const data = ref([])
const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
})

onMounted(() => {
  getList()
})

const getList = async () => {
  loading.value = true
  const query_data = {
    Status: queryData.value.status || '',
    Phone: queryData.value.word || '',
    StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
    EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
  }
  const res = await api.getYdata({
    pageNum: pagination.value.page,
    pageSize: pagination.value.pageSize,
    ...query_data,
  })

  data.value = res.data.data || []
  pagination.value.itemCount = res.data.total
  cardData.value.total = res.data.all
  cardData.value.service = res.data.audit_number
  cardData.value.commission = res.data.audit_commission
  cardData.value.count = res.data.success_amount
  loading.value = false
}

const clear = async () => {
  model.value = {
    img: [],
  }
  showModal.value = false
  formRef.value?.restoreValidation()
  await getList()
}

const ok = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const res = await api.passAudit({
        bid: nowRow.value.bid,
        wid: nowRow.value.wid,
        img: model.value.img[0].url,
        status: 1,
      })
      $message.success(res.msg)
      clear()
    }
  })
}

const refuse = async () => {
  const res = await api.passAudit({
    bid: nowRow.value.bid,
    wid: nowRow.value.wid,
    img: model.value.img[0]?.url || '',
    status: 2,
  })
  clear()
  $message.success(res.msg)
}

const clearQueryData = () => {
  queryData.value = {
    status: '',
    time: null,
    word: '',
  }
  getList()
}
</script>

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