<template>
    <a-form ref="form" :model="model" :form="form" :rules="validatorRules"  labelAlign="left"  :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-row :gutter="[16,16]">
            <a-col :span="11">
                <a-form-item label="门店名称">
                    <a-input type="text" placeholder="请输入门店名称"
                             v-decorator="['name', { rules: [{ required: true, message: '请输入门店名称！' }] }]"></a-input>
                </a-form-item>
<!--                <a-form-item label="所在地区">-->
<!--                </a-form-item>-->
                <a-form-item label="详细地址">
                    <a-row>
                        <a-col :span="20">
                            <a-input type="text" placeholder="请输入详细地址"
                                     v-decorator="['address', { rules: [{ required: true, message: '请输入详细地址！' }] }]"></a-input>
                        </a-col>
                        <a-col :span="3" class="padding_left_10">
                            <a-button >地图选点</a-button>
                        </a-col>
                    </a-row>
                    <a-row>
                    <!-- 地图-->
                    </a-row>
                </a-form-item>
                <a-form-item label="门店管理员">
                    <a-input type="text" placeholder="请输入联系人"
                             v-decorator="['linkName', { rules: [{ required: true, message: '请输入联系人！' }] }]"></a-input>
                </a-form-item>

                <a-form-item label="联系电话">
                    <a-input type="text" placeholder="请输入联系电话"
                             v-decorator="['linkTel', { rules: [{ required: true, message: '请输入联系电话！' }] }]"></a-input>
                </a-form-item>

                <a-form-item label="前台电话">
                    <a-input type="text" placeholder="请输入联系电话"
                             v-decorator="['tel', { rules: [{ required: true, message: '请输入联系电话！' }] }]"></a-input>
                </a-form-item>

                <a-form-item label="酒店设施">
                    <a-row>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="1" :checked="facilityList.indexOf('1')>-1?true:false" >
                                温泉
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="2" :checked="facilityList.indexOf('2')>-1?true:false">
                                租车
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="3" :checked="facilityList.indexOf('3')>-1?true:false">
                                有餐饮
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="4" :checked="facilityList.indexOf('4')>-1?true:false">
                                游泳池
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="5" :checked="facilityList.indexOf('5')>-1?true:false">
                                叫早
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="6" :checked="facilityList.indexOf('6')>-1?true:false">
                                有早餐
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="7" :checked="facilityList.indexOf('7')>-1?true:false">
                                WIFI
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="8" :checked="facilityList.indexOf('8')>-1?true:false">
                                电热水壶
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="9" :checked="facilityList.indexOf('9')>-1?true:false">
                                电梯
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="10" :checked="facilityList.indexOf('10')>-1?true:false">
                                吹风机
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="11" :checked="facilityList.indexOf('11')>-1?true:false">
                                免费停车
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="12" :checked="facilityList.indexOf('12')>-1?true:false">
                                会议室
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="13" :checked="facilityList.indexOf('13')>-1?true:false">
                                残疾人设施
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="14" :checked="facilityList.indexOf('14')>-1?true:false">
                                邮政服务
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="15" :checked="facilityList.indexOf('15')>-1?true:false">
                                婚宴服务
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="16" :checked="facilityList.indexOf('16')>-1?true:false">
                                全天前台
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="17" :checked="facilityList.indexOf('17')>-1?true:false">
                                接待外宾
                            </a-checkbox>
                        </a-col>
                        <a-col span="3">
                            <a-checkbox @change="onChange" value="18" :checked="facilityList.indexOf('18')>-1?true:false">
                                棋牌室
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="19" :checked="facilityList.indexOf('19')>-1?true:false">
                                收费停车
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="20" :checked="facilityList.indexOf('20')>-1?true:false">
                                送餐服务
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="21" :checked="facilityList.indexOf('21')>-1?true:false">
                                洗衣服务
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="22" :checked="facilityList.indexOf('22')>-1?true:false">
                                商务中心
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="23" :checked="facilityList.indexOf('23')>-1?true:false">
                                叫车服务
                            </a-checkbox>
                        </a-col>
                        <a-col span="4">
                            <a-checkbox @change="onChange" value="24" :checked="facilityList.indexOf('24')>-1?true:false">
                                房间WIFI
                            </a-checkbox>
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-col>
            <a-col :span="2">
            </a-col>
            <a-col :span="11">
                <a-form-item label="开业时间">
                    <a-date-picker type="text" placeholder="请选择开业时间"
                                   v-decorator="['openTime', { rules: [{ required: true, message: '请选择开业时间！' }] }]"></a-date-picker>
                </a-form-item>

                <a-form-item label="装修时间">
                    <a-date-picker type="text" placeholder="请选择装修时间"
                                   v-decorator="['renovationTime', { rules: [{ required: true, message: '请选择装修时间！' }] }]"></a-date-picker>
                </a-form-item>
                <a-form-item label="酒店星级" :wrapper-col="{ span: 5 }">
                    <j-dict-select-tag v-decorator="['star', {rules: [{ required: true, message: '请选择酒店星级！' }]}]"
                                       placeholder="请选择酒店星级" dictCode="hotel_star"/>
                </a-form-item>
                <a-form-item label="集团品牌">
                    <a-input type="text" placeholder="请输入酒店品牌"
                             v-decorator="['sellerName']"></a-input>
                </a-form-item>
                <a-form-item label="酒店标签">
                    <template v-for="(tag, index) in tags">
                        <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                            <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                {{ `${tag.slice(0, 20)}...` }}
                            </a-tag>
                        </a-tooltip>
                        <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                            {{ tag }}
                        </a-tag>
                    </template>
                    <a-input
                            v-if="inputVisible"
                            ref="input"
                            type="text"
                            size="small"
                            :style="{ width: '78px' }"
                            :value="inputValue"
                            @change="handleInputChange"
                            @blur="handleInputConfirm"
                            @keyup.enter="handleInputConfirm"
                    />
                    <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                        <a-icon type="plus" />添加
                    </a-tag>
                </a-form-item>
                <a-form-item label="酒店介绍" >
