<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"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />
    <!-- 自定义弹窗 -->
    <Dialog ref="dialog">
      <template slot="content"/>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { backflowgrant } from '@/api/data'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      visibleBasicDrawer: false,
      renderContent: '',
      searchForm: [
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: false
        },
     {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
        {
          label: '日期',
          type: 'month',
          format: 'yyyy年MM月',
          prop: 'date',
          clearable: false
        }
      ],
      columns: [
        {
          label: '月份',
          prop: 'date'
        },
          {
          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: 'recharge_amount'
        },
        {
          label: '提现金额',
          prop: 'withdrawal_amount'
        },
        {
          label: '公司盈亏',
          method: (row) => Number(row.recharge_amount) + Number(row.withdrawal_amount)
        },
        {
          label: '汇率',
          prop: 'backflow_ratio',
          method: (row) => {
            return (row.backflow_ratio * 100) + '%'
          }
        },
        {
          label: '回水金额',
          prop: 'amount'
        },
        {
          label: '状态',
          prop: 'status',
          method: (row) => row.status === 0 ? '未回水' : '已回水'
        },
        {
          label: '返拥时间',
          prop: 'grant_time'
        }
      ],
      rowsActions: [{
        key: 'rebate',
        label: '发放佣金',
        vIF: (row) => row.status === 0,
        method: (row) => {
          this.$confirm(`确定发放佣金?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            backflowgrant({
              id: row.id
            })
              .then(() => {
                this.onSubmit()
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
              })
          })
        }
      }],
      apis: {
        list: {
          url: 'backflow',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      tableOptions: {},
      editForm: [],
      editConfig: {}
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {

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