<template>
    <div>
        <a-form-model ref="form" :model="model" :rules="validatorRules">
            <a-form-model-item label="房型标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tags">
                <div style="display: flex;">
                    <div>
                        <a-tag closable color="cyan" closavle v-for="(item, index) in model.tags"
                            @close="onTagClose(index)">
                            {{ item }}
                        </a-tag>
                    </div>
                    <div style="display: flex;justify-content:center;align-items:center;" v-if="addIng">
                        <span slot="enterButton" style="flex: 1;">
                            <a-input v-model="addText" placeholder="请输入标签">
                            </a-input>
                        </span>
                        <a-button @click="onadd">
                            确定
                        </a-button>
                        <a-button @click="addIng = false">
                            取消
                        </a-button>
                    </div>
                    <a-button v-else type="primary" @click="addTag">添加</a-button>
                </div>
            </a-form-model-item>
            <a-form-model-item label="房间设施" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="facilities">
                <a-checkbox-group :default-value="defvals" v-model="model.facilities" :options="checkOptions" />
            </a-form-model-item>
            <a-form-model-item label="取消规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cancelRule">
                <a-radio-group v-model="model.cancelRule">
                    <a-radio :style="radioStyle" :value="1">
                        <span style="display: inline-block;">
                            <span style="width: 76px;display:inline-block;">入住当天</span>
                            <span style="display: inline-block;width: 20px;height:1px;"></span>
                            <a-time-picker :open.sync="open1" v-model="beforeTime1" format="HH:mm">
                                <a-button slot="addon" size="small" type="primary" @click="open1 = false">
                                    确定
                                </a-button>
                            </a-time-picker>
                            <span>前可取消</span>
                        </span>
                    </a-radio>
                    <a-radio :style="radioStyle" :value="2">
                        <span style="display: inline-block;">
                            <span style="width: 76px;display:inline-block;">入住前</span>
                            <span style="display: inline-block;width: 20px;height:1px;"></span>
                            <a-input-number  v-model="cancelDay1" :min="0" />
                            <span>天</span>
                            <a-time-picker :open.sync="open2" v-model="beforeTime2" format="HH:mm">
                                <a-button slot="addon" size="small" type="primary" @click="open2 = false">
                                    确定
                                </a-button>
                            </a-time-picker>
                            <span>前可取消</span>
                        </span>
                    </a-radio>
                    <a-radio :style="radioStyle" :value="3">
                        <span style="display: inline-block;">
                            <span style="width: 76px;display:inline-block;">入住前</span>
                            <span style="display: inline-block;width: 20px;height:1px;"></span>
                            <a-input-number  v-model="cancelDay2" :min="0" />
                            <span>天</span>
                            <a-time-picker :open.sync="open3" v-model="beforeTime3" format="HH:mm">
                                <a-button slot="addon" size="small" type="primary" @click="open3 = false">
                                    确定
                                </a-button>
                            </a-time-picker>
                            <span>前可取消,</span>
                            <span>收取</span>
                            <a-input-number v-model="model.cancelMoney" :min="0" />
                            %罚金
                        </span>
                    </a-radio>
                    <a-radio :style="radioStyle" :value="4">
                        不可取消
                    </a-radio>
                    <a-radio :style="radioStyle" :value="5">
                        可取消
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm"
                type="primary">保存</a-button>
        </a-form-model>
    </div>
</template>