<!--                    <j-editor v-model="model.introduction"/>-->
                    <a-textarea v-model="model.introduction" placeholder="请输入酒店介绍" :rows="5" />
                </a-form-item>
                <a-form-item label="预定规则">
<!--                    <j-editor style="height: 200px;" v-model="model.reserveRemind"/>-->
                    <a-textarea v-model="model.reserveRemind" placeholder="请输入预定规则" :rows="5" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-divider />
        <a-row>
            <a-col :span="24" :style="{ textAlign: 'right' }">
                <a-button type="primary" @click="submit">确定</a-button>
            </a-col>
        </a-row>

    </a-form>
</template>

<script>
    import {getHotelInfo, editMainInfo, hotelList} from "../../../api/hotel";
    export default {
        created() {
            // alert("这里获取当前缓存门店信息");
            var _info = JSON.parse(localStorage.getItem("storeInfo"));
            setTimeout(() => {
                getHotelInfo({
                    id: _info.id
                }).then(res => {
                    console.log(res)
                    if (res.code == 200 && res.result ) {
                        var info = res.result

                        this.form.setFieldsValue(
                            {
                                id: info.id,
                                name: info.name,
                                star: info.star,
                                address: info.address,
                                latlng: info.lat+','+info.lng,
                                linkName: info.linkName,
                                linkTel: info.linkTel,
                                tel: info.tel,
                                openTime: info.openTime,
                                renovationTime: info.renovationTime,
                                superiorSellerId: info.superiorSellerId,
                                rule: info.rule,
                                topic: info.topic,
                                unionpay: info.unionpay,
                                wxOpen: info.wxOpen,
                                ddOpen: info.ddOpen,
                                yeOpen: info.yeOpen,
                                policy:info.policy,
                                introduction:info.introduction,
                                reserveRemind:info.reserveRemind,
                                traffic:info.traffic,
                            }
                        )

                        this.model = {
                            policy:info.policy,
                            introduction:info.introduction,
                            reserveRemind:info.reserveRemind,
                            traffic:info.traffic
                        };

                        this.tags = info.tagList.split(',')
                        this.facilityList = info.facility.split(',')
                        console.log(this.facilityList)
                    }
                })
            }, 100)
        },
        data() {
            return {
                visible: false,
                formLayout: 'horizontal',
                validatorRules: {
                    name: [{
                        required: true, message: '请输入酒店名称!'
                    }],
                    linkName: [{
                        required: true, message: '请输入联系人!'
                    }],
                    linkTel: [{
                        required: true, message: '请输入联系电话!'
                    }, {validator: this.validatePhone}],//, {validator: this.validatePhone}
                    tel: [{
                        required: true, message: '请输入酒店电话!'
                    }],
                    address: [{
                        required: true, message: '请输入酒店地址!'
                    }],
                    star: [{
                        required: true, message: '请输入星级!'
                    }],
                    lng: [{
                        required: true, message: '请输入经度!'
                    }],
                    lat: [{
                        required: true, message: '请输入纬度!'
                    }],
                    roomCount: [{
                        required: true, message: '请输入客房总数!'
                    }],
                    // openTime: [{
                    //     required: true, message: '请输入开业时间!'
                    // }],
                    // renovationTime: [{
                    //     required: true, message: '请输入装修时间!'
                    // }],
                    checkStatus: [{
                        required: true, message: '请选择审核状态', trigger: 'change'
                    }]
                },
                form: this.$form.createForm(this),
                model: {
                    policy:'',
                    introduction:'',
                    reserveRemind:'',
                    traffic:'',
                },
                tags: [],
                inputVisible: false,
                inputValue: '',
                facilityList:[],
            }
        },
        computed: {
            formItemLayout() {
                const { formLayout } = this;
                return formLayout === 'horizontal'
                    ? {
                        labelCol: { span: 4 },
                        wrapperCol: { span: 14 },
                    }
                    : {};
            },
        },
        methods: {
            submit() {
                // console.log(this.form.values.certImg)
                console.log(this.facilityList)
                this.form.validateFields((err, values) => {
                    // console.log(values.lnglat)
                    if (!err) {
                        // values['lat'] = values.latlng.split(',')[0]
                        // values['lng'] = values.latlng.split(',')[1]
                        values['tagList'] = this.tags.join(",");
                        values['facility'] = this.facilityList.join(",");
                        if(this.model.policy) values['policy'] = this.model.policy
                        if(this.model.introduction) values['introduction'] = this.model.introduction
                        if(this.model.reserveRemind) values['reserveRemind'] = this.model.reserveRemind
                        if(this.model.traffic) values['traffic'] = this.model.traffic
                        editMainInfo(values).then(res=>{
                            // this.$message.success('编辑成功')
                            // localStorage.setItem("storeInfo", JSON.stringify(res.result))
                            if (res.code == 200){
                                this.$message.success('编辑成功')
                                localStorage.setItem("storeInfo", JSON.stringify(res.result))
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                });
            },
            addHotelLable(){
                console.log('添加酒店标签')
            },
            onChange(e) {
                console.log(e);
                console.log(`checked = ${e.target.checked}`);
                console.log(`checked = ${e.target.value}`);
                if (e.target.checked){
                    this.facilityList.push(e.target.value)
                }
            },
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                console.log(tags);
                this.tags = tags;
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(function() {
                    this.$refs.input.focus();
                });
            },

            handleInputChange(e) {
                this.inputValue = e.target.value;
            },

            handleInputConfirm() {
                const inputValue = this.inputValue;
                let tags = this.tags;
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue];
                }
                console.log(tags);
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                });
            }
        },
    }
</script>

<style scoped>
    .padding_left_10{
        padding-left: 10px;
    }

</style>
