<template>
  <div>
    <div class="box" style="padding: 0 10%">
      <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].b }}</el-button>
      <el-row class="contest-title">
        <el-col>
          <h3>{{ tName }}</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="photo-space" :lg="8" v-for="item in matchList">
          <div class="photo-img-group">
            <div class="photo-img-layer1"></div>
            <div class="photo-img-layer2"></div>
            <img class="photo-img" @click="goDetail(item.parentId, item.sortId)" :src="fillImgUrl(item.picUrl)">
            <div class="photo-img-info">
              <span style="display: block;font-size: 16px;margin:5px 0">{{item.name}}</span>
<!--              <span style="display: block;font-size: 14px;color: #C2A165">{{item.matchTimeStr}}</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 {useRoute, useRouter} from 'vue-router'
import {useStorage} from "@vueuse/core/index";
import * as match from "@/apiPc/match";
const language = useStorage('language', 1)
const languageLibrary = [{
  a:'图片集锦',
  b:'返回'
},{
  a:'Gallery',
  b:'Return'
},{
  a:'사진첩',
  b:'돌아가기'
},{
  a:'ギャラリー',
  b:'戻る'
},{
  a:'Thư viện hình ảnh',
  b:'Quay lại'
}]
const router = useRouter()
const route = useRoute()
const matchList = ref([])
const tid = ref()
const tName = ref()
const total = ref(0)

onMounted(() => {
  tid.value = route.params.id
  tName.value = route.query.name
  getList()
})

const getList = () => {
  match.getTree({
    code: tid.value
  }).then(async(res) => {
    if (res.code === 200) {
      matchList.value = []
      console.log(res.data.length)
      for (let i=0;i<res.data.length;i++) {
        console.log(res.data[i].id)
        const matchData = await match.getTreeDetail(res.data[i].id)
        matchList.value.push(matchData.data)
      }
    }
  })
}

const goDetail = (cptId, cateId) => {
  router.push({
    path: `/photo/detail/${cptId}`,
    query: {
      cateId: cateId,
    }
  })
}

const goback = function () {
  router.go(-1)
}

</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%;
  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;}

  }
}

.back-btn {
  font-size: 16px;
  color: #fff;
  background: url("@/assets/v1/arrow_left.png") no-repeat left;
  background-size: auto 35px;
  padding-left: 35px;
  box-shadow: none;
  border: none;
}
</style>