<template>
  <div>
    <div class="box">
      <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
      <div style="position: relative">
        <img class="list-title" :src="fillImgUrl(mainInfo.coverUrl)">
        <div style="position: absolute;color: #fff;top:15%;left:5%">
          <el-row style="font-size: 16px;margin-bottom: 25px">
            <div v-if="mainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
            <div v-else-if="mainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
            <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
          </el-row>
          <el-row style="font-size: 38px;margin-bottom: 25px"><span>{{mainInfo.name}}</span></el-row>
          <el-row style="font-size: 20px;margin-bottom: 25px"><span>{{mainInfo.beginTime + '~' + mainInfo.endTime}}</span></el-row>
          <el-row style="font-size: 20px"><span>{{mainInfo.address}}</span></el-row>
        </div>
      </div>
      <el-row style="margin: 20px 0">
        <el-select
            class="list-select"
            v-model="query.type"
            @change="getList"
        >
          <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 competitionList" :lg="8">
          <div class="child-card">
            <el-button class="go-btn" @click="goDetail(item.id)"></el-button>
            <el-row style="margin-bottom: 10px">
              <div v-if="competitionList.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
              <div v-else-if="competitionList.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
              <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
            </el-row>
            <el-row style="margin-bottom: 10px; font-weight: bold;font-size: 20px">{{item.name}}</el-row>
            <el-row style="margin-bottom: 10px;font-size: 16px">{{item.startTime + '~' + item.endTime}}</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">${{item.serviceFee}}</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">{{item.projectFormat}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import {getMain,getCompetitionProjectList} 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:'参赛席位',
  g:'未开始',
  h:'进行中',
  i:'已结束',
},{
  a:'Return',
  b:'Main event',
  c:'Mini event',
  d:'Total buy-in fee',
  e:'Entry seats',
  g:'Not started',
  h:'In progress',
  i:'Completed',
},{
  a:'돌아가기',
  b:'메인 이벤트',
  c:'미니 이벤트',
  d:'총 바이인 금액',
  e:'엔트리 수',
  g:'시작 전',
  h:'진행 중',
  i:'완료됨',
},{
  a:'戻る',
  b:'メインイベント',
  c:'ミニイベント',
  d:'バイイン総額',
  e:'エントリー数',
  g:'未開始',
  h:'進行中',
  i:'完了',
},{
  a:'Quay lại',
  b:'Giải chính',
  c:'Giải phụ',
  d:'Tổng phí Buy-in',
  e:'Số ghế tham gia',
  g:'Chưa bắt đầu',
  h:'Đang diễn ra',
  i:'Đã hoàn thành',
}])


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

const tId = ref()
const query = ref({
  pageNum:1,
  pageSize:9999,
  cptId:'',
  type:'1'
})
const competitionList = ref([])

onMounted(() => {
  tId.value = route.params.id
  getMainInfo()
})

const mainInfo = ref({})
const getMainInfo = () => {
  getMain(tId.value).then(res => {
    if (res.code === 200) {
      mainInfo.value = res.data
      query.value.cptId = mainInfo.value.id
      getList()
    }
  })
}

const getList = () => {
  getCompetitionProjectList(query.value).then(res => {
    if (res.code === 200) {
      competitionList.value = res.rows
    }
  })
}

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;
}
.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>