<template>
	<Layout>
		<div class="gallery-box" v-if=" photos.length > 0">
			<div class="gallery">
				<div class="active-photo" :style="'background-image: url('+ photos[activePhoto]+');'">
<!--					<button type="button"
						aria-label="Previous Photo"
						class="previous"
						@click="previousPhoto()">
						◀
					</button>
					<button type="button"
						aria-label="Next Photo"
						class="next"
						@click="nextPhoto()">
						▶
					</button>-->
				</div>
			<div class="thumbnails" >
					<div v-for="(photo, index) in photos"
						:key="index"
						:src="photo"
						@click="activePhoto = index"
						:class="{'active': activePhoto === index}"
						:style="'background-image: url('+photo+');'">
					</div>

<!--

        <div class="image-container">
          <img v-for="(photo, index) in photos"  :src="photo" />
          <div/>
-->

        </div>

			</div>
		</div>

	</Layout>
</template>

<script>
import Layout from "@/components/common/Layout";
export default {
	name: "ProductDetailsView",
	components: {Layout},
	data(){
		return{
			title: '',
			introduction:'',
			activePhoto: 0,
      list:[],
			photos: []
		}
	},
	mounted() {
    console.log(this.$route)
		this.findExampleByExampleType(this.$route.params.typeId)
	},
	methods:{

    findExampleByExampleType(exampleType){

      //根据案例类型进行查询分类
      this.$post("/example/interlist", {"exampleType":exampleType})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              if(res.data.data.length>0){
                const temp = res.data.data[0]
                const list = [];
                for (let i = 1; i < 17; i++) {
                  // 判断是否为空
                  if (temp['image'+ i] != null&&temp['image'+ i] != ''){
                    list.push(temp['image'+ i])
                  }
                }

                console.log("list",list)
                this.photos = list
                this.srcList=list
              }

            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },
    findExample(){
      //根据案例类型进行查询分类
      this.$post("/example/interlist", {})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              if(res.data.data.length>0){
                this.tabList=res.data.data
              }

            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },

		nextPhoto () {
			this.activePhoto = ( this.activePhoto+1 < this.photos.length ? this.activePhoto+1 : 0 )
		},
		previousPhoto () {
			this.activePhoto = ( this.activePhoto-1 >= 0 ? this.activePhoto-1 : this.photos.length-1 )
		}
	}
}
</script>

<style scoped>

* {
	outline: none;
	box-sizing: border-box;
}

.gallery-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: auto;
	text-align: center;
	width: 100%;
}

.gallery-box .gallery {
	width: 60%;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	padding: 4px 4px 6px;
	border-radius: 8px;
	margin-bottom: 30px;
}
.gallery-box .gallery .active-photo {
	width: 100%;
	margin-bottom: 5px;
	padding-bottom: 60%;
	background-position: center;
	background-repeat: no-repeat;
  background-size: contain;
	border: 2px solid #fff;

}

.gallery-box .gallery .active-photo button {
	border: none;
	background-color: transparent;
	font-size: 30px;
	/*color: #fff;*/
	color: #59bcdb;
	opacity: 0.5;
	position: absolute;
	outline: none;
	height: 100%;
}

.gallery-box .gallery .active-photo:hover {
	opacity: 1;
}
.gallery-box .gallery .active-photo .previous {
	padding: 0 1em 0 0.7em;
	left: 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 );
}
.gallery-box .gallery .active-photo .next {
	padding: 0 0.7em 0 1em;
	right: 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 );
}

.gallery-box .gallery .thumbnails {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-gap: 4px;

}
.thumbnails div {
	border: 2px solid #fff;
	outline: 2px solid #fff;
	cursor: pointer;
	padding-bottom: 65%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
  place-items: center;
}
.thumbnails:hover {
	/*opacity: 0.6;*/
 }
.thumbnails .active {
	outline-color: #59bcdb;
	opacity: 0.6;

 }

.image-container {
  width: 300px; /* 设定固定宽度 */
  height: 200px; /* 设定固定高度 */
  overflow: hidden; /* 防止溢出 */
}

.image-container img {
  width: 100%;
  height: auto;
  clip-path: inset(10% 10% 10% 10%);
}

</style>