<template>
    <a-tabs default-active-key="1" @change="onTabChange">
        <a-tab-pane key="1" tab="房型详情">
            <detail ref="detail" @saveOk="onSaveOk"></detail>
        </a-tab-pane>
        <a-tab-pane key="2" tab="设备服务">
            <device ref="device" @saveOk="onSaveOk"></device>
        </a-tab-pane>
        <a-tab-pane key="3" tab="房型图片">
            <layout-image ref="img" @saveOk="onSaveOk"></layout-image>
        </a-tab-pane>
    </a-tabs>
</template>

<script>
import { getRoomPlans, getSelectList } from "@/api/api";
import { httpAction, getAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import detail from './roomLayoutDetailForm/roomLayoutDetail.vue'
import device from './roomLayoutDetailForm/roomLayoutDevice.vue'
import layoutImage from './roomLayoutDetailForm/roomLayoutImage.vue'

export default {
    name: "BusMarketMemberForm",
    props: {
        disabled: {
            type: Boolean,
            default: false,
            required: false,
        },
    },
    components: {
        detail,
        device,
        layoutImage
    },
    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: {
        onSaveOk() {
            this.$emit('saveOk')
        },
        onTabChange(e) {
            console.log(e);
            setTimeout(() => {
                if (e == 2) {
                    this.$refs.device.setData(this.model)
                } else if (e == 3) {
                    this.$refs.img.setData(this.model)
                } else {
                    this.$refs.detail.setData(this.model)
                }
            }, 500)
        },
        setRaw(item) {
            this.model = JSON.parse(JSON.stringify(item))
            this.$refs.detail.setData(this.model)
        },
        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>