<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"
      :dialog-actions="{ width: '480px', title: '赠送金额' }"
      :loading="loading"
      @confirm="confirm"
    >
      <template slot="content">
        <el-form ref="formDataref" :rules="rulesData" :model="formData" label-width="80px">
          <el-form-item label="赠送金额" prop="amount">
            <el-input type="number" v-model="formData.amount" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="打码量" prop="betting_amount">
            <el-input v-model="formData.betting_amount" style="width: 300px"/>
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { finish, gift } from '@/api/data'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      listTypes: [],
      formData: {
        amount: '',
        id: '',
        betting_amount: ''
      },
      rulesData: {
        amount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        betting_amount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      searchForm: [
        {
          label: '活动名称',
          type: 'input',
          prop: 'title',
          clearable: false
        },
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: false
        },
           {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
      ],
      columns: [
        {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          popover: true,
          width: 140,
          props: ['member.first_name'],
          tagType: (row) => row?.member.status === 1 ? 'danger' : '',
          options: [
            {
              label: '会员ID',
              value: ['member.member_id']
            },
            {
              label: '用户名称',
              value: ['member.username']
            },
            {
              label: '异常信息',
              vShow: (row) => row?.member.admin_note ? true : false,
              value: ['member.admin_note']
            }
          ]
        },
        {
          label: '活动名称',
          prop: 'title'
        },
        {
          label: '赠送金额',
          prop: 'gift_amount',
          method: (row) => row.gift_amount || '0'
        },
        {
          label: '打码量',
          prop: 'betting_amount',
          method: (row) => `${row.effective_betting_amount} / ${row.betting_amount} `
        },
        {
          label: '活动开始时间',
          prop: 'start_time'
        },
        {
          label: '活动结束时间',
          prop: 'end_time'
        },
        {
          label: '活动详情图片',
          image: true,
          prop: 'detail_image'
        },
        {
          label: '参与时间',
          prop: 'part_in_time'
        },
        {
          label: '状态',
          prop: 'status',
          method: (row) => row.status === 0 ? '申请中' : row.status === 1 ? '进行中 ' : '已完成'
        },
        {
          label: '完成时间',
          prop: 'finish_time'
        }
      ],
      rowsActions: [
        {
          key: 'wanjie',
          label: '完结',
          vIF: (row) => row.status !== 2,
          method: (row) => {
            this.$confirm('是否确定完结？, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              finish({ id: row.id })
                .then((res) => {
                  this.onSubmit()
                  this.$message.success('操作成功')
                })
            })
          }
        },
        {
          key: 'chongzhi',
          label: '赠送',
          vIF: (row) => row.status === 0,
          method: (row) => {
            this.formData.id = row.id
            this.$refs.dialog.open()
          }
        }
      ],
      apis: {
        list: {
          url: 'ActivityUser',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      tableOptions: {},
      editForm: [],
      editConfig: {}
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    confirm() {
      this.$refs['formDataref'].validate((valid) => {
        if (valid) {
          gift(this.formData)
            .then((res) => {
              this.$message.success('操作成功')
              this.onSubmit()
            })
        }
      })
    },
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {

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