<script>
var splitChar = '⛔'
import { modify } from '@/api/roomLayout'
import moment from 'moment';
export default {
    name: 'HotelSaasTenantFrontendRoomLayoutDetail',

    data() {
        return {
            cancelDay1: null,
            cancelDay2: null,
            beforeTime1: null,
            beforeTime2: null,
            beforeTime3: null,
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
            open1: false,
            open2: false,
            open3: false,
            submitLoading: false,
            defvals: [],
            checkOptions: [
                {
                    label: '有窗户',
                    value: '有窗户'
                },
                {
                    label: '无烟房',
                    value: '无烟房'
                },
                {
                    label: '空调',
                    value: '空调'
                },
                {
                    label: '洗衣机',
                    value: '洗衣机'
                },
                {
                    label: '大床',
                    value: '大床'
                }
            ],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            addIng: false,
            addText: '',
            model: {
                id: null,
                tags: [],
                facilities: null, // 房间设施
                cancelRule: null, // 取消规则
                windows: null,
                cancelBeforeTime: null,
                cancelMoney: 0,
            },
            validatorRules: {
                windows: [{ required: true, message: "请选择是否有窗" }],
                area: [{ required: true, message: "请填写通用面积" }],
                bedSize: [{ required: true, message: "请填写床型面积" }],
            }
        };
    },

    mounted() {

    },

    methods: {
        setData(data) {
            this.model = JSON.parse(JSON.stringify(data))
            // 房间标签
            if (this.model.tags) {
                this.model.tags = this.model.tags.split(splitChar)

            } else {
                this.model.tags = []
            }
            // 房间设施
            if (this.model.facilities) {
                this.model.facilities = this.model.facilities.split(',')
                this.defvals = this.model.facilities
            } else {
                this.model.facilities = null
            }

            // 取消规则渲染
            if (this.model.cancelRule) {
                if (this.model.cancelRule == 1) {  //入住当天 补充当天时间赋值
                    if (this.model.cancelBeforeTime) {
                        this.beforeTime1 = moment(this.model.cancelBeforeTime, "HH:mm").utcOffset(8)
                    }
                } else if (this.model.cancelRule == 2) { // 入住前N天可取消
                    if (this.model.cancelDayNum || this.model.cancelDayNum == 0) {
                        this.cancelDay1 = this.model.cancelDayNum
                    }
                    if (this.model.cancelBeforeTime) {
                        this.beforeTime2 = moment(this.model.cancelBeforeTime, "HH:mm").utcOffset(8)
                    }
                } else if (this.model.cancelRule == 3) { // 入住前N天包含罚金比率
                    if (this.model.cancelDayNum || this.model.cancelDayNum == 0) {
                        this.cancelDay2 = this.model.cancelDayNum
                    }
                    if (this.model.cancelBeforeTime) {
                        this.beforeTime3 = moment(this.model.cancelBeforeTime, "HH:mm").utcOffset(8)
                    }
                    this.model.cancelMoney = this.model.cancelMoney ? this.model.cancelMoney : 0
                }
            }



        },
        onTagClose(item) {
            delete this.model.tags[item]
        },
        addTag() {
            this.addIng = true
            this.addText = ''
        },
        onadd() {
            if (!this.addText) {
                this.$message.warning('请输入标签名')
                return
            }
            if (!this.model.tags.includes(this.addText)) {
                this.model.tags.push(this.addText)
                this.addIng = false
            } else {
                this.$message.warning(`已存在该标签`)
            }

        },
        submitForm() {
            const that = this;
            // 触发表单验证
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let data = JSON.parse(JSON.stringify(this.model))
                    data.checkType = (data.checkType || []).toString()
                    data.facilities = (data.facilities || []).toString()
                    data.tags = data.tags.join(splitChar)


                    if (this.model.cancelRule) {
                        if (this.model.cancelRule == 1) {  //入住当天 补充当天时间赋值
                            if (this.beforeTime1) {
                                data.cancelBeforeTime = this.beforeTime1.format("HH:mm")
                            } else {
                                this.$message.error('请选择最后取消时间')
                                return
                            }
                        } else if (this.model.cancelRule == 2) { // 入住前N天可取消
                            if (this.cancelDay1 || this.cancelDay1 == 0) {
                                data.cancelDayNum = this.cancelDay1
                            } else {
                                this.$message.error('请输入取消前天数')
                                return
                            }
                            if (this.beforeTime2) {
                                data.cancelBeforeTime = this.beforeTime2.format("HH:mm")
                            } else {
                                this.$message.error('请选择最后取消时间')
                                return
                            }
                        } else if (this.model.cancelRule == 3) { // 入住前N天包含罚金比率
                            if (this.cancelDay2 || this.cancelDay2 == 0) {
                                data.cancelDayNum = this.cancelDay2
                            } else {
                                this.$message.error('请输入取消前天数')
                                return
                            }
                            if (this.beforeTime3) {
                                data.cancelBeforeTime = this.beforeTime3.format("HH:mm")
                            } else {
                                this.$message.error('请选择最后取消时间')
                                return
                            }
                            if(!this.model.cancelMoney || this.model.cancelMoney < 0) {
                                this.$message.error('罚金比率必须大于1')
                                return
                            }
                        }
                    }
                    that.confirmLoading = true;
                    modify({
                        id: data.id,
                        hotelId: data.hotelId,
                        name: data.name,
                        marketPrice: data.marketPrice,
                        canLivePersonNum: data.canLivePersonNum,
                        breakfastNum: data.breakfastNum,
                        lunchNum: data.lunchNum,
                        dinnerNum: data.dinnerNum,
                        tags: data.tags,
                        facilities: data.facilities,
                        cancelRule: data.cancelRule,
                        cancelDayNum: data.cancelDayNum,
                        cancelBeforeTime: data.cancelBeforeTime,
                        cancelMoney: data.cancelMoney
                    }).then(res => {
                        if (res.code == 200) {
                            this.$emit('saveOk')
                            this.$message.success("保存成功")
                        }
                    }).finally(_=>{
                        that.confirmLoading = false;
                    })
                }
            });

        },
        onChange(item) {

        }

    },
};
</script>

<style lang="stylus" scoped>

</style>