<template>
    <div class="body-box" :class="{'read-only':r}">
        <div v-for="(x,i) in data" :key="i" class='ts'>
            <div class="hotel-first-box" v-if='i==0 && x.type==1'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="860" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                        <img :src='x.img' :id='"body_"+index+"_"+i' />
                    </VueDraggableResizable>
                    <div class="type">
                        <span>酒店</span>
                    </div>
                </div>
                <div class="remark">优选酒店</div>
                <div class="hotelInfo">
                    <div class="name-box">
                        <div class="name">
                            <div class="input" v-if="r">{{x.name}}</div>
                            <input v-if='!r' v-model="x.name" :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                        </div>
                        <div class="cityName">
                            <div class="input" v-if="r">{{x.cityName}}</div>
                            <input v-if='!r' v-model='x.cityName'  :style='{width:x.cityName.length*24+"px"}' type="text" maxlength="5" />
                        </div>
                    </div>
                    <div class="star-box"> </div>
                    <div class="txt-content" :style="{width:(473+((10-(x.name.length==0||x.name.length<x.cityName.length?x.cityName.length:x.name.length))*28))+'px'}">
                        <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="92" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
            </div>
             <!-- <div class="meal-first-box" v-if='i==0 && x.type==1'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <div class="img-parent">
                        <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="860" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                            <img :src='x.img' :id='"body_"+index+"_"+i' />
                        </VueDraggableResizable>
                    </div>
                    <div class="type">
                        <span>酒店</span>
                    </div>
                </div>
                <div class="remark">优选酒店</div>
                <div class="hotelInfo">
                    <div class="name-box">
                        <div class="name">
                            <div class="right-bg"></div>
                            <input v-if='!r' v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                        </div>
                        <div class="cityName">
                            <div class="left-bg"></div>
                            <input v-if='!r' v-model='x.cityName' type="text" maxlength="5" />
                        </div>
                    </div>
                    <div class="star-box"></div>
                    <div class="txt-content">
                        <textarea v-if='!r'  v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
            </div> -->
            <div class="hotel-second-box" v-if='i==1 && x.type==1'>
                <div class="hotelInfo">
                    <div class="txt-content">
                        <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' v-model="x.description" spellcheck="false" maxlength="55"></textarea>
                    </div>
                </div>
                <div class="name-box">
                    <div class="cityName">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.cityName}}</div>
                        <input v-if='!r' v-model='x.cityName'  :style='{width:x.cityName.length*24+"px"}' type="text" maxlength="6" />
                    </div>
                    <div class="name">
                        <div class="right-bg"></div>
                        <div class="input" v-if="r">{{x.name}}</div>
                        <input v-if='!r' v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                    </div>
                </div>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="580" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                        <img :src='x.img' :id='"body_"+index+"_"+i' />
                    </VueDraggableResizable>
                    <div class="ze"></div>
                    <div class="type">
                        <span>酒店</span>
                    </div>
                </div>
                <div class="remark">优选酒店</div>
            </div>
            <div class="hotel-three-box" v-if='i==2 && x.type==1'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="630" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                        <img :src='x.img' :id='"body_"+index+"_"+i' />
                    </VueDraggableResizable>
                    <div class="type">
                        <span>酒店</span>
                    </div>
                </div>
                <div class="name-box">
                    <div class="cityName">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.cityName}}</div>
                        <input v-if='!r' v-model='x.cityName' type="text" :style='{width:x.cityName.length*24+"px"}' maxlength="10" />
                    </div>
                    <div class="name">
                        <div class="right-bg"> </div>
                        <div class="input" v-if="r">{{x.name}}</div>
                        <input v-if='!r' v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                    </div>
                </div>
                <div class="hotelInfo">
                    <div class="txt-content">
                        <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="89" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
                <div class="remark">优选酒店</div>
            </div>
        
            <div class="spot-first-box" v-if='i==0 && x.type==2'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="630" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                        <img :src='x.img' :id='"body_"+index+"_"+i' />
                    </VueDraggableResizable>
                    <div class="type">
                        <span>景点</span>
                    </div>
                </div>
                <div class="remark">特色推荐</div>
                <div class="hotelInfo">
                    <div class="star-box"></div>
                    <div class="txt-content">
                        <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="121" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
                <div class="name-box">
                    <div class="name">
                        <div class="right-bg"></div>
                        <div class="input" v-if="r">{{x.name}}</div>
                        <input v-if='!r' v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="9" />
                    </div>
                    <div class="cityName">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.cityName}}</div>
                        <input v-if='!r' :style='{width:x.cityName.length*24+"px"}' v-model='x.cityName' type="text" maxlength="5" />
                    </div>
                </div>
            </div>
            <div class="spot-two-box" v-if='i==1 && x.type==2'>
                 <div class="hotelInfo">
                    <div class="star-box"></div>
                     <div class="txt-content">
                         <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="100" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="630" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                        <img :src='x.img' :id='"body_"+index+"_"+i' />
                    </VueDraggableResizable>
                </div>
                <div class="remark">特色推荐</div>
                <div class="name-box">
                    <div class="name">
                        <div class="right-bg"></div>
                        <div class="input" v-if="r">{{x.name}}</div>
                        <input v-if='!r'  v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                    </div>
                    <div class="cityName">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.cityName}}</div>
                        <input v-if='!r' :style='{width:x.cityName.length*24+"px"}' v-model='x.cityName' type="text" maxlength="5" />
                    </div>
                </div>
                
            </div>
            <div class="spot-three-box" v-if='i==2 && x.type==2'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="630" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                        <img :src='x.img' :id='"body_"+index+"_"+i' />
                    </VueDraggableResizable>
                    <div class="type">
                        <span>景点</span>
                    </div>
                </div>
                <div class="remark">特色推荐</div>
                <div class="hotelInfo">
                    <div class="star-box"></div>
                     <div class="txt-content">
                         <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="121" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
                <div class="name-box">
                    <div class="name">
                        <div class="right-bg"></div>
                        <div class="input" v-if="r">{{x.name}}</div>
                        <input v-if='!r'  v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                    </div>
                    <div class="cityName">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.cityName}}</div>
                        <input v-if='!r'  :style='{width:x.cityName.length*24+"px"}' v-model='x.cityName' type="text" maxlength="5" />
                    </div>
                </div>
            </div>
        
            <div class="meal-first-box" v-if='i%2==0 && x.type==3'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <div class="img-parent">
                        <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="860" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                            <img :src='x.img' :id='"body_"+index+"_"+i' />
                        </VueDraggableResizable>
                    </div>
                    <div class="type">
                        <span>美食</span>
                    </div>
                </div>
                <div class="remark">特色餐食</div>
                <div class="hotelInfo">
                    <div class="name-box">
                        <div class="name">
                            <div class="right-bg"></div>
                            <div class="input" v-if="r">{{x.name}}</div>
                            <input v-if='!r' v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                        </div>
                        <div class="cityName">
                            <div class="left-bg"></div>
                            <div class="input" v-if="r">{{x.cityName}}</div>
                            <input v-if='!r' :style='{width:x.cityName.length*24+"px"}' v-model='x.cityName' type="text" maxlength="5" />
                        </div>
                    </div>
                    <div class="star-box"></div>
                    <div class="txt-content">
                        <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="115" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
            </div>
            <div class="meal-second-box" v-if='i%2==1 && x.type==3'>
                <div class="img-box" :id='"box_"+index+"_"+i'>
                    <div class="img-parent">
                        <VueDraggableResizable :ref='"vds_"+index+"_"+i' tabindex="0" :resizable='false' :active="false" :parent="false" axis='y' @activated="onActivated(i)" :w="630" :h="1960" :x="x.x" :y="x.y"  :z="2" @dragstop="onDragstop">
                            <img :src='x.img' :id='"body_"+index+"_"+i' />
                        </VueDraggableResizable>
                    </div>
                    <div class="type">
                        <span>美食</span>
                    </div>
                </div>
                <div class="remark">特色餐食</div>
                <div class="name-box">
                    <div class="name">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.name}}</div>
                        <input v-if='!r' v-model='x.name' :style='{width:x.name.length*28+"px"}' type="text" maxlength="10" />
                    </div>
                    <div class="cityName">
                        <div class="left-bg"></div>
                        <div class="input" v-if="r">{{x.cityName}}</div>
                        <input v-if='!r' :style='{width:x.cityName.length*24+"px"}' v-model='x.cityName' type="text" maxlength="5" />
                    </div>
                </div>
                <div class="hotelInfo">
                   
                    <div class="star-box"></div>
                    <div class="txt-content">
                        <div class="textarea" v-if="r">{{x.description}}</div>
                        <textarea v-if='!r' maxlength="66" v-model="x.description" spellcheck="false"></textarea>
                    </div>
                </div>
            </div>
            <div class='tools' v-if='!r'>
                <i title="置顶" class="iconfont icon-zhiding" v-if='index!=0||(index==0 && i!=0)' @click="opera('top',i)"></i>
                <i title="上移" class="iconfont icon-arrow-up"  v-if='index!=0||(index==0 && i!=0)' @click="opera('up',i)"></i>
                <i title="切换图片" class="iconfont icon-huan" @click="opera('change',i)"></i>
                <i title="删除" class="iconfont icon-remove" @click="opera('remove',i)"></i>
                <i title="下移" class="iconfont icon-arrowdown" @click="opera('down',i)" v-if='index!=pages-1||(index==pages-1 && i!=data.length-1)'></i>
                <i title="置底" class="iconfont icon-zhidi" @click="opera('bottom',i)" v-if='index!=pages-1||(index==pages-1 && i!=data.length-1)'></i>
            </div>
            <input v-if='!r' type="file" style="display:none" @change="uploadpic" :id='`file_${index}_${i}`'>
            <!-- <div class="r">
                最佳尺寸：800x430
            </div> -->
        </div>
    </div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
    props:{
        data:{
            type:Array,
            default:[]
        },
        index:{
            type:Number,
            default:0
        },
        pages:{
            type:Number,
            default:0
        },
        cid:{
            type:Number,
            default:0
        },
        isReadonly:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            currentIndex:-1,
            r:false
        }
    },
    components: {
        VueDraggableResizable
    },
    mounted() {
        // console.log(this.data)      
        this.r=this.isReadonly  
    },
    methods: {
        onDragstop(x,y){
            let imgHeight=document.querySelector("#body_"+this.index+"_"+this.currentIndex).height
            let boxHeight=document.querySelector("#box_"+this.index+"_"+this.currentIndex).offsetHeight
            let cha=boxHeight-imgHeight
            if(y<0 && y<cha)
                y=cha
            else if(y>0)
                y=0
            this.data[this.currentIndex].y=y
            this.$set(this.data,this.currentIndex,this.data[this.currentIndex])
            this.$refs["vds_"+this.index+"_"+this.currentIndex][0]._data.top=y
        },
        onActivated(i){
            this.currentIndex=i
        },
        opera(active,i,path){
            if(active!='change'){
                this.$emit('opera-box',active,(this.index*3+i))
            }else{
                if(!path){
                    document.querySelector('#file_'+this.index+'_'+i).click()
                }else{
                    this.$emit('opera-box',active,(this.index*3+i),path)
                }
            }
        },
        base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;

            let uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        },
        uploadpic(e){
            //console.log(e)
            let that=this;
            if(e.target.files.length>0 && e.target.files[0].size>0){
                // 压缩图片需要的一些元素和对象
                var reader = new FileReader()
                reader.onload = function(event) {
                    
                    let blob = that.base64ToBlob(event.target.result)
                    let newArr = [];
                    newArr.push(blob);
                    var fileName = `${that.uuid(10,10)}.png`
                    var path = `/feature/${that.cid}/${fileName}`;
                    //msg.AdvertisingPicUrl=path
                    that.uploadBlob(path, newArr, x => {
                        let allPath='https://reborndev.oss-cn-hangzhou.aliyuncs.com'+x.name
                        let i=e.target.id.split('_')[2]
                        that.opera('change',parseInt(i),allPath)
                    })
                };    
                reader.readAsDataURL(e.target.files[0])            
            }
        },
        uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [], i;
            radix = radix || chars.length;
            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
            } else {
                var r;
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random()*16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
            return uuid.join('');
        },
        setReadOnly(readonly){
            this.r=readonly
            this.$forceUpdate()
        }
    }
}
</script>
