<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"
      :loading="loading"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />
    <!-- 自定义弹窗 -->
    <Dialog ref="dialog" :dialogActions="{width:'560px'}" @confirm="confirm">
      <template slot="content">
        <el-form label-width="80px">
          <el-form-item label="号码" :rules="[{ required: true, message: '请输入号码' }]">
            <div class="compact-sum">
              <div class="input-group">
                <el-input
                  v-model.number="value1"
                  type="number"
                  placeholder="数值1"
                  size="small"
                  class="sum-input"
                />
                <span class="plus">+</span>
                <el-input
                  v-model.number="value2"
                  type="number"
                  placeholder="数值2"
                  size="small"
                  class="sum-input"
                />
                <span class="plus">+</span>
                <el-input
                  v-model.number="value3"
                  type="number"
                  placeholder="数值3"
                  size="small"
                  class="sum-input"
                />
                <span class="plus">=</span>
                <el-tag
                  type="success"
                  size="medium"
                  class="sum-tag"
                >
                  {{ sum || 0 }}
                </el-tag>
              </div>
            </div>
          </el-form-item>
          <!--          <el-form-item label="图片" :rules="[{ required: true, message: '请选择图片' }]">-->
          <!--            <UploadOneImage v-model="form.image"></UploadOneImage>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="组合" :rules="[{ required: true, message: '请输入组合' }]">-->
          <!--            <el-input v-model="form.combo" autocomplete="off" style="width: 280px"></el-input>-->
          <!--          </el-form-item>-->
        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { issuebetting, issueclose, issuelotteryDraw } from '@/api/data'
// import UploadOneImage from '@/components/UploadOneImage/index.vue'

const options = [
  {
    value: 0,
    label: '草稿'
  },
  {
    value: 1,
    label: '投注中'
  },
  {
    value: 2,
    label: '封盘'
  },
  {
    value: 3,
    label: '开奖'
  },
  {
    value: '',
    label: '全部'
  }
]
export default {
  components: {
    Dialog
    // UploadOneImage
  },

  data() {
    return {
      loading: false,
      value1: null,
      value2: null,
      value3: null,
      queryData: {},
      form: {},
      searchForm: [
        {
          label: '期号',
          type: 'input',
          prop: 'issue_no',
          clearable: false
        },
        {
          label: '状态',
          type: 'select',
          prop: 'status',
          clearable: false,
          options: options
        }
      ],
      columns: [
        {
          label: '期号',
          link: true,
          prop: 'issue_no',
          click: (row) => {
            this.$router.push({
              name: 'order',
              query: {
                issue_no: row.issue_no // 假设row有id字段，传递订单id
              }
            })
          }
        },
        {
          label: '状态',
          prop: 'status',
          method: (row) => options.find(item => item.value === row.status)?.label
        },
        {
          label: '组合',
          prop: 'combo'
        },
        {
          label: '结果',
          method: (row) => {
            const arr = row?.winning_numbers?.split(',') ?? []
            if (!arr.length) return '--'
            const sum = arr.reduce((a, b) => Number(a) + Number(b), 0)
            const expression = arr.join('+')

            return `${expression}=${sum}`
          }
        },
        {
          label: '开奖时间',
          prop: 'end_time'
        }
      ],
      rowsActions: [
        {
          key: 'bet',
          label: '下注',
          vIF: (row) => row.status === 0,
          method: (row) => {
            this.loading = true
            issuebetting({ id: row.id })
              .then((res) => {
                this.loading = false
                this.$message.success('下注成功')
                this.onSubmit(this.queryData)
              })
          }
        },
        {
          key: 'close',
          label: '封盘',
          vIF: (row) => row.status === 1,
          method: (row) => {
            this.loading = true
            issueclose({ id: row.id })
              .then((res) => {
                this.loading = false
                this.$message.success('封盘成功')
                this.onSubmit(this.queryData)
              })
          }
        },
        {
          key: 'open',
          label: '手动开奖',
          vIF: (row) => row.status === 2,
          method: (row) => {
            this.form = {
              id: row.id,
              image: '',
              winning_numbers: '',
              combo: ''
            }
            this.$refs.dialog.open()
          }
        },
        {
          key: 'autoOpen',
          label: '开奖',
          vIF: (row) => row.status === 2,
          method: (row) => {
            this.$confirm('此操作将立即开奖, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              issuelotteryDraw({  id: row.id })
                .then((res) => {
                  this.$message({
                    type: 'success',
                    message: '开奖成功!'
                  })
                })
            })
          }
        }
        // {
        //   key: 'delete',
        //   label: '删除'
        // }
      ],
      apis: {
        list: {
          url: 'issue',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        },
        add: {
          url: 'issue/submit'
        },
        edit: {
          url: 'issue/submit'
        },
        delete: {
          url: 'issue/delete',
          method: 'post'
        }
      },
      tableOptions: {
        add: {
          show: true
        }
      },
      editForm: [
        {
          body: [
            {
              label: '期号',
              type: 'input',
              prop: 'issue_no',
              clearable: false,
              rules: [
                {
                  required: true,
                  message: '期号',
                  trigger: 'change'
                }
              ]
            }
          ]
        }
      ],
      editConfig: {
        size: 'small'
      }
    }
  },
  computed: {
    // 使用计算属性确保实时计算
    sum() {
      const num1 = parseFloat(this.value1) || 0
      const num2 = parseFloat(this.value2) || 0
      const num3 = parseFloat(this.value3) || 0
      return (num1 + num2 + num3) // 保留两位小数
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    confirm() {
      issuelotteryDraw({
        id: this.form.id,
        winning_numbers: `${this.value1},${this.value2},${this.value3}`
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success('开奖成功')
            this.onSubmit(this.queryData)
            this.$refs.dialog.close()
          }
        }).catch(() => {
        this.$message.error('开奖失败')
      })
    },
    onValueChange(val) {

    },
    onSubmit(params) {
      this.queryData = params
      this.$refs.table.getList(params)
    }
  }
}
</script>
<style scoped>
.compact-sum {
  display: inline-flex;
  align-items: center;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

.sum-input {
  width: 60px;
}

.plus {
  color: #909399;
  font-weight: 500;
  padding: 0 4px;
}

.sum-tag {
  font-size: 14px;
  min-width: 80px;
  justify-content: center;
}

</style>
