<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <a-list :loading="loading" :grid="{ gutter: 14, column: 4 }" :data-source="list">
              <template #renderItem="{ item }">
                <el-col :span="24" class="list">
                  <el-col :span="24" class="name textOver">
                    <el-tooltip effect="dark" :content="item.match_name" placement="top">
                      {{ item.match_name || '暂无比赛名称' }}
                    </el-tooltip>
                  </el-col>
                  <el-col :span="24" class="two_1">
                    <span>比赛日期：</span>
                    {{ getTime(item.match_time) }}
                  </el-col>
                  <el-col :span="24" class="two_1">
                    <span>报名费：</span>
                    {{ item.money || '暂无' }}
                  </el-col>
                  <el-col :span="24" class="two_1 textOver">
                    <span>报名时间：</span>
                    {{ item.time || '暂无' }}
                  </el-col>
                  <el-col :span="24" class="two_1 two_2 textOver">
                    <span>赛事状态：</span>
                    {{ getDict(item.status, 'status') }}
                  </el-col>
                  <el-col :span="24" class="bottom">
                    <el-button @click.stop="toDel(item)" type="danger" size="small">
                      取消报名
                    </el-button>
                    <el-button @click.stop="toView(item)" type="primary" size="small">
                      查看赛事详情
                    </el-button>
                  </el-col>
                </el-col>
              </template>
            </a-list>
          </el-col>
          <el-col :span="24" class="two">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :page-sizes="[10, 20, 50, 100, 200]"
              :total="total"
              :page-size="limit"
              v-model:current-page="currentPage"
              @current-change="changePage"
              @size-change="sizeChange"
            >
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { SignStore } from '@/store/api/platform/sign'
import { DictDataStore } from '@/store/api/system/dictData'
const store = SignStore()
const dictDataStore = DictDataStore()
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 字典表
const statusList = ref([])
// 查看
const toView = (item) => {
  router.push({ path: '/innovation/detail', query: { id: item.match } })
}
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
}
const search = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    user: user.value._id
  }
  const res = await store.sign(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 时间
const getTime = (data) => {
  if (data) return `${data[0]} 至 ${data[1]}`
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'status') res = statusList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 取消报名
const toDel = async (item) => {
  if (item.status != '2') {
    ElMessageBox.confirm('是否确认取消报名?', '取消报名', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await store.del(item._id)
        if (res.errcode == '0') {
          await search({ skip, limit })
          ElMessage({
            type: 'info',
            message: `比赛: ${item.match_name}已取消`
          })
        }
      })
      .catch(() => {})
  } else {
    ElMessage({
      message: '该比赛报名已结束无法取消报名！',
      type: 'warning'
    })
  }
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style lang="scss" scoped>
.main {
  min-height: 77vh;
  background: rgb(248, 248, 248);
  .one {
    min-height: 65vh;
    margin: 15px 0;
    .list {
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
      border-radius: 2px;
      width: 285px;
      height: 190px;
      margin-bottom: 15px;
      cursor: pointer;
      transition: all 0.3s;
      padding: 20px;

      .name {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #121834;
        font-weight: 500;
        margin: 5px 0 0 0;
      }

      .name:hover {
        color: #2374ff;
      }

      .two_1 {
        font-size: 12px;
        text-align: justify;
        line-height: 12px;
        font-weight: 400;
        letter-spacing: 0;
        color: #8f97a3;
        margin-top: 10px;

        span:last-child {
          color: #525a68;
        }
      }
      .two_2 {
        color: red;
      }

      .bottom {
        margin: 10px;
        text-align: right;
        .button {
          font-size: 12px;
          color: #fff;
          text-align: center;
          line-height: 12px;
          font-weight: 500;
          padding: 5px 12px;
          background: #2374ff;
          box-shadow: 0 3px 6px 0 rgba(35, 116, 255, 0.1);
          border-radius: 2px;
        }
      }
    }

    .list:hover {
      background: #f0f7ff;
      box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
    }
  }
  .two {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px;
  }
}
</style>
