<template>
<a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodType">
                        <a-cascader :defaultValue="arr" :options="treeData?treeData:[]" :field-names="{ label: 'name', value: 'id', children: 'children' }" placeholder="请选择" @change="onChange" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12" >
                    <a-form-model-item style="width:100%" label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodUnit">
                        <a-select :value="model.goodUnit?model.goodUnit:'-1'" placeholder='请选择商品单位' @change="handleChange">
                            <a-select-option value="-1">{{"请选择商品单位"}}</a-select-option>
                            <a-select-option v-for="item in unitData" :unitName='item.name' :key="item.id" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                        <a-input v-model="model.name" placeholder="商品名称" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isEnable">
                        <a-switch :checked="model.isEnable" @change="switchState"></a-switch>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="商品规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spec">
                        <a-input v-model="model.spec" placeholder="商品规格" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="条码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="barCode">
                        <a-input v-model="model.barCode" placeholder="请填写条码" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="售卖周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sellDay">
                        <a-input-number v-model="model.sellDay" :min="0" />天
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="采购最高限价" :labelCol="{span:7,offset:0}" :wrapperCol="wrapperCol" prop="maxPrice">
                        <a-input-number v-model="model.maxPrice" :min="0" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="成本标准价" :labelCol="{span:6,offset:0}" :wrapperCol="wrapperCol" prop="costPrice">
                        <a-input-number v-model="model.costPrice" :min="0" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="最高库存" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maxSotck">
                        <a-input-number v-model="model.maxSotck" :min="0" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="最低库存" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="minSotck">
                        <a-input-number v-model="model.minSotck" :min="0" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="16">
                    <a-form-model-item label="库存预警数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="stockWarning">
                        <a-input-number v-model="model.stockWarning" :min="0" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <!-- <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";
import {
    getUnit
} from '@/api/good'

export default {
    name: "BusMarketMemberForm",
    inject: ['treeData', 'dataSource'],
    props: {
        disabled: {
            type: Boolean,
            default: false,
            required: false,
        },
    },
    data() {
        return {
            unitData: [],
            options: [{
                label: '张三',
                value: '1'
            }],
            model: {
                // id: "",
                hotelId: 0,
                goodType: '',
                goodUnit: '',
                barCode: '',
                name: '',
                isEnable: false,
                maxPrice: null,
                maxSotck: null,
                minSotck: null,
                sellDay: null,
                spec: null,
                stockWarning: null,
            },
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                },
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                },
            },
            confirmLoading: false,
            validatorRules: {
                name: [{
                    required: true,
                    message: "请输入商品名称!"
                }],
                goodType: [{
                    required: true,
                    message: "请选择商品分类!"
                }],
                goodUnit: [{
                    required: true,
                    message: "请选择商品单位!"
                }],
                barCode: [{
                    required: true,
                    message: "请输入商品条码!"
                }],
                maxPrice: [{
                    required: true,
                    message: "请输入最高售价!"
                }],
                maxSotck: [{
                    required: true,
                    message: "请输入最高库存!"
                }],
                minSotck: [{
                    required: true,
                    message: "请输入最低库存!"
                }],
                sellDay: [{
                    required: true,
                    message: "请输入有效期!"
                }],
                spec: [{
                    required: true,
                    message: "请输入规格!"
                }],
                stockWarning: [{
                    required: true,
                    message: "请输入库存预警数!"
                }],
                costPrice: [{
                    required: true,
                    message: "请输入成本价!"
                }],
                isEnable: [{
                    required: true,
                    message: "请选择是否启用!"
                }],
            },
            url: {
                // add: "/rooms/cesRoomLayout/save",
                add: '/kc/kcGoods/add',
                // edit: "/rooms/cesRoomLayout/modify",
                edit: '/kc/kcGoods/edit',
                delete: '/rooms/cesGoods/delete'
                // queryById: "/rooms/cesRoomLayout/queryById",
            },
            iconChooseVisible: false,
            roomPlans: [],
            members: [],
            arr: []
        };
    },
    computed: {
        formDisabled() {
            return this.disabled;
        },
    },
    created() {
        var _info = JSON.parse(localStorage.getItem("storeInfo"));
        if (_info) {
            this.model.hotelId = _info.id;
            this.initData();
            this.getData()
        }
        console.log(111111111111, this.treeData);
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        onChange(e) {
            console.log(e);
            this.model.goodType = e[e.length - 1]
            console.log(this.model.goodType);
        },
        handleChange(e, options) {
            console.log(e);
            this.model.goodUnit = e
        },
        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);
        },
        //筛选分类数组
        filterType(array, id) {
            let arr = []
            array.forEach((item, index) => {
                if (item.id == id) {
                    this.arr[0] = item.parentId
                    this.arr[1] = item.id
                    return
                } else if (Array.isArray(item.children) && item.children) {
                    this.filterType(item.children, id)
                }
            })
        },
        edit(record) {
            console.log(22222222, record);
            // this.model = Object.assign({}, record);
            this.model = JSON.parse(JSON.stringify(record))

            console.log(this.filterType(this.treeData, record.goodType));
            console.log(this.arr);
            this.visible = true;
            getSelectList({
                id: this.model.id
            }).then((res) => {
                if (res.success) {
                    this.members = res.result;
                }
            });
        },
        submitForm() {
            const that = this;
            // 触发表单验证
            debugger
            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;
                    }
                    this.model.maxPrice = Number(this.model.maxPrice)
                    this.model.maxSotck = Number(this.model.maxSotck)
                    this.model.minSotck = Number(this.model.minSotck)
                    this.model.sellDay = Number(this.model.sellDay)
                    this.model.stockWarning = Number(this.model.stockWarning)
                    // if (this.model.isEnable==true) {
                    //     this.model.isEnable = '1'
                    // }else{
                    //     this.model.isEnable = '0'
                    // }
                    console.log('11111111111', this.model);
                    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;
                        });
                }
            });
        },
        getData() {
            getUnit({
                pageNo: 1,
                pageSize: 1000
            }).then(res => {
                console.log(res);
                if (res.code && res.code == 200) {
                    this.unitData = res.result.records
                }
            })
        },
        switchState(e) {
            console.log('这是滑动按钮触发', e);
            this.model.isEnable = e
        }
    },
};
</script>

<style scoped>
.avatar-uploader>.ant-upload {
    width: 104px;
    height: 104px;
}
</style>
