<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.type=='0'}]" @click="searchByType('0')">{{ languageLibrary[language].a }}</el-button>
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.type=='1'}]" @click="searchByType('1')">{{ languageLibrary[language].b }}</el-button>
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.type=='2'}]" @click="searchByType('2')">{{ languageLibrary[language].c }}</el-button>
            <el-button :class="['contest-title-btn',{'btn-active': searchParam.type=='3'}]" @click="searchByType('3')">{{ languageLibrary[language].d }}</el-button>
          </div>
        </el-col>
        <el-col :lg="12">
          <div style="display: flex;align-items: center;height: 100%">
            <el-input class="search-input" clearable  :placeholder="languageLibrary[language].e" v-model="searchParam.text">
              <template #append>
                <el-button class="search-btn" >
                  <el-icon>
                    <Search/>
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-card 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.picUrl)">
            </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 style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">未开始</div>
                        </span>
                    <span style="font-size: 26px">Long Poker</span>
                    <span style="font-size: 18px"><img style="margin-right: 2%" src="@/assets/v1/tag01.png" />2020.1.1</span>
                    <span style="font-size: 18px"><img style="margin-right: 2%" src="@/assets/v1/tag02.png" />123sw23</span>
                  </div>
                </div>
              </el-col>
              <el-col :lg="6" :xs="24">
                <div class="endbox">
                  <el-button class="endBtn" @click="goDetail(n.sortId)">{{ 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 { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
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({
  type:'1',
  text:'',
})
const newest2 = ref([{
  attacthJson:'',
  belongTime: "2025-01-14",
  isOut:'0',
  isTop:'1',
  name:'2025跆拳道世锦赛筹备快报，牵手巨无霸综合体，献给世界的欢乐',
  noteId:'1907041686198497281',
  picUrl:'/fs/20250729/image/8638425535731875840.png',
  publishType:'',
  sortId:'10000000',
  sortName:'官方发布',
},{
  attacthJson:'',
  belongTime: "2025-01-14",
  isOut:'0',
  isTop:'1',
  name:'2025跆拳道世锦赛筹备快报，牵手巨无霸综合体，献给世界的欢乐1',
  noteId:'1907041686198497281',
  picUrl:'/fs/20250729/image/8638425535731875840.png',
  publishType:'',
  sortId:'10000001',
  sortName:'官方发布',
},{
  attacthJson:'',
  belongTime: "2025-01-14",
  isOut:'0',
  isTop:'1',
  name:'2025跆拳道世锦赛筹备快报，牵手巨无霸综合体，献给世界的欢乐2',
  noteId:'1907041686198497281',
  picUrl:'/fs/20250729/image/8638425535731875840.png',
  publishType:'',
  sortId:'10000002',
  sortName:'官方发布',
},{
  attacthJson:'',
  belongTime: "2025-01-14",
  isOut:'0',
  isTop:'1',
  name:'2025跆拳道世锦赛筹备快报，牵手巨无霸综合体，献给世界的欢乐3',
  noteId:'1907041686198497281',
  picUrl:'/fs/20250729/image/8638425535731875840.png',
  publishType:'',
  sortId:'10000003',
  sortName:'官方发布',
}])

onMounted(() => {

})

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

const getList = (obj) => {
  getNewsListById(obj).then(res => {
    newsList.value = res.rows
  })
}

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>