<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 - 170px)' }"
    />

    <!-- 自定义弹窗 -->
    <subDrawer
      ref="table2"
      v-model="visibleDrawer"
      title="对局详情"
    >
      <template v-slot>
        <YMTable
          v-if="visibleDrawer"
          ref="table2"
          :table-key="2"
          :index="true"
          :selection="false"
          :table-options="tableOptions"
          :columns="columns2"
          :rows-actions="rowsActions2"
          :show-summary="false"
          :apis="apis2"
          :custom-style="{ height: 'calc(100vh - 170px)' }"
        />
      </template>
    </subDrawer>
  </div>
</template>
<script>
import subDrawer from '@/components/Table/subDrawer.vue'
import { menucheck, roomcompleted, roomsetScore } from '@/api/data'

export default {
  components: {
    subDrawer

  },
  data() {
    const statusOpt = [
      {
        value: 0,
        label: '创建中'
      },
      {
        value: 1,
        label: '创建完成'
      },
      {
        value: 2,
        label: '游戏中'
      },
      {
        value: 3,
        label: '已结算'
      }
    ]
    const statusOptDetails = [
      {
        value: 0,
        label: '待准备'
      },
      {
        value: 1,
        label: '已准备'
      },
      {
        value: 2,
        label: '游戏中'
      },
      {
        value: 3,
        label: '待结算'
      },
      {
        value: 4,
        label: '已结算'
      }
    ]
    return {
      loading: false,
      visibleBasicDrawer: false,
      renderContent: '',
      searchForm: [
        {
          label: '房间号',
          type: 'input',
          prop: 'room_id',
          clearable: false
        },
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: false
        },
        {
          label: '状态',
          type: 'select',
          prop: 'status',
          clearable: true,
          options: statusOpt
        }
      ],
      columns: [
        {
          label: '房间号',
          prop: 'room_id'
        },
        {
          label: '会员ID',
          prop: 'member_id'
        },
        {
          label: '游戏名称',
          prop: 'game_name'
        },
        {
          label: '底分',
          prop: 'base_score'
        },
        {
          label: '人数',
          prop: 'participants'
        },
        {
          label: '局数',
          prop: 'rounds'
        },
        {
          label: '已加入人数',
          prop: 'join_count'
        },
        {
          label: '状态',
          method: (row) => {
            return statusOpt.filter(item => item.value === row.status)[0]?.label
          }
        },
        {
          label: '更新时间',
          prop: 'updated_at'
        },
        {
          label: '创建时间',
          prop: 'created_at'
        }
      ],
      rowsActions: [
        {
          key: 'detail',
          label: '详情',
          class: 'primary',
          method: (row) => {
            console.log('详情详情', this.$refs.table2)
            this.visibleDrawer = true
            this.apis2.list.Params = { room_id: row.room_id }
          }
        },
        {
          key: 'roomcompleted',
          label: '结算',
          class: 'primary',
          method: (row) => {
            this.$confirm('是否结算?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              roomcompleted({ room_id: row.room_id })
                .then((res) => {
                  this.$message({
                    type: 'success',
                    message: '结算成功!'
                  })
                })
            })
          }
        }
      ],
      apis: {
        list: {
          url: 'room',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      apis2: {
        list: {
          url: 'room/details',
          dataParam: 'data',
          resultParam: 'data',
          init: true,
          Params: {}
        }
      },
      columns2: [
        {
          label: '房间号',
          prop: 'room_id'
        },
        {
          label: '会员ID',
          prop: 'member_id',
          method: (row) => {
            return `${row.first_name || ''}(${row.member_id})`
          }
        },
        {
          label: '游戏ID',
          prop: 'game_id'
        },
        {
          label: '游戏名称',
          prop: 'game_name',
          method: (res) => {
            return res.room.game_name
          }
        },
        {
          label: '底分',
          prop: 'base_score',
          method: (res) => {
            return res.room.base_score
          }
        },
        {
          label: '得分',
          prop: 'score'
        },
        {
          label: '实数分数',
          prop: 'real_score'
        },
        {
          label: '佣金',
          prop: 'brokerage'
        },
        {
          label: '图片',
          image: true,
          prop: 'screenshot'
        },
        {
          label: '状态',
          method: (row) => {
            return statusOptDetails.filter(item => item.value === row.status)[0]?.label
          }
        }
      ],
      rowsActions2: [
        {
          key: 'setScore',
          label: '得分',
          class: 'primary',
          method: (row) => {
            this.$prompt('请输入得分', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /^-?\d+(.\d{1})?$/,
              inputErrorMessage: '格式不正确'
            }).then(({ value }) => {
              roomsetScore({ score: Number(value), id: row.id })
                .then((res) => {
                  this.$refs.table2.getList(this.apis2.list.Params)
                  this.$message({
                    type: 'success',
                    message: '设置的得分是: ' + value
                  })
                })
            })
          }
        }
      ],
      tableOptions: {},
      editForm: [
        {
          body: [
            {
              label: '年度',
              type: 'year',
              prop: 'year',
              clearable: false,
              rules: [
                {
                  required: true,
                  message: '请选择年度',
                  trigger: 'change'
                }
              ]
            }
          ]
        }
      ],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      },
      visibleDrawer: false
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
    menucheck('admin/room/details')
      .then(({ code }) => {
        this.rowsActions[0].vIF = () => code === 0
      })
    menucheck('admin/room/completed')
      .then(({ code }) => {
        this.rowsActions[1].vIF = () => code === 0
      })
    menucheck('admin/room/setScore')
      .then(({ code }) => {
        this.rowsActions2[0].vIF = () => code === 0
      })
  },
  methods: {
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {

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