import pageInit from "../../../minixs/pageInit.js";
import {maintenance} from "../../../../assets/img/data/serviceSecond.js";
export default {
    name: 'maintenance',
    template: '',
    mixins:[pageInit],
    components: {},
    props: [],
    setup(props, {attrs, slots, emit}) {
        let maintenanceData=maintenance();
        //页签高亮显示
        let tabActive=Vue.ref(0);
        //特点hover显示的图片
        let characterImg=Vue.ref();
        let setcharacter=()=>{
            if(maintenanceData.data && maintenanceData.data.length>0){
                maintenanceData.data.map(item=>{
                    if(item.type=='character'){
                        characterImg.value=item.dataFour[0].img;
                    }


                })
            }
        }
        setcharacter();
        //优势hover高亮显示
        let characterActive=Vue.ref(0);
        //特点的事件
        let prev=(dataLength)=>{
            if(characterActive.value>0){
                characterActive.value--
                if(characterActive.value == 0 || characterActive.value+1==dataLength-6){
                    setDisplay();
                }else if(characterActive.value+1==dataLength-4 ){
                    changeDot(dataLength,2);
                }
            }else if(characterActive.value == 0){
                characterActive.value=dataLength-1
                changeDot(dataLength,1);
            }
        }
        let next=(dataLength)=>{
            if((characterActive.value+1)!=dataLength) {
                characterActive.value++
            }else{
                characterActive.value=0;
            }
            changeDot(dataLength);
        }
        let changeCharacter=(indexC)=>{
            characterActive.value=indexC;
        }
        //特点左右点击切换
        let changeDot=(dataLength,flag)=>{
            if(flag==1){
                //当前为第一个时，向前点击
                maintenanceData.data.map((item,index)=>{
                    if(item.type == 'character'){
                        item.dataFour.map((v,i)=>{
                            if(i>characterActive.value-4){
                                v.isDisplay=true;
                            }else{
                                v.isDisplay=false;
                            }
                        })
                    }
                })
            }else if(flag==2){
                //向前点击
                maintenanceData.data.map((item,index)=>{
                    if(item.type == 'character'){
                        item.dataFour.map((v,i)=>{
                            if(i>characterActive.value-4 && i<=characterActive.value){
                                v.isDisplay=true;
                            }else{
                                v.isDisplay=false;
                            }
                        })
                    }
                })
            }else{
                if(characterActive.value>3 && characterActive.value<dataLength){
                    if(maintenanceData.data && maintenanceData.data.length>0){
                        maintenanceData.data.map((item,index)=>{
                            if(item.type == 'character'){
                                if(characterActive.value>3 && characterActive.value<maintenanceData.data.length){
                                    item.dataFour.map((v,i)=>{
                                        if(i>3 && i<=7){
                                            v.isDisplay=true;
                                        }else{
                                            v.isDisplay=false;
                                        }
                                    })
                                }else{
                                    item.dataFour.map((v,i)=>{
                                        if(i>=dataLength-4){
                                            v.isDisplay=true;
                                        }else{
                                            v.isDisplay=false;
                                        }
                                    })
                                }
                            }
                        })
                    }
                }else{
                    setDisplay();
                }
            }

        }
        //设置特点dot全部显示
        let setDisplay=(flag)=>{
            if(maintenanceData.data && maintenanceData.data.length>0){
                if(flag==1){

                }else{
                    maintenanceData.data.map((item,index)=>{
                        if(item.type == 'character'){
                            item.dataFour.map(v=>{
                                v.isDisplay=true;
                            })
                        }
                    })
                }

            }
        }
        // 挂载完
        Vue.onMounted(() => {

        })

        return {
            characterImg,
            maintenanceData,
            tabActive,
            characterActive,
            setcharacter,
            prev,
            next,
            changeCharacter,
            changeDot,
            setDisplay
        }
    }

}