import pageInit from "../../../minixs/pageInit.js";
import {businessApp} from "../../../../assets/img/data/serviceSecond.js";
export default {
    name: 'businessApp',
    template: '',
    mixins:[pageInit],
    components: {},
    props: [],
    setup(props, {attrs, slots, emit}) {
        let businessAppData=businessApp();
        //页签高亮显示
        let tabActive=Vue.ref(0);
        //价值的简介
        let valueContent=Vue.ref();
        //价值的hover显示的图标
        let valueIcon=Vue.ref();
        //价值的hover显示
        let valueIndex=Vue.ref(0);
        //特点hover显示的图片
        let characterImg=Vue.ref();
        let setcharacter=()=>{
            if(businessAppData.data && businessAppData.data.length>0){
                businessAppData.data.map(item=>{
                    if(item.type=='character'){
                        characterImg.value=item.dataFour[0].img;
                    }
                    if(item.type == 'value'){
                        valueContent.value=item.dataFive[0].introData;
                        valueIcon.value=item.dataFive[0].iconA;
                    }
                })
            }
        }
        setcharacter();
        //优势hover高亮显示
        let characterActive=Vue.ref(0);
        //特点是否显示
        let isMouseover=Vue.ref(false);
        //优势鼠标移入事件
        let showHover=(indexA)=>{
            valueIndex.value=indexA;
            if(businessAppData.data && businessAppData.data.length>0){
                businessAppData.data.map(item=>{
                    if(item.type == 'value'){
                        valueContent.value=item.dataFive[indexA].introData;
                        valueIcon.value=item.dataFive[indexA].iconA;
                    }
                })
            }
        }
        //优势鼠标移出事件
        let hideHover=()=>{
            setcharacter();
        }
        //特点的事件
        let prev=(dataLength)=>{
            if(characterActive.value>0){
                characterActive.value--
                if(characterActive.value == 0){
                    setDisplay();
                }
            }else if(characterActive.value == 0){
                characterActive.value=dataLength-1
                changeDot(dataLength);
            }
        }
        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)=>{
            if(characterActive.value>2 && characterActive.value<dataLength){
                if(businessAppData.data && businessAppData.data.length>0){
                    businessAppData.data.map((item,index)=>{
                        if(item.type == 'character'){
                            item.dataFour[characterActive.value-3].isDisplay=false;
                        }
                    })
                }
            }else{
                setDisplay();
            }
        }
        //设置特点dot全部显示
        let setDisplay=()=>{
            if(businessAppData.data && businessAppData.data.length>0){
                businessAppData.data.map((item,index)=>{
                    if(item.type == 'character'){
                        item.dataFour.map(v=>{
                            v.isDisplay=true;
                        })
                    }
                })
            }
        }
        // 挂载完
        Vue.onMounted(() => {

        })

        return {
            characterImg,
            businessAppData,
            tabActive,
            characterActive,
            isMouseover,
            showHover,
            hideHover,
            setcharacter,
            valueContent,
            valueIcon,
            valueIndex,
            prev,
            next,
            changeCharacter,
            changeDot,
            setDisplay
        }
    }

}