import Vue from 'vue'

var vms = Vue.component("amplify-kjcx", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="http://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.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-max">
                        <div class="amplify-title">
                                <div>科技创新({{sciencelnnovateDataList.length}})</div>
                            <div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
                        </div>   
                        <div class="amplify-content">
                            <!--内容区域-->  
                             <div class="amplify-craft-video-flex">
                            <div class="amplify-craft-video-btn">
                                <img  src="/images/carousel_left.png" @click="craftCarouselLeft" style="height: 100px;">
                            </div>
                            <div class="amplify-technical-overflow-max"  ref="craftVollVideo" style="width: 760px;height: 550px;">
                                <div class="amplify-technical-overflow-min" :style="{'width': (sciencelnnovateDataList.length * 760)+'px'}">
                                    <div class="amplify-technical-innovation-max" style="width: 760px;"  v-for="sciencelnnovateData of sciencelnnovateDataList">
                                    <div class="amplify-technical-innovation">
                                        <div class="amplify-technical-innovation-text">课题名称：</div>
                                        <div class="amplify-technical-innovation-info">{{sciencelnnovateData.name}}</div>
                                    </div>
                                    <div class="amplify-technical-innovation">
                                        <div class="amplify-technical-innovation-text">技术指标：</div>
                                    </div>
                                    <div class="amplify-technical-index-max">
                                        <ul class="amplify-technical-index-min">
                                            <li v-for="(item,index) in sciencelnnovateData.context" :key="index">
                                                <div class="amplify-technical-index-text">{{item.name}}</div>
                                                <div class="amplify-technical-index-hr"></div>
                                                <div class="technical-index-state">
                                                    <div v-if="item.status == '已完成'" class="amplify-technical-index-state-tag active">{{item.status}}</div>
                                                    <div v-else-if="item.status == ''" class="amplify-technical-index-state-tag active" style="border: 2px solid grey;background: grey;color: #c0c0c0;">未涉及</div>
                                                    <div v-else class="amplify-technical-index-state-tag">{{item.status}}</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                </div>
                            </div>

                            <div class="ampligy-craft-video-btn">
                                <img src="/images/carousel_right.png" @click="craftCarouselRight" style="height: 100px;">
                            </div>
                        </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {

    },
    data() {
        return {
            show:false,
            //科技创新
            sciencelnnovateDataList:[],
            craftVideoIndex:0,
            craftInterval:'',
        }
    },
    mounted(){
        //科技创新 知道滚动
        this.rollCraftInterval = setInterval(this.rollCraftCarousel,5000);
    },
    methods: {
        openAmplify(){
            this.show = true
            this.scienceInnovateData()
        },
        closeAmplify(){
            this.show = false
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
            }
        },
        //科技创新
        scienceInnovateData(){
            axios.post("/system/scienceInnovateConfig/list1",{pageNum:1,pageSize:9999,projectId:this.projectId}).then(res=>{
                let result = res.data
                let tempData = []
                this.sciencelnnovateDataList = []
                let tmp = {}
                if(result.code == 0){
                    result.rows.forEach(item=>{
                        if(!tmp[item.name]){
                            tmp[item.name] = {
                                name:item.name,
                                context:[]
                            }
                        }

                        if(item.type == '0'){
                            name = '研究报告'
                        }else if(item.type == '1'){
                            name = '知识产权'
                        }else if(item.type == '2'){
                            name = '论文'
                        }else{
                            name = '工法'
                        }

                        if(item.status =='0'){
                            status = '进行中'
                        }else if(item.status =='1'){
                            status = '已完成'
                        }else if(item.status =='4'){
                            status = ''
                        }else{
                            status = '未开始'
                        }
                        tmp[item.name] .context.push({
                            name,
                            status
                        })

                    })
                    for(let k in tmp ){
                        this.sciencelnnovateDataList.push(tmp[k])
                    }
                    
                }
            })
        },
        craftCarouselLeft(){
            if(this.craftVideoIndex  == 0){
                this.craftVideoIndex  = this.sciencelnnovateDataList.length - 1
            }else {
                this.craftVideoIndex  = this.craftVideoIndex - 1
            }
            $(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
        },
        craftCarouselRight(){
            if(this.craftVideoIndex == this.sciencelnnovateDataList.length - 1){
                this.craftVideoIndex = 0
            }else {
                this.craftVideoIndex  = this.craftVideoIndex + 1
            }
            $(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
        },
        rollCraftCarousel(){
            if(this.craftDirection == 'right'){
                if(this.craftVideoIndex == this.sciencelnnovateDataList.length - 1){
                    this.craftVideoIndex = 0
                }else {
                    this.craftVideoIndex  = this.craftVideoIndex + 1
                }
            }else{
                if(this.craftVideoIndex  == 0){
                    this.craftVideoIndex  = this.sciencelnnovateDataList.length - 1
                }else {
                    this.craftVideoIndex  = this.craftVideoIndex - 1
                }
                this.craftDirection = 'right'
            }
            $(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
        },

        craftCostMouseout(){
            clearInterval(this.rollCraftInterval);
        },
        craftCostMouseover(){
            this.rollCraftInterval = setInterval(this.rollCraftCarousel,5000);
        },

    },
    watch:{

    },

})