<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.bgImgUrl)">
        <div style="position: absolute;color: #fff;top:15%;left:5%;width: 100%">
          <el-row class="mg-bottom fontSize_16">
            <div v-if="mainInfo.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
            <div v-else-if="mainInfo.enrollStatus == '2'" 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 class="mg-bottom fontSize_38"><span>{{mainInfo.name}}</span></el-row>
          <el-row class="mg-bottom fontSize_20"><img style="margin-right: 2%" src="@/assets/v1/tag01.png" /><span>{{mainInfo.beginTime}}</span></el-row>
          <el-row class="fontSize_20"><img style="margin-right: 2%" src="@/assets/v1/tag02.png" /><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="item.status == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
              <div v-else-if="item.status == '2'" 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,getProjectTab} 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', 1)
const languageLibrary = ref([{
  a:'返回',
  b:'主赛事',
  c:'微型赛事',
  d:'买入费用',
  e:'参赛人次',
  g:'未开始',
  h:'进行中',
  i:'已结束',
},{
  a:'Return',
  b:'Main event',
  c:'Mini event',
  d:'Buyin',
  e:'Players',
  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:'chi phí mua hàng',
  e:'số lượng người 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:''
})
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
      mainInfo.value.beginTime = getTimeFormate(mainInfo.value.beginTime)
      query.value.cptId = mainInfo.value.id
      getList()
    }
  })
}

const getList = () => {
  getCompetitionProjectList(query.value).then(res => {
    if (res.code === 200) {
      competitionList.value = res.rows
      competitionList.value.forEach(item => {
        getProjectTab({
          pageNum:1,
          pageSize:9999,
          cptId:item.cptId,
          type:'1',
          projectId:item.id,
        }).then(res2 => {
          if (res2.code === 200) {
            if (res2.rows && res2.rows.length > 0) {
              res2.rows.forEach((x,i) => {
                if (i === 1) {
                  item.totalFee = x.field2
                }
              })
            }
          }
        })
      })
    }
  })
}

const getTimeFormate = (time) => {
  const showDay = new Date(time)
  const year = showDay.getFullYear();
  const month = showDay.getMonth() + 1; // 月份是从0开始的，所以需要加1
  const date = showDay.getDate();

  return `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
}

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

.mg-bottom {
  margin-bottom: 25px;
}

.fontSize_20 {
  font-size: 20px;
}

.fontSize_38 {
  font-size: 38px;
}

.fontSize_16 {
  font-size: 16px;
}

@media (max-width: 1550px) {
  .mg-bottom {
    margin-bottom: 8px;
  }
}

@media (max-width: 800px) {
  .fontSize_20 {
    font-size: 14px;
  }

  .fontSize_38 {
    font-size: 16px;
  }

  .fontSize_16 {
    font-size: 12px;
  }

  .list-title {
    aspect-ratio: 16/5;
  }
}
</style>