<style lang='scss'>
    .add_hotel{
        max-height: 70vh;
        overflow: auto;
        .title{
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 20px;
            // padding-left: 30px;
            color: #333;
        }
        .hotel_type{
            border: 1px solid #d9d9d9;
            padding: 20px 0;
            margin-bottom: 10px;
            .el-input{
                width: 130px;
            }
        }
        .img_list{
            li{
                display: inline-block;
                width: 148px;
                height: 148px;
                margin: 10px;
                position: relative;
                overflow: hidden;
                img{
                    width: 100%;
                }
                .el-icon-delete{
                    color: red;
                    font-size: 18px;
                }
                .move{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    text-align: center;
                    background: rgba(0, 0, 0, 0.527);
                    color: #fff;
                }
            }
        }
    }
</style>
<template>
    <section class="add_hotel">
        <el-form label-width="100px" size='small'>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="会议名称">
                        <el-input disabled v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>                
                <el-col :span="10">
                   <el-form-item label="选择历史酒店">
                        <el-select placeholder="请选择酒店" v-model="form.sponsor" clearable filterable>
                            <el-option
                                v-for="(item, index) in organizerList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>      
                             
                </el-col>
                <el-col :span="24"><h2 class="title">填写酒店信息</h2>      </el-col>
                <el-col :span="12">
                    <el-form-item label="酒店名称">
                        <el-input  v-model="form.name" clearable></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="10">
                    <el-form-item label="酒店电话">
                        <el-input  v-model="form.address" clearable></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="12">
                    <el-form-item label="酒店地址">
                        <el-input  v-model="form.address" clearable></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="24">
                    <el-form-item label="酒店图片" class="hotel_imgs">
                            <ul class="img_list">
                                <li v-for="(item,index) in form.img" :key='index'>
                                    <img :src="item" alt="">
                                    
                                    <p class="move"><i @click="left_right(index,-1)"><i class="el-icon-caret-left"></i> 左移</i>
                                    &nbsp;&nbsp;<i @click="remove(index)" class="el-icon-delete"></i>&nbsp;&nbsp;
                                    <i @click="left_right(index,1)">右移<i class="el-icon-caret-right"></i> </i></p>
                                </li>
                                <li>
                                    <el-upload  :on-success='imgchange'  
                                        action="/api/admin/uploadfile" :show-file-list='false'
                                        list-type="picture-card">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span>
                                </li>
                            </ul>
                            
                    </el-form-item>
                </el-col>     
                <el-col :span="24">
                    <h2 class="title">填写房型信息</h2>                   
                </el-col>
                <el-col :span="24">
                    <el-row v-for='(item,index) in type' :key='index'>
                        <el-col :span="20" class="hotel_type" >
                            <el-form :inline='true' label-width="70px" size="small">
                                <el-form-item label="房型名称">
                                    <el-input  v-model="item.name" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="可住人数">
                                    <el-input  v-model="item.number" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="房型数量">
                                    <el-input  v-model="item.amount" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="面积">
                                    <el-input   v-model="item.area" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="楼层">
                                    <el-input   v-model="item.amount" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="床型">
                                    <el-input   v-model="item.floor" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="餐食">
                                    <el-input   v-model="item.meal" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="窗户">
                                    <el-input   v-model="item.window" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="房型">
                                    <el-select v-model="item.mattess" clearable>
                                        <el-option
                                            v-for="(i, idx) in hotel_type"
                                            :key="idx"
                                            :label="i.name"
                                            :value="i.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="房价">
                                    <el-input   v-model="item.price" clearable></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="酒店图片" class="hotel_imgs">
                                    <ul class="img_list">
                                        <li v-for="(img,i) in item.img" :key='"img"+i'>
                                            <img :src="img" alt="">
                                            <p class="move"><i @click="left_right1(i,index,-1)"><i class="el-icon-caret-left"></i> 左移</i>
                                            &nbsp;&nbsp;<i @click="remove1(i,index)" class="el-icon-delete"></i>&nbsp;&nbsp;
                                            <i @click="left_right1(i,index,1)">右移<i class="el-icon-caret-right"></i> </i></p>
                                        </li>
                                        <li>
                                            <el-upload   
                                                    :on-success="(res,file)=>{imgchange1(index,res,file)}"
                                                    action="/api/admin/uploadfile" :show-file-list='false'
                                                    list-type="picture-card" >
                                                    <i class="el-icon-plus"></i>
                                            </el-upload>
                                        </li>
                                    </ul>
                                    
                                    <!-- <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span> -->
                                </el-form-item>
                            </el-form>               
                        </el-col>
                        <el-col :span="3" :offset='1'>
                            <el-button @click="up_down(index,1)" size="mini" plain type="primary" icon='el-icon-top'></el-button><br><br>
                            <el-button @click="up_down(index,-1)" size="mini" plain  type="primary" icon='el-icon-bottom'></el-button><br><br>
                            <el-button @click="del(index)" size="mini" plain  type="danger" icon='el-icon-delete'></el-button>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span='24'>
                    <el-button @click="add_type" type="info" plain>添加房型</el-button>
                </el-col>
                <el-col :span='24' style="text-align:right;padding:10px;">
                    <el-button size="small" @click="save" type="primary">保存</el-button>
                    <el-button size="small" @click="save" type="primary">继续添加酒店</el-button>
                </el-col>
            </el-row>
        </el-form>
    </section>
