<template>
  <div>
    <div class="box" style="padding: 0 10%">
      <el-row class="contest-title">
        <el-col :lg="3">
          <h3>{{ languageLibrary[language].f }}</h3>
        </el-col>
        <el-col :lg="9">
          <div style="display: flex;align-items: center;height: 100%;">
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.enrollStatus==''}]" @click="searchByType('')">{{ languageLibrary[language].a }}</el-button>
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.enrollStatus=='0'}]" @click="searchByType('0')">{{ languageLibrary[language].b }}</el-button>
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.enrollStatus=='1'}]" @click="searchByType('1')">{{ languageLibrary[language].c }}</el-button>
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.enrollStatus=='2'}]" @click="searchByType('2')">{{ languageLibrary[language].d }}</el-button>
          </div>
        </el-col>
        <el-col :lg="12">
          <div style="display: flex;align-items: center;height: 100%">
            <el-input v-model="searchParam.name" class="search-input" clearable @clear="getList"  :placeholder="languageLibrary[language].e">
              <template #append>
                <el-button @click="getList" class="search-btn" >
                  <el-icon>
                    <Search/>
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-card v-loading="tableLoading" class="machCard" v-for="(n,index) in newest2">
        <el-row>
          <el-col :lg="8" :xs="24">
            <div class="imgbox">
              <img style="aspect-ratio: 16/8" :src="fillImgUrl(n.coverUrl)">
            </div>
          </el-col>
          <el-col :lg="16" :xs="24">
            <el-row style="height: 100%">
              <el-col :lg="18" :xs="24">
                <div class="centerbox">
                  <div class="centerText">
                        <span style="font-size: 16px;">
                           <div v-if="n.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].b }}</div>
                           <div v-else-if="n.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].c }}</div>
                           <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].d }}</div>
                        </span>
                    <span style="font-size: 26px">{{ n.cptName }}</span>
                    <span style="font-size: 18px" v-if="n.signKnow">{{ n.signKnow }}</span>
                    <span style="font-size: 18px"><img style="margin-right: 2%" src="@/assets/v1/tag01.png" />{{ n.matchTimeStr }}</span>
                    <span style="font-size: 18px"><img style="margin-right: 2%" src="@/assets/v1/tag02.png" />{{ n.address }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :lg="6" :xs="24">
                <div class="endbox">
                  <el-button class="endBtn" @click="goDetail(n.id)">{{ languageLibrary[language].g }}</el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getCompetitionList } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 1)
const languageLibrary = [{
  a:'全部',
  b:'未开始',
  c:'进行中',
  d:'已完结',
  e:'输入搜索内容',
  f:'赛事',
  g:'查看详情',
},{
  a:'All',
  b:'Not started',
  c:'In progress',
  d:'Completed',
  e:'Enter search content',
  f:'Event',
  g:'View details',
},{
  a:'전체',
  b:'시작 전',
  c:'진행 중',
  d:'완료됨',
  e:'검색어 입력',
  f:'이벤트',
  g:'자세히 보기',
},{
  a:'すべて',
  b:'未開始',
  c:'進行中',
  d:'完了',
  e:'検索キーワードを入力',
  f:'イベント',
  g:'詳細を見る',
},{
  a:'Tất cả',
  b:'Chưa bắt đầu',
  c:'Đang diễn ra',
  d:'Đã hoàn thành',
  e:'Nhập nội dung tìm kiếm',
  f:'Giải đấu',
  g:'Xem chi tiết',
}]
const router = useRouter()
const searchParam = ref({
  pageNum:1,
  pageSize:9999,
  enrollStatus:'',
  releaseStatus: 1,
  name:'',
})
const newest2 = ref([])
const tableLoading = ref(false)

onMounted(() => {
  getList()
})

const searchByType = (type) => {
  searchParam.value.enrollStatus = type
  getList()
}

const getList = () => {
  tableLoading.value = true
  getCompetitionList(searchParam.value).then(res => {
    if (res.code == 200) {
      newest2.value = res.rows
    }
    tableLoading.value = false
    console.log(res)
  })
}

const goDetail = (id) => {
  router.push({
    path: `/contest/list/${id}`
  })
}
</script>
<style lang="scss" scoped>
.machCard {
  background: #1F2644;
  border: none;
  margin-bottom: 20px;
  .centerbox {
    height: 100%;
  }
  .centerbox .centerText {
    padding: 20px 10%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color:#fff;
  }
  .centerbox .centerText span {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .endbox {
    display: flex;
    align-items: center;
    justify-content:center;
    height: 100%;
  }
  .endbox .endBtn {
    font-size: 24px;
    font-weight: bold;
    color: #143E6A;
    width: 200px;
    height: 50px;
    border-radius: 25px;
    background: linear-gradient(90deg, #F0E1A5, #DEC172);
  }
}

.contest-title {
  h3 {
    color: #fff;
    font-size: 32px;
  }

  .contest-title-btn {
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 15px;
  }

  .btn-active {
    background: rgba(255,255,255,0.3);
  }

  .search-input {
    height: 50px;
    border: none;
    background: #0E142C;
    border-radius: 25px;

    .search-btn {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background: #232B49;
      color: #fff;
      padding: 0;
    }

    :deep(.el-input__wrapper) {
      background: transparent;
      box-shadow: none;
    }

    :deep(.el-input-group__append) {
      width: 50px;
      background: transparent;
      box-shadow: none;
    }
  }


}
</style>