var vms = Vue.component("amplify-xmdt", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="https://fileimg.makalu.cc/WEB_90022A49B38E4DA39DE4D8869D90A094.png"  @click="openAmplify">
            </div>
            <transition name="el-zoom-in-top">
                <div class="amplify-fixed" v-show="show"  style="display: none" @click="closeAmplifyAll">
                    <div class="amplify-maxs">
                        <div class="amplify-titles">
                            <div v-html="modeltitle"></div>
                            <div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
                        </div>   
                        <div class="amplify-contents">
                            <!--内容区域-->  
                            
<!--                            <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout"  @mouseover="carouselMouseover">-->
<!--                                <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
<!--                                     <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
<!--                                        <img :src="item.url">-->
<!--                                        <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}"    @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
<!--                                    <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
<!--                                </div>-->
<!--                            </div>-->

                                <div class="popup-project-introduction-details">
                                    <div class="popup-project-introduction-info">
                                        <el-row>
                                            <el-col :span="6" v-for="item in forData" style="padding: 10px;">
                                                <el-image style="width: 200px; height: 200px;" :src="item.url"
                                                          :preview-src-list="datas"> </el-image>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {
        modeltitle:{
            type:String
        },
    },
    data() {
        return {
            show: false,
            height: 510,
            width: 910,
            forData: [],
            arrowLeft: -45,
            arrowRight:-45,
            interval:undefined,
            left:0,
            direction:'left',
            projectId:JSON.parse(localStorage.getItem("data")).id,
            datas:[]
        }
    },
    mounted() {

    },
    methods: {
        openAmplify() {
            console.log(this.modeltitle)
            this.show = true
            this.getData()
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },
        // 调用接口
        getData() {
            let that = this
            axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
                let data = res.data.data
                let type = {}
                for (let info of data) {
                    if (!type[info.sub_type]) {
                        type[info.sub_type] = new Array()
                    }
                    info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
                    info.text = info.file_name
                    type[info.sub_type].push(info)
                }
                that.forData = type[0];
                console.log(type)
                console.log(that.forData)
               that.forData.map(item=>this.datas.push(item.url))
            }).catch(err => {

            })
        },
        carouselMouseover() {
            this.arrowLeft = 10
            this.arrowRight = 10
            clearInterval(this.interval);
        },
        carouselMouseout() {
            this.arrowLeft = -30
            this.arrowRight = -30
            this.direction = 'left'
            this.interval = setInterval(this.timer, 3000);
        },
        clickCtrl(direction) {
            this.direction = direction
            this.timer()
        },
        timer() {
            if (this.direction == 'left') {
                this.left = this.left - this.width
                if (this.left == -((this.forData.length) * this.width)) {
                    this.left = 0
                }
            } else {
                if (this.left == 0) {
                    this.left = -((this.forData.length - 1) * this.width)
                } else {
                    this.left = this.left + this.width
                }
            }
        },
    },
    watch: {}


})