<template>
  <div>
    <div class="box" style="padding: 0 10%">
      <el-row class="contest-title">
        <el-col>
          <h3>{{ languageLibrary[language].a }}</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="photo-space" :lg="8" v-for="item in itemList">
          <div class="photo-img-group">
            <img class="photo-img" :src="fillImgUrl(item.picUrl)">
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
import * as match from "@/apiPc/match";

const language = useStorage('language', 0)
const languageLibrary = [{
  a:'Instagram'
},{
  a:'Instagram'
},{
  a:'Instagram'
},{
  a:'Instagram'
},{
  a:'Instagram'
}]
const router = useRouter()
const searchParam = ref({
  status: 1,
  sortId: 3000,
})
const itemList = ref([])

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

const getList = () => {
  match.getNoteList(searchParam.value).then(res => {
    if (res.code === 200) {
      itemList.value = res.rows
    }
  })
}

</script>
<style lang="scss" scoped>
.photo-pagination {
  justify-content: center;
  margin: 10px;

  :deep(.el-pager li) {
    background: transparent;
    color: #fff;
  }

  :deep(.el-pager li.is-active) {
    background: #CAA767;
  }
}

.photo-space {
  padding: 10px;
}

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

  .photo-img-layer1 {
    height: 6px;
    border-radius: 6px 6px 0 0;
    background: #454D6C;
    width: 60%;
    margin: 1px auto;
  }

  .photo-img-layer2 {
    height: 6px;
    border-radius: 6px 6px 0 0;
    background: #454D6C;
    width: 80%;
    margin: 0 auto;
  }

  .photo-img-info {
    position: absolute;
    bottom: 20px;
    background: rgba(44, 44, 44, 0.8);
    width: calc(100% - 40px);
    height: 50px;
    padding-left: 20px;
    color: #fff;
  }
}

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

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


}

.firstItem{cursor: pointer;
  background: #F7F8FC;height: 100%;padding: 10px 20px;
  .date{font-weight: bold;transform: scaleX(0.7);transform-origin: left;
    font-size: 18px;
    color: #4C5359;
    p{margin: 5px 0;}
  }
  h3{margin: 10px 0;
    font-size: 22px;}
  .go{color: #929AA0;
    font-size: 14px;padding: 0 0 5px;}
  &:hover{background: #dcdde1;}
}
.newsLine{
  margin: 20px;
  .firstItem{margin-bottom: 10px;}
  .item{display: flex;position: relative;width: 100%;height: 90px;
    align-items: center;cursor: pointer;border-bottom: 1px solid #EEEEEE;
    .date{width: 60px;height: 60px;text-align: center;background: #FAFAFA;margin: 0 10px;
      .day{color: #4C5359;transform: scaleX(0.7);font-weight: bold;font-size: 24px;}
      p{font-size: 14px;margin: 0;transform: scaleX(0.7);font-weight: bold;color: #7B7F83;}
    }
    .item-body{width: 60%;
      h3{padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 18px;color: #000000;}
    }
    .go{background: url("@/assets/v1/about/go.png") no-repeat center;background-size: contain;
      position: absolute;width: 30px;height: 30px;right: 10px;
      filter:grayscale(1);
    }
  }
  .item:hover{background: #f7f8fc;
    .date{
      background:#000;
      .day{color: #fff;}
      p{color: #fff;}
    }
    .item-body{
      h3{color: #000;}
    }
  }
}

@media (max-width: 500px) {
  .box{width: 100%}
  .forWei {
    display: block;
  }
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
  :deep(.el-card__body){padding: 10px;}
  .flexBody{display: block;background: transparent;}
  .infoPart{background: #fff;padding: 10px;margin:0 15px}
  .firstItem{padding: 10px 20px;
    .date{
      font-size: 14px;}
    h3{margin: 10px 0;
      font-size: 14px;}
    .go{font-size: 12px;}
  }
  .newsLine{
    .item{height: 50px;
      .date{height: 34px;width: 44px;margin: 0;
        .day{font-size: 16px;}
        p{font-size: 12px;}
      }
      .item-body{width: 80%;
        h3{font-size: 14px;}
      }
    }
    .go{display: none;}

  }
}
</style>