<template>
  <div>
    <div class="box">
      <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
      <el-row class="detail-title">
        <el-col :span="4">
          <span v-if="projectMainInfo.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</span>
          <span v-else-if="projectMainInfo.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</span>
          <span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</span>
        </el-col>
        <el-col :span="6">
          <span style="font-size: 20px;font-weight: bold;margin-bottom: 5px">{{projectMainInfo.name}}</span>
<!--          <div style="display: flex;flex-direction: column;">-->
<!--            <span style="font-size: 20px;font-weight: bold;margin-bottom: 5px">{{projectMainInfo.name}}</span>-->
<!--            <span>{{projectMainInfo.beginTime + '~' + projectMainInfo.endTime}}</span>-->
<!--          </div>-->
        </el-col>
        <el-col :span="14">
          <span>比赛时间: {{projectMainInfo.beginTime + '~' + projectMainInfo.endTime}}</span>
        </el-col>

<!--        <el-col style="border-left: 1px solid #929AA0;border-right: 1px solid #929AA0" :span="4">-->
<!--          <div style="display: flex;flex-direction: column;text-align: center">-->
<!--            <span style="font-size: 14px;color: #929AA0;margin-bottom: 5px">{{ languageLibrary[language].b }}</span>-->
<!--            <span style="color: #EEEEEE;font-size: 16px">${{projectMainInfo.serviceFee}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="4">-->
<!--          <div style="display: flex;flex-direction: column;text-align: center">-->
<!--            <span style="font-size: 14px;color: #929AA0;margin-bottom: 5px">{{ languageLibrary[language].c }}</span>-->
<!--            <span style="color: #EEEEEE;font-size: 16px">{{projectMainInfo.projectFormat}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
      </el-row>

      <el-row>
        <el-col class="photo-space" :lg="12" v-for="(item, index) in photoList">
          <div class="photo-img-group">
            <img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.path)">
          </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 { onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core";
import {getMain,getImgList} from '@/apiPc/webSite'
import { fillImgUrl } from '@/utils/ruoyi'

const router = useRouter()
const route = useRoute()
const activeName = ref("first")
const language = useStorage('language', 1)
const languageLibrary = ref([{
  a:'返回',
  b:'总买入费用',
  c:'参赛席位',
  g:'未开始',
  h:'进行中',
  i:'已结束',
},{
  a:'Return',
  b:'Total buy-in fee',
  c:'Entry seats',
  g:'Not started',
  h:'In progress',
  i:'Completed',
},{
  a:'돌아가기',
  b:'총 바이인 금액',
  c:'엔트리 수',
  g:'시작 전',
  h:'진행 중',
  i:'완료됨',
},{
  a:'戻る',
  b:'バイイン総額',
  c:'エントリー数',
  g:'未開始',
  h:'進行中',
  i:'完了',
},{
  a:'Quay lại',
  b:'Tổng phí Buy-in',
  c:'Số ghế tham gia',
  g:'Chưa bắt đầu',
  h:'Đang diễn ra',
  i:'Đã hoàn thành',
}])

const tId = ref()
const cateId = ref()
const projectMainInfo = ref({})
const photoList = ref([])

onMounted(() => {
  tId.value = route.params.id
  cateId.value = route.query.cateId
  getMainInfo()
  getPhotoList()
})

const getMainInfo = () => {
  getMain(tId.value).then(res => {
    if (res.code === 200) {
      projectMainInfo.value = res.data
    }
  })
}

const getPhotoList = () => {
  getImgList({cptId:tId.value, cateId: cateId.value}).then(res => {
    if (res.code === 200) {
      photoList.value = res.rows
    }
  })
}

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

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

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

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

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

.box {
  padding: 0 10%;
}

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

.detail-title {
  color: #fff;
  background: #1F2644;
  padding: 40px 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;

  .not-start {
    display: inline-block;
    background: #3194FA;
    border-radius:6px 0 6px 0;
    padding: 0 4px
  }
}

.photo-space {
  padding: 10px;
}

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

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