<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)">
            <span style="display: block;font-size: 16px;margin:5px 0;color:#fff">{{item.name}}</span>
          </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', 0)
const languageLibrary = ref([{
  a:'周边商城',
},{
  a:'Mall',
},{
  a:'몰 / 쇼핑몰',
},{
  a:'ショップ',
},{
  a:'Cửa hàng lưu niệm/ Cửa hàng phụ kiện',
}])
const router = useRouter()
const searchParam = ref({
  status: 1,
  sortId: 4000,
})
const itemList = ref([])

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

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

const goDetail = (id) => {
  router.push({
    path: `/photo/detail/${id}`
  })
}
</script>
<style lang="scss" scoped>
.photo-space {
  padding: 10px;
}

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

.photo-img {
  width: 100%;
  //cursor: pointer;
}

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

@media (max-width: 500px) {
  .box{width: 100%}
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
  :deep(.el-card__body){padding: 10px;}
}
</style>