<style>
@import url('../../../../assets/css/feture');
</style>

<template>
    <div v-if='t.length>0' id='newFeatureBox'>
        <div>
            <div class="feature-box" v-for="i in t" :key="i">
                <feature-header ref='featureHead' :data='h' @update-head='updateHead' :isReadonly='isReadOnly'></feature-header>
                <featureBody ref='featureBody' @opera-box='move' :data='getData(i)' :isReadonly='isReadOnly' :cid='data.ConfigId' :index=i :pages='t.length'></featureBody>
                <feature-footer :data='f'></feature-footer>
            </div>
        </div>
    </div>
</template>
<script>
import featureHeader from './featureHeader'
import featureFooter from './featureFooter'
import featureBody from './featureBody'
export default {
    props:{
        data:{
            type:Object,
            default:null
        }
    },
    data () {
        return {
            d:[],
            h:{},
            f:{},
            t:[],
            isReadOnly:false
        }
    },
    components: {
        featureHeader,
        featureFooter,
        featureBody
    },
    watch: {
        data:{
            handler(val,oldVal){
                this.init()
            },
            deep:true
        }
    },
    mounted () {
        if(this.data.FeatureHtmlJson && this.data.FeatureHtmlJson.d && this.data.FeatureHtmlJson.d.length>0){
            this.d=this.data.FeatureHtmlJson.d
            this.h=this.data.FeatureHtmlJson.h
            this.f=this.data.FeatureHtmlJson.f
        } else{
            this.init()
        }
        
        for(var i=0;i<Math.ceil(this.d.length/3);i++)
            this.t.push(i)
    },
    methods: {
        init() {
            //初始化身体
            if(this.data && this.data.DayList){
                let tempArray=[] //只装三个
                //第一遍取出所有的酒店
                this.data.DayList.forEach(x=>{
                    let obj={}
                    obj.type=1
                    let cityName=''
                    if(x.TrafficObj.SubTraffic && x.TrafficObj.SubTraffic.length>0){
                        cityName=x.TrafficObj.SubTraffic[x.TrafficObj.SubTraffic.length-1].ArrivalCityName
                    }
                    x.HotelArray.forEach(y=>{
                        obj.cityName=cityName

                        let name=!y.HotelName?'':y.HotelName
                        if(name.indexOf('(')!=-1)
                            name=name.split('(')[0]
                        else if(name.indexOf('（')!=-1)
                            name=name.split('（')[0]
                        obj.name=name.length>10?name.substring(0,10):name

                        obj.img=y.ImaArray&&y.ImaArray.length>0?y.ImaArray[0].Url:null
                        
                        let desc=y.Description?y.Description.replace(/<\/?.+?>/g,""):''
                        desc=desc.replace(/ /g,"");
                        desc=desc.replace(/&nbsp;/ig, "");
                        obj.description=desc
                        obj.x=0,
                        obj.y=0
                        
                        if(obj.cityName=="" || !obj.img || obj.name=='' || obj.desc==''){
                            //空数据暂时不处理
                        }else{
                            let isExsit=false
                            this.d.forEach(x=>{
                                if(x.name==obj.name){
                                    isExsit=true
                                    return false
                                }
                            })
                            if(!isExsit)
                                this.d.push(JSON.parse(JSON.stringify(obj)))
                        }
                    })
                })
                //第二遍取出所有的景点
                this.data.DayList.forEach(x=>{
                    let obj={}
                    obj.type=2
                    let cityName=''
                    if(x.TrafficObj.SubTraffic && x.TrafficObj.SubTraffic.length>0){
                        cityName=x.TrafficObj.SubTraffic[x.TrafficObj.SubTraffic.length-1].ArrivalCityName
                    }
                    x.ScenicArray.forEach(y=>{
                            obj.cityName=cityName

                            let name=y.CouponsName?y.CouponsName:''
                            if(name.indexOf('(')!=-1)
                                name=name.split('(')[0]
                            else if(name.indexOf('（')!=-1)
                                name=name.split('（')[0]
                            obj.name=name.length>10?name.substring(0,10):name

                            obj.img=y.NewImaArray&&y.NewImaArray.length>0?y.NewImaArray[0].Url:null
                            
                            let desc=y.Description?y.Description.replace(/<\/?.+?>/g,""):''
                            desc=desc.replace(/ /g,"");
                            desc=desc.replace(/&nbsp;/ig, "");
                            obj.description=desc
                            obj.x=0,
                            obj.y=0
                            
                            
                            if(obj.cityName=="" || !obj.img || obj.name=='' || obj.desc==''){
                                //空数据暂时不处理
                            }else{
                                let isExsit=false
                                this.d.forEach(x=>{
                                    if(x.name==obj.name){
                                        isExsit=true
                                        return false
                                    }
                                })
                                if(!isExsit)
                                    this.d.push(JSON.parse(JSON.stringify(obj)))
                            }
                    })
                })
                //第三遍取出所有的餐厅
                this.data.DayList.forEach(x=>{
                    let obj={}
                    obj.type=3
                    let cityName=''
                    if(x.TrafficObj.SubTraffic && x.TrafficObj.SubTraffic.length>0){
                        cityName=x.TrafficObj.SubTraffic[x.TrafficObj.SubTraffic.length-1].ArrivalCityName
                    }
                    x.dayArray.forEach(y=>{
                        if(y.Type=='4'){
                            obj.cityName=cityName

                            let name=!y.DinnerName?'':y.DinnerName
                            if(name.indexOf('(')!=-1)
                                name=name.split('(')[0]
                            else if(name.indexOf('（')!=-1)
                                name=name.split('（')[0]
                            obj.name=name.length>10?name.substring(0,10):name

                            obj.img=y.ImaArray&&y.ImaArray.length>0?y.ImaArray[0].Url:null
                            
                            let desc=y.Description?y.Description.replace(/<\/?.+?>/g,""):''
                            desc=desc.replace(/ /g,"");
                            desc=desc.replace(/&nbsp;/ig, "");
                            obj.description=desc
                            obj.x=0,
                            obj.y=0
                            if(obj.cityName=="" || !obj.img || obj.name==''){
                                //空数据暂时不处理
                            }else{
                                let isExsit=false
                                this.d.forEach(x=>{
                                    if(x.name==obj.name){
                                        isExsit=true
                                        return false
                                    }
                                })
                                if(!isExsit)
                                    this.d.push(JSON.parse(JSON.stringify(obj)))
                            }
                        }
                    })
                })
            }
            
            //初始化头部
            this.h.subTitle=this.data.Subtitle
            this.h.title=this.data.Title.length>20?this.data.Title.substring(0,20):this.data.Title
            //初始化A4腰
            this.f.line=this.data.LineName.replace(/出境/ig, "");
        },
        getData(i) {
            let tempArray=[]
            for (let index = i*3; index < i*3+3; index++) {
                if(index==this.d.length)
                    break;
                else
                    tempArray.push(this.d[index]) 
            }
            return tempArray
        },
        getFeatureData(){
            this.isReadonly=true
            let j={
                d:this.d,
                h:this.h,
                f:this.f
            }
            this.$refs.featureBody.forEach(x=>{
                x.setReadOnly(true)
            })
            this.$refs.featureHead.forEach(x=>{
                x.setReadOnly(true)
            })
            return j
        },
        move(active,i,path){
            if(active=='up'){
                let tempObj1=JSON.stringify(this.d[i-1])
                let tempObj2=JSON.stringify(this.d[i])
                this.$set(this.d,i,JSON.parse(tempObj1))
                this.$set(this.d,i-1,JSON.parse(tempObj2))
            }else if(active=='down'){
                let tempObj1=JSON.stringify(this.d[i+1])
                let tempObj2=JSON.stringify(this.d[i])
                this.$set(this.d,i,JSON.parse(tempObj1))
                this.$set(this.d,i+1,JSON.parse(tempObj2))
            }else if(active=='top'){
                let tempObj2=JSON.stringify(this.d[i])
                this.d.splice(i,1)
                this.d.splice(0,0,JSON.parse(tempObj2))
            }else if(active=='bottom'){
                let tempObj1=JSON.stringify(this.d[this.d.length-1])
                let tempObj2=JSON.stringify(this.d[i])
                this.d.push(JSON.parse(tempObj2))
                this.d.splice(i,1)
            }else if(active=='remove'){
                this.d.splice(i,1)
            }else if(active=='change'){
                let tempObj=this.d[i]
                tempObj.img=path
                this.$set(this.d,i,tempObj)
            }
        },
        updateHead(obj){
            this.h=obj
            this.$refs.featureHead.forEach(x=>{
                x.setHead(obj)
            })
        }
    }
}
</script>