<template>
	<Layout>
		<div class="layout-container" style="width: 100%">
      <div class="layout-container" style="width: 100%">

        <img src="@/assets/images/pattern-dark.jpg" style="height: 25%;width: 100% " >


      </div>

    </div>

		<div class="section">
			<div class="container" style="max-width: 1160px; margin: 0 auto">
				<div class="section--header">
          <h2 class="section--title"><strong>场景应用</strong></h2>
					<p class="section--description">
						Enterplorer Studio
					</p>
				</div>

				<div class="example-container">
					<div class="am-tabs">
						<ul class="am-tabs-nav am-nav am-nav-tabs am-g">
							<li style="width: 20%"
								v-for="(tab,index) in tabList"
								:key="index"
								@click.prevent="changeTab(tab.exampleType)"
								:class="tabIndex === tab.exampleType ? 'am-active':''">
								<a href="#">{{tab.name}}</a>
							</li>
						</ul>

						<div class="tabs">
							<div class="tab" v-for="(image,index) in list" v-if="image!=null&&image!=''" :key="index">
                <el-image

                    :src="image"
                    fit="cover"
                    :z-index="0"
                    :preview-src-list="srcList">
                </el-image>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


    <div class="section">
      <div class="container" style="max-width: 1160px;">
        <div class="section--header">
          <h2 class="section--title"> <strong>场景应用占比</strong></h2>
          <p class="section--description">
            PROPORTION  OF SCENARIO APPLICATIONS</p>
        </div>
        <img src="@/assets/images/radio.png" style="width: 100%;;margin-top: 20px" alt="">
        <

      </div>

    </div>



    <div class="section">
      <div class="container" style="max-width: 1160px;">
        <div class="section--header">
          <h2 class="section--title"> <strong>每佳云印刷全国分布图</strong></h2>
        </div>
         <img src="@/assets/images/map.png" style="width: 100%;margin-top: 20px" alt="">


      </div>

    </div>



    <div class="section">
      <div class="container" style="max-width: 1160px;">
        <div class="section--header">
          <h2 class="section--title"> <strong>合作伙伴</strong></h2>
          <p class="section--description">
            PARTNERS</p>
        </div>
         <img src="@/assets/images/pat.png" style="width: 100%;" alt="">
      </div>

    </div>
	</Layout>
</template>

<script>
import Layout from "@/components/common/Layout";
export default {
	name: "ExampleView",
	components: {Layout},
	data(){
		return{
			tabIndex: 0,
			tabList:[
			],
			list:[],
      srcList: [
      ]
		}
	},
	mounted() {
		this.findExampleByExampleType()
		this.findExample()
	},
	methods:{
		changeTab(index){
			this.tabIndex = index
			//console.log("tab",tab)
			this.findExampleByExampleType(index)
      this.	this.findExample()
		},
		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]
                console.log("tablist",this.tabList)
                console.log("temp",temp)
                const list = [];
               // this.srcList=[]
                for (let i = 1; i < 17; i++) {
                  // 判断是否为空
                  if (temp['image'+ i] != null){
                    list.push(temp['image'+ i])

                  }
                }
                this.list = list
                this.srcList=list
              }
              console.log("list",this.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);
          });
    }
	}
}
</script>

<style>
.el-overlay {
  z-index: 9999 !important; /* 确保高于导航栏 */
}

.el-image-viewer__wrapper {
  z-index: 9999 !important; /* 预览图层级提高 */
}

.el-image-viewer__img {
  max-width: 82vw !important; /* 限制图片最大宽度为 50% 视口宽度 */
  max-height: 82vh !important; /* 限制图片最大高度为 50% 视口高度 */
}

</style>
