<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, index) in itemList">
          <div class="photo-img-group">
            <img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.picUrl)">
            <span style="display: block;font-size: 16px;margin:5px 0;color:#fff">{{item.text}}</span>
          </div>
        </el-col>
      </el-row>

      <el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
        <el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
        <el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
        <img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </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";
import { fillImgUrl } from '@/utils/ruoyi'

const language = useStorage('language', 1)
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}`
  })
}

const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const imageIndex = ref(0)
const openImage = function (index) {
  imageIndex.value = index
  dialogImageUrl.value = fillImgUrl(itemList.value[index].picUrl)
  dialogVisible.value = true
}

const preImage = function () {
  if (imageIndex.value >= 1) {
    imageIndex.value -= 1
  }
  dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
}

const nextImage = function () {
  if (imageIndex.value < (itemList.value.length - 1)) {
    imageIndex.value += 1
  }
  dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
}

</script>
<style lang="scss" scoped>
.preview-button {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
}

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