</template>
<script>
export default {
    name:'hotel',
    data(){
        return{
            organizerList:[],
            cityList:[],
            form:{
                
                img:[]
            },
            //房型
            type:[
                {img:[]}
            ],
            hotel_type:[
                { name:'单人间',value:1 },
                { name:'一人单住或标间合住',value:2 }
            ]
        }
    },
    methods:{
        getData() {
            var parm = this.form;
            this.$api.getAllOrganizer().then((res) => {
                this.organizerList = res.data.data;
            });
            this.$api.getCityList().then((res) => {
                this.cityList = res.data.data;
            });
        },
        //添加房型
        add_type(){
            this.type.push({img:[]})
        },
        //删除
        del(index){
            this.type.splice(index,1)
        },
        //获取酒店图片列表
        imgchange(file, fileList){
            var img=this.form.img;
            img.push(fileList.response.data)
            this.form.img=img;
        },
        //获取酒店房型图片列表
        imgchange1(i,file, fileList){
            var img=this.type[i].img;
            img.push(fileList.response.data)
            this.type[i].img=img;
        },
        remove(index){
            var img=this.form.img;
            img.splice(index,1);
            this.form.img=img;
        },
        remove1(i,index){
            var img=this.type[index].img;
            img.splice(i,1);
            this.type[index].img=img;
        },
        left_right(index,type){
            var img=this.form.img;
            let cur=img[index];
            if(type == -1){
                //左移
                if(index>0){
                    let left= img[index-1];
                    this.$set(img,index-1,cur);
                    this.$set(img,index,left);
                }
            }else{
                //右移
                if(index<img.length-1){
                    let right= img[index+1];
                    this.$set(img,index+1,cur);
                    this.$set(img,index,right);
                }
            }
            this.form.img=img;
        },
        left_right1(i,index,type){
            var h_type=this.type[index],img=h_type.img;
            let cur=img[i];
            if(type == -1){
                //左移
                if(i>0){
                    let left= img[i-1];
                    this.$set(img,i-1,cur);
                    this.$set(img,i,left);
                }
            }else{
                //右移
                if(i<img.length-1){
                    let right= img[i+1];
                    this.$set(img,i+1,cur);
                    this.$set(img,i,right);
                }
            }
            h_type.img=img;
            this.$set(this.type,index,h_type)
        },
        //房型移动
        up_down(index,type){
            var h_type=this.type,cur=h_type[index];
            if(type == 1){
                //上移
                if(index>0){
                    let left= h_type[index-1];
                    this.$set(h_type,index-1,cur);
                    this.$set(h_type,index,left);
                }
            }else{
                //下移
                if(index<h_type.length-1){
                    let right= h_type[index+1];
                    this.$set(h_type,index+1,cur);
                    this.$set(h_type,index,right);
                }
            }
            this.type=h_type
        }
    },
    created(){
        this.getData();
    }
}
</script>