<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch
      :loading="loading"
      :search-form="searchForm"
      @onValueChange="onValueChange"
      @submit="onSubmit"
    />

    <YMTable
      ref="table"
      :table-key="2"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :columns="columns"
      :show-summary="false"
      :apis="apis"
      :loading="loading"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />
  </div>
</template>

<script>
export default {
  name: 'LotteryList',
  data() {
    return {
      loading: false,
      queryData: {},

      // 搜索配置
      searchForm: [
        {
          label: '类型',
          type: 'select',
          prop: 'type',
          clearable: true,
          placeholder: '请选择类型',
          options: [
            { label: '新澳门六合彩', value: 1 },
            { label: '澳门六合彩', value: 3 },
            { label: '极速六合彩', value: 4 },
            { label: '香港六合彩', value: 2 },
          ]
        },
        { label: '期号', type: 'input', prop: 'issue', clearable: true, placeholder: '请输入期号' },
        { label: '开奖号码', type: 'input', prop: 'open_code', clearable: true, placeholder: '如: 24,19' },
        {
          label: '开奖时间',
          type: 'datetimerange', // 假设你的搜索组件支持 datetimerange
          prop: 'timeRange',
          clearable: true,
          valueFormat: 'timestamp' // 取时间戳，方便传给后端
        }
      ],

      // 表格列配置
      columns: [
        { label: '期号', prop: 'issue', minWidth: '120' },
        {
          label: '类型',
          prop: 'type',
          minWidth: '120',
          method: (row) => {
            if (row.type === 1) return '新澳门六合彩'
            if (row.type === 3) return '澳门六合彩'
            if (row.type === 2) return '香港六合彩'
            if (row.type === 4) return '极速六合彩'
            return row.type
          }
        },
        {
          label: '开奖号码',
          prop: 'open_code',
          minWidth: '300',
          html: true,
          method: (row) => {
            if (!row.open_code) return '--'
            const numbers = row.open_code.split(',')
            // 生成美观的号码球样式 (最后一个通常是特码，可用不同颜色区分，这里以统一蓝色为例)
            return numbers.map((num, index) => {
              const isTeMa = index === numbers.length - 1
              const bgColor = isTeMa ? '#F56C6C' : '#409EFF' // 特码标红
              return `<span style="
                display: inline-block;
                width: 28px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                background-color: ${bgColor};
                color: #fff;
                border-radius: 50%;
                margin-right: 8px;
                font-weight: bold;
                font-size: 14px;
              ">${num}</span>`
            }).join('')
          }
        },
        {
          label: '开奖时间',
          prop: 'open_time',
          minWidth: '180'
        }
      ],

      // API 配置
      apis: {
        list: {
          url: 'lhcLottery/list',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },

      tableOptions: {
        add: { show: false },
        edit: { show: false },
        delete: { show: false }
      }
    }
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    onValueChange(val) {
      // 监听搜索表单变化
    },

    // 提交搜索
    onSubmit(params = {}) {
      // 深度拷贝一份参数，避免修改原组件绑定的对象
      const searchParams = { ...params }

      // 处理时间范围参数 mapping
      if (searchParams.timeRange && searchParams.timeRange.length === 2) {
        // 如果 UI 组件拿到的时间戳是毫秒，传给后端(秒)需要除以 1000
        searchParams.start_time = Math.floor(searchParams.timeRange[0] / 1000)
        searchParams.end_time = Math.floor(searchParams.timeRange[1] / 1000)
      } else {
        searchParams.start_time = undefined
        searchParams.end_time = undefined
      }

      // 移除多余的 timeRange 字段
      delete searchParams.timeRange

      // 过滤掉空值
      const validParams = Object.keys(searchParams).reduce((acc, key) => {
        if (searchParams[key] !== '' && searchParams[key] !== null && searchParams[key] !== undefined) {
          acc[key] = searchParams[key]
        }
        return acc
      }, {})

      this.queryData = validParams
      // 通知 YMTable 拉取数据
      if (this.$refs.table) {
        this.$refs.table.getList(this.queryData)
      }
    }
  }
}
</script>

<style scoped>
/* 为了避免 HTML 注入的 span 与表格内边距冲突，调整一下表格行高 */
::v-deep .el-table__row td {
  padding: 10px 0;
}
</style>