<template>
    <el-dialog :title="form.id ? '编辑存酒' : '添加存酒'" width="500px" :visible.sync="dialogVisible" @close="reset">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
            <template v-if="!form.id">
                <el-form-item label="选择用户" prop="userid">
                    <el-select v-model="form.userid" placeholder="请输入用户昵称" filterable remote
                        :remote-method="queryAllShopUser" :loading="loading" @change="userChange">
                        <el-option v-for="item in options" :key="item.id" :label="`${item.nickName}-${item.telephone}`"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择酒品">
                    <el-select v-model="form.name" @change="wineChange" v-if="!wine">
                        <el-option :label="item.name" :value="item.name" v-for="(item, index) in wineList"
                            :key="index"></el-option>
                    </el-select>
                    <div class="goods_info" v-else>
                        <el-image :src="form.imgUrl" style="width: 50px;height: 50px;"></el-image>
                        <div class="info">{{ form.name }}</div>
                    </div>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input-number v-model="form.num" :step="1" step-strictly :min="1"></el-input-number>
                </el-form-item>
            </template>
            <el-form-item label="数量" v-else>
                <el-input-number v-model="num" :step="1" step-strictly :min="1" :max="form.num"></el-input-number>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { queryAllShopUser } from '@/api/shop'
import { tbShopStorageGoodlist, storageWin, storagePut } from '@/api/application'
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            options: [],
            num: '',
            wine: false,
            form: {
                id: '',
                imgUrl: '',
                name: '',
                nickname: '',
                num: 1,
                status: '',
                telphone: '',
                unit: '',
                userid: '',
                expDay: ''
            },
            resetForm: '',
            rules: {
                userid: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            },
            wineList: []
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
        this.queryAllShopUser()
        this.tbShopStorageGoodlist()
    },
    methods: {
        // 选择用户
        userChange(e) {
            let user = this.options.find(item => item.id == e)
            this.form.nickname = user.nickName
            this.form.telphone = user.telephone
        },
        // 选择酒品
        wineChange(e) {
            let wine = this.wineList.find(item => item.name == e)
            this.form.imgUrl = wine.imgUrl
            this.form.expDay = wine.period
            this.form.unit = wine.unit
        },
        // 获取酒品列表
        async tbShopStorageGoodlist() {
            try {
                const res = await tbShopStorageGoodlist({
                    page: 0,
                    size: 100
                })
                this.wineList = res.content
            } catch (error) {
                console.log(error)
            }
        },
        // 获取用户列表
        async queryAllShopUser(query = '') {
            this.loading = true
            try {
                const res = await queryAllShopUser({
                    name: query,
                })
                this.loading = false
                this.options = res.content
            } catch (error) {
                this.loading = false
                console.log(error)
            }
        },
        // 提交
        onSubmitHandle() {
            console.log(this.form)
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = ''
                        if (this.form.id) {
                            res = await storagePut({
                                id: this.form.id,
                                num: this.num,
                                type: 0
                            })
                            this.$notify({
                                title: '成功',
                                message: `取酒成功`,
                                type: 'success'
                            });
                        } else {
                            res = await storageWin(this.form)
                            this.$notify({
                                title: '成功',
                                message: `存酒成功`,
                                type: 'success'
                            });
                        }
                        this.$emit('success', res)
                        this.close()
                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        },
        async show(obj = {}, wine = false) {
            this.dialogVisible = true
            if (obj && obj.id) {
                this.form = { ...obj }
            }
            if (obj && obj.name) {
                this.form.name = obj.name
                this.form.imgUrl = obj.imgUrl
                this.form.expDay = obj.expDay
                this.form.unit = obj.unit
            }
            this.wine = wine
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form = { ...this.resetForm }
        }
    }
}
</script>

<style scoped lang="scss">
.goods_info {
    background-color: #f9f9f9;
    padding: 10px;
    display: flex;
    align-items: center;

    .info {
        flex: 1;
        padding-left: 10px;
    }
}
</style>