<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit"/>
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :actionsWidth="120"
      :alertTip="alertTip"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
      @onResponse="onResponse"
    />
    <!-- 自定义弹窗 -->
    <Dialog ref="dialog">
      <template slot="content"/>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { audit, paymentOrder } from '@/api/data'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      visibleBasicDrawer: false,
      alertTip: '',
      searchForm: [
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: false
        },
           {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
        {
          label: '订单号',
          type: 'input',
          prop: 'order_no',
          clearable: false
        },
        {
          label: '状态',
          type: 'select',
          prop: 'status',
          clearable: false,
          options: [
            {
              value: 0,
              label: '待处理'
            },
            {
              value: 1,
              label: '处理中'
            },
            {
              value: 2,
              label: '成功'
            },
            {
              value: 3,
              label: '失败'
            }
          ]
        }
      ],
      columns: [
             {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          popover: true,
          width:140,
          props: ['first_name'],
          options: [
            {
              label: '会员ID',
              value: ['member_id']
            }, {
              label: '用户名称',
              value: ['username']
            },
            {
              label: '异常信息',
              vShow: (row) => row?.user_admin_note ? true : false,
              value: ['user_admin_note']
            }
          ]
        },
        {
          label: '订单号',
          prop: 'order_no'
        },
        {
          label: '金额',
          prop: 'amount'
        },
        {
          label: '渠道',
          prop: 'bank_name'
        },
        {
          label: '手续费',
          prop: 'fee',
          method: (row) => row.fee.substring(0, 5)
        },
        {
          label: '状态',
          prop: 'status',
          method: (row) => this.setStatus(row)
        },

        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: '更新时间',
          prop: 'updated_at'
        },
        {
          label: '创建时间',
          prop: 'created_at'
        }
      ],
      rowsActions: [{
        key: 'check',
        label: '订单同步',
        vIF: (row) => row.type === 1 && row.status === 1,
        method: (row) => {
          this.$confirm('确定同步该订单，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            paymentOrder({ id: row.id })
              .then((res) => {
                this.$message({
                  type: 'success',
                  message: res.msg
                })
                this.onSubmit()
              })

          })
        }
      }
        // {
        //   key: 'no',
        //   label: '驳回',
        //   vIF: (row) => row.status === 0 && row.type === 2,
        //   method: (row) => {
        //     this.getStatus({ id: row.id.toString(), status: 3 })
        //   }
        // },
        // {
        //   key: 'yes',
        //   label: '通过',
        //   vIF: (row) => row.status === 0 && row.type === 2,
        //   method: (row) => {
        //     this.getStatus({ id: row.id.toString(), status: 1 })
        //   }
        // }

      ],
      apis: {
        list: {
          url: 'paymentOrder',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      tableOptions: {},
      editForm: [],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      }
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    onResponse(data) {
      this.alertTip = `总金额：${data.total_amount}(RMB)；已处理：${data.total_success}(RMB)；失败金额：${data.total_fail}(RMB)`
    },
    getStatus(row) {
      if (row.status === 2) {
        this.$prompt('请输入原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\S+$/,
          inputErrorMessage: '请输入原因'
        }).then(({ value }) => {
          audit({
            ...row,
            remark: value
          })
            .then(() => {
              this.onSubmit()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            })
        })
      } else {
        this.$confirm(`确定通过审核?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          audit(row)
            .then(() => {
              this.onSubmit()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            })
        })
      }
    },

    setStatus(row) {
      const TIMEOUT_MINUTES = 10
      const STATUS_MAP = { 1: '处理中', 2: '成功', 3: '失败' }
      const diffMinutes = Math.floor(
        (Date.now() - new Date(row.created_at)) / (1000 * 60)
      )
      if (diffMinutes > TIMEOUT_MINUTES && row.type === 1 && row.status === 1) {
        const hours = Math.floor(diffMinutes / 60)
        return hours > 0 ? `超时${hours}小时` : `超时${diffMinutes}分钟`
      }
      return STATUS_MAP[row.status] || '待处理'
    },
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {

    },
    onSubmit(params) {
      this.$refs.table.getList({ type: 0, ...params })
    }
  }
}
</script>
