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

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: 'keywords',
          clearable: false
        },
        {
          label: '期号',
          type: 'input',
          prop: 'issue_no',
          default: '',
          clearable: false
        },
        {
          label: '用户账号',
          type: 'input',
          prop: 'username',
          clearable: false
        },
        {
          label: '选择日期',
          type: 'daterange',
          prop: 'created_range',
          default: '',
          clearable: true
        },
        {
          label: '状态',
          type: 'select',
          prop: 'status',
          options: [
            {
              label: '待结算',
              value: 1
            },
            {
              label: '已结算',
              value: 2
            },
            {
              label: '全部',
              value: ''
            }
          ]
        },
        {
          label: '是否有奖',
          type: 'select',
          prop: 'is_winner',
          options: [
            {
              label: '否',
              value: 0
            },
            {
              label: '是',
              value: 1
            },
            {
              label: '全部',
              value: ''
            }
          ]
        }
      ],
      columns: [
        {
          label: '期号',
          prop: 'issue_no'
        },
          {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          popover: true,
          width: 140,
          tagType: (row) => row?.user.status === 1 ? 'danger' : '',
          props: ['user.first_name'],
          options: [
            {
              label: '会员ID',
              value: ['user.member_id']
            }, {
              label: '用户名称',
              value: ['user.username']
            },
            {
              label: '异常信息',
              vShow: (row) => row?.user.admin_note ? true : false,
              value: ['user.admin_note']
            }
          ]
        },

        {
          label: '玩法',
          width: '50px',
          prop: 'keywords'
        },
        {
          label: '金额',
          prop: 'amount'
        },
        {
          width: '50px',
          label: '倍率',
          prop: 'odds'
        },
        {
          label: '盈利',
          prop: 'profit',
          html: true,
          method: (row) => {
            if (row.status === 1) {
              return '--'
            }
            // 简单参数检查
            if (!row) return '<span style="color: #bfbfbf; font-style: italic;">--</span>'
            // 数据验证和计算
            const profit = parseFloat(row.profit) || 0
            const amount = parseFloat(row.amount) || 0
            const netProfit = profit - amount
            // 根据盈利情况返回不同样式
            if (netProfit > 0) {
              return `<span style="color: #52c41a; font-weight: 500;">+${netProfit.toFixed(2)}</span>`
            } else if (netProfit < 0) {
              return `<span style="color: #ff4d4f; font-weight: 500;">${netProfit.toFixed(2)}</span>`
            } else {
              return `<span style="color: #8c8c8c;">${netProfit.toFixed(2)}</span>`
            }

          }
        },
        {
          label: '开奖号码',
          prop: 'winning_array',
          method: (row) => {
            const arr = row?.winning_array
            return arr && arr.length > 0 ? `${arr.slice(0, 3).join('+')} = ${arr.at(-1)}` : '--'
          }
        },
        {
          label: '状态',
          prop: 'status',
          method: (row) => {
            return row.status === 1 ? '待结算' : row.status === 2 ? '已结算' : '--'
          }
        },
        {
          label: '投注时间',
          prop: 'created_at'
        }
      ],
      rowsActions: [],
      apis: {
        list: {
          url: 'bet',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      tableOptions: {},
      editForm: [],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      },
      issue_no: ''
    }
  },
  created() {
    // 获取参数
    this.issue_no = this.$route.query.issue_no
    if (this.issue_no) {
      this.searchForm[2] = Object.assign({}, this.searchForm[2], {
        default: this.issue_no
      })
    }
    this.initDateRange()

  },
  methods: {
    onResponse(data) {
      this.alertTip = '统计数据：' + data.total_amount
    },
    initDateRange() {
      // const endDate = new Date()
      // const startDate = new Date()
      // startDate.setDate(startDate.getDate() - 7)
      // this.searchForm[4] = Object.assign({}, this.searchForm[4], {
      //   default: [this.formatDate(startDate), this.formatDate(endDate)]
      // })
      this.$nextTick(()=>{
        this.$refs.table.getList({
          issue_no: this.issue_no,
          // start_time: this.formatDate(startDate),
          // end_time: this.formatDate(endDate)
        })
      })
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {
    },
    onSubmit(params = {}) {
      const start_time = params?.created_range && params?.created_range.length > 1 ? `${params.created_range[0]}` : null
      const end_time = params?.created_range && params?.created_range.length > 1 ? `${params.created_range[1]}` : null
      delete params.created_range
      this.$refs.table.getList({ ...params, start_time, end_time })
    }
  }
}
</script>
