<template>
    <div>
        <a-form-model ref="form" :model="model" :rules="validatorRules">
            <a-form-model-item label="启用类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkType">
                <a-checkbox-group :default-value="defvals" v-model="model.checkType" :options="checkOptions" @change="onChange" />
            </a-form-model-item>
            <a-form-model-item label="窗户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="windows">
                <a-radio-group v-model="model.windows" default-value="1">
                    <a-radio :value="1">
                      有
                    </a-radio>
                    <a-radio :value="0">
                      无
                    </a-radio>
                    
                  </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="房型面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="area">
                <a-input-number v-model="model.area" />
            </a-form-model-item>
            <a-form-model-item label="床型面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bedSize">
                <a-input-number v-model="model.bedSize" />
            </a-form-model-item>

            <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <j-editor v-model="model.remark"/>
            </a-form-model-item>
            <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm" type="primary">保存</a-button>
        </a-form-model>
    </div>
</template>

<script>
import { modify } from '@/api/roomLayout'
export default {
    name: 'HotelSaasTenantFrontendRoomLayoutDetail',
    props: {
       
    },
    data() {
        return {
            submitLoading: false,
            defvals:[],
            checkOptions: [
                {
                    label: '全天房',
                    value: '1'
                },
                {
                    label: '钟点房',
                    value: '2'
                }
            ],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            model: {
                id: null,
                checkType: null,
                windows: null,
                area: 0,
                bedSize: 0,
                remark: ''
            },
            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.checkType) {
                this.model.checkType = this.model.checkType.split(',')
                this.defvals = this.model.checkType
            } else {
                this.model.checkType = null
            }
            this.model.windows = this.model.windows? 1:0
        },
        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.windows = data.windows == 1
                    
                    // 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,
                        checkType: data.checkType,
                        windows: data.windows,
                        remark: data.remark,
                        area: data.area,
                        bedSize: data.bedSize
                    }).then(res => {
                        if(res.code == 200) {
                            this.$emit('saveOk')
                            this.$message.success("保存成功")
                        }
                    })
                }
            });

        },
        onChange(e) {
            console.log(this.model.checkType);
        }

    },
};
</script>

<style lang="stylus" scoped>

</style>