<template>
  <div>
    <div class="box">
      <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
      <div class="list-title"></div>
      <el-row style="margin: 20px 0">
        <el-select class="list-select" v-model="searchParams.type">
          <el-option
              v-for="item in optionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-row>
      <el-row>
        <el-col v-for="item in testList" :lg="8">
          <div class="child-card">
            <el-button class="go-btn" @click="goDetail(item)"></el-button>
            <el-row style="margin-bottom: 10px" class="not-start">未开始</el-row>
            <el-row style="margin-bottom: 10px; font-weight: bold;font-size: 20px">LPT马拉西亚巡回赛</el-row>
            <el-row style="margin-bottom: 10px;font-size: 16px">2025-11-02 9：00 ~ 2025-11-03 9：00</el-row>
            <el-row>
              <el-col :span="12">
                <div style="display: flex;flex-direction: column;text-align: center">
                  <span style="font-size: 14px;color: #929AA0;margin-bottom: 5px">{{ languageLibrary[language].d }}</span>
                  <span style="color: #EEEEEE;font-size: 16px">$1111111111111111</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="display: flex;flex-direction: column;text-align: center">
                  <span style="font-size: 14px;color: #929AA0;margin-bottom: 5px">{{ languageLibrary[language].e }}</span>
                  <span style="color: #EEEEEE;font-size: 16px">1000</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import {getNewsListById, getnoteListcptid} from '@/apiPc/webSite'
import { useRoute, useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
const route = useRoute()
const router = useRouter()
const language = useStorage('language', 0)
const languageLibrary = ref([{
  a:'返回',
  b:'主赛事',
  c:'微型赛事',
  d:'总买入费用',
  e:'参赛席位',
},{
  a:'Return',
  b:'Main event',
  c:'Mini event',
  d:'Total buy-in fee',
  e:'Entry seats',
},{
  a:'돌아가기',
  b:'메인 이벤트',
  c:'미니 이벤트',
  d:'총 바이인 금액',
  e:'엔트리 수',
},{
  a:'戻る',
  b:'メインイベント',
  c:'ミニイベント',
  d:'バイイン総額',
  e:'エントリー数',
},{
  a:'Quay lại',
  b:'Giải chính',
  c:'Giải phụ',
  d:'Tổng phí Buy-in',
  e:'Số ghế tham gia',
}])


const optionList = ref([{
  label: languageLibrary.value[language.value].b,
  value:'1'
},{
  label: languageLibrary.value[language.value].c,
  value:'2'
}])
const searchParams = ref({
  type:'1'
})
const testList = ref(['a','a','a','a','a','a','a','a','a','a','a'])

onMounted(() => {

})


const getList = () => {
  console.log(query.value)
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
  })
}

const goDetail = (n) => {
  router.push({
    path:`/contest/detail/${n}`
  })
}

const goback = function () {
  router.go(-1)
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 10%;
}

.back-btn {
  font-size: 16px;
  color: #fff;
  background: url("@/assets/v1/arrow_left.png") no-repeat left;
  background-size: auto 35px;
  padding-left: 35px;
  box-shadow: none;
  border: none;
}

.list-title {
  width: 100%;
  background: url("/dev-api/fs/20250729/image/8638425535731875840.png") no-repeat;
  background-size: cover;
  aspect-ratio: 16/3;
  padding: 10%;
}
.list-select {
  width: 200px;

  :deep(.el-select__wrapper) {
    background: #1f2644;
    border: 1px solid #838CB3;
    box-shadow: none;
  }

  :deep(.el-select__wrapper span) {
    color: #fff;
  }

  :deep(.el-select__wrapper .el-select__caret) {
    color: #fff;
  }

  :deep(.el-scrollbar__wrap) {
    background-color: #000 !important;
  }

  :deep(.el-select-dropdown__item.is-hovering) {
    background: rgba(255, 213, 121, 0.2);
  }

  :deep(.el-select-dropdown__item.is-selected) {
    color: #fff;
  }

  :deep(.el-select-dropdown__item) {
    line-height: 20px;
  }

}
.child-card {
  background: #1f2644;
  border: 1px solid #1F477C;
  border-radius: 15px;
  color: #fff;
  padding: 20px;
  margin: 10px;
  position: relative;

  .not-start {
    display: inline-block;
    background: #3194FA;
    border-radius:6px 0 6px 0;
    padding: 0 4px
  }

  .go-btn {
    background: url("/src/assets/v1/arrow00.png") no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    box-shadow: none;
    border: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
  }
}
</style>