<template>
  <div>
    <div class="box" style="padding: 0 10%">
      <el-row class="contest-title">
        <el-col :lg="12">
          <h3>赛事视频</h3>
        </el-col>
        <el-col :lg="12">
          <div style="display: flex;align-items: center;height: 100%">
            <el-input class="search-input" clearable  placeholder="请输入搜索内容" 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-row>
        <el-col class="photo-space" :lg="6" v-for="item in itemList">
          <div class="photo-img-group">
            <img class="photo-img" @click="goDetail(item)" :src="fillImgUrl(item.picUrl)">
            <div class="photo-img-info">
              <span style="display: block;font-size: 16px;padding:5px 0">{{item.name}}</span>
              <span style="display: block;font-size: 14px;color: #C2A165">{{item.publishTime}}</span>
            </div>
          </div>
        </el-col>
      </el-row>


    </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";
import * as match from "@/apiPc/match";
const language = useStorage('language', 1)
const router = useRouter()
const searchParam = ref({
  status: 1,
  sortId: 2000,
})

const itemList = ref([])

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

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

const getList = () => {
  match.getNoteList(searchParam.value).then(res => {
    if (res.code === 200) {
      itemList.value = res.rows
      itemList.value.forEach(x => {
        x.attacth = JSON.parse(x.attacthJson)
      })
    }
  })
}

const goDetail = (n) => {
  router.push({
    path: `/news/detail/${n.noteId}`
  })
}
</script>
<style lang="scss" scoped>
.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;
    }
  }


}

.photo-space {
  padding: 10px;
}

.photo-img-group {
  padding: 20px;
  width: 100%;
  position: relative;

  .photo-img-info {
    background: #1F2644;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    color: #fff;
  }
}

.photo-img {
  width: 100%;
  aspect-ratio: 2/1;
  cursor: pointer;
}
</style>