<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;
            }
        }
    }
</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">
                            <el-upload
                                action="/api/admin/uploadfile"
                                list-type="picture-card">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span>
                    </el-form-item>
                </el-col>     
                <el-col :span="24">
                    <h2 class="title">填写房型信息</h2>                   
                </el-col>
                <el-row v-for='(item,index) in form.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="form.amount" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="面积">
                                <el-input   v-model="form.area" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="楼层">
                                <el-input   v-model="form.amount" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="床型">
                                <el-input   v-model="form.floor" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="餐食">
                                <el-input   v-model="form.meal" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="窗户">
                                <el-input   v-model="form.window" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="房型">
                                <el-select v-model="form.mattess" clearable>
                                    <el-option
                                        v-for="(item, index) in hotel_type"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="房价">
                                <el-input   v-model="form.price" clearable></el-input>
                            </el-form-item>
                            <br>
                            <el-form-item label="酒店图片" class="hotel_imgs">
                                <el-upload action="/api/admin/uploadfile"
                                        list-type="picture-card" >
                                        <i class="el-icon-plus"></i>
                                </el-upload>
                                <!-- <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 size="mini" plain type="primary" icon='el-icon-top'></el-button><br><br>
                        <el-button 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 :span='24'>
                    <el-button @click="add_type" type="info" plain>添加房型</el-button>
                </el-col>
            </el-row>
        </el-form>
    </section>
</template>
<script>
export default {
    name:'hotel',
    data(){
        return{
            organizerList:[],
            cityList:[],
            form:{
                type:[
                    {}
                ]
            },
            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.form.type.push({})
        },
        //删除
        del(index){
            this.form.type.splice(index,1)
        }
    },
    created(){
        this.getData();
    }
}
</script>