<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-form-model-item label="房型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                    <a-input v-model="model.name" placeholder="请输入房型名称"></a-input>
                </a-form-model-item>
                <a-form-model-item label="门市价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="marketPrice">
                    <a-input-number style="width:50%;" v-model="model.marketPrice" :min="1"  placeholder="请填写门市价"/>
                </a-form-model-item>
                
                <a-form-model-item label="可住人数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="canLivePersonNum">
                    <a-input-number style="width:50%;" v-model="model.canLivePersonNum" :min="0"  placeholder="请填写可住人数"/>
                </a-form-model-item>

                <a-form-model-item label="早餐数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="breakfastNum">
                    <a-input-number style="width:50%;" v-model="model.breakfastNum" :min="0"  placeholder="请填写早餐数量"/>
                </a-form-model-item>

                <a-form-model-item label="中餐数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lunchNum">
                    <a-input-number style="width:50%;" v-model="model.lunchNum" :min="0"  placeholder="请填写中餐数量"/>
                </a-form-model-item>

                <a-form-model-item label="晚餐数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dinnerNum">
                    <a-input-number style="width:50%;" v-model="model.dinnerNum" :min="0"  placeholder="请填写晚餐数量"/>
                </a-form-model-item>
            </a-form-model>

        </j-form-container>
    </a-spin>
</template>
<script>
import { getRoomPlans, getSelectList } from "@/api/api";
import { httpAction, getAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";


export default {
    name: "BusMarketMemberForm",
    props: {
        disabled: {
            type: Boolean,
            default: false,
            required: false,
        },
    },
    data() {
        return {
            model: {
                id: "",
                hotelId: 0,
                name: null,
                marketPrice: null,
                canLivePersonNum: 0,
                breakfastNum: 0,
                lunchNum: 0,
                dinnerNum: 0
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            confirmLoading: false,
            validatorRules: {
                name: [{ required: true, message: "请输入房型!" }],
                marketPrice: [{ required: true, message: "请填写门市价!" }],
                canLivePersonNum: [{ required: true, message: "请填写可住人数!" }],
                breakfastNum: [{ required: true, message: "请填写早餐数量!" }],
                lunchNum: [{ required: true, message: "请填写中餐数量!" }],
                dinnerNum: [{ required: true, message: "请填写晚餐数量!" }],
            },
            url: {
                add: "/rooms/cesRoomLayout/save",
                edit: "/rooms/cesRoomLayout/modify",
                queryById: "/rooms/cesRoomLayout/queryById",
            },
            iconChooseVisible: false,
            roomPlans: [],
            members: [],
        };
    },
    computed: {
        formDisabled() {
            return this.disabled;
        },
    },
    created() {
        var _info = JSON.parse(localStorage.getItem("storeInfo"));
        if (_info) {
            this.model.hotelId = _info.id;
            this.initData();
        }
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        initData() {
            getRoomPlans(this.model.hotelId, null).then((res) => {
                if (res.success) {
                    this.roomPlans = res.result;
                }
            });

        },
        selectIcons() {
            this.iconChooseVisible = true;
        },
        handleIconCancel() {
            this.iconChooseVisible = false;
        },
        handleIconChoose(value) {
            console.log(value);
            this.model.icon = value;
            this.iconChooseVisible = false;
        },
        add() {
            this.edit(this.modelDefault);
        },
        edit(record) {
            this.model = Object.assign({}, record);
            this.visible = true;
            getSelectList({ id: this.model.id }).then((res) => {
                if (res.success) {
                    this.members = res.result;
                }
            });
        },
        submitForm() {
            const that = this;
            // 触发表单验证
            this.$refs.form.validate((valid) => {
                if (valid) {
                    that.confirmLoading = true;
                    let httpurl = "";
                    let method = "";
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = "post";
                    } else {
                        httpurl += this.url.edit;
                        method = "put";
                    }
                    if (this.model.payFlag == 0) {
                        this.model.payAmount = 0;
                    }
                    httpAction(httpurl, this.model, method)
                        .then((res) => {
                            if (res.success) {
                                that.$message.success(res.message);
                                that.$emit("ok");
                            } else {
                                that.$message.warning(res.message);
                            }
                        })
                        .finally(() => {
                            that.confirmLoading = false;
                        });
                }
            });
        },
    },
};
</script>
<style scoped>
.avatar-uploader>.ant-upload {
    width: 104px;
    height: 104px;
}
</style>