<template>
    <el-dialog title="添加分类" :visible.sync="dialogVisible" @close="reset">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
            <!-- <el-form-item label="层级">
                <el-select v-model="form.index">
                    <el-option label="顶级" :value="1"></el-option>
                    <el-option label="饮品" :value="2"></el-option>
                    <el-option label="烤串" :value="3"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类图片">
                <uploadImg ref="uploadImg" @success="res => form.pic = res[0]" @remove="form.pic = ''" />
            </el-form-item>
            <el-form-item label="颜色标识">
                <el-color-picker v-model="form.style"></el-color-picker>
                <div style="color: #999;">
                    标识色用在无图模式时的商品点单按钮显示，可以更有效的从视觉.上进行商品分组。
                </div>
            </el-form-item>
            <el-form-item label="开关">
                <el-switch v-model="form.isShow" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="form.sort" controls-position="right" :min="0"></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 uploadImg from '@/components/uploadImg'
import { tbShopCategoryPost } from '@/api/shop'
export default {
    components: {
        uploadImg
    },
    data() {
        return {
            dialogVisible: false,
            form: {
                id: '',
                pid: '',
                isShow: 1,
                name: '',
                sort: '',
                style: '#000000',
                pic: ''
            },
            resetForm: '',
            rules: {
                name: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
    },
    methods: {
        onSubmitHandle() {
            console.log(this.form)
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.form.shopId = localStorage.getItem('shopId')
                        let res = await tbShopCategoryPost(this.form, this.form.id ? 'put' : 'post')
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        },
        show(obj) {
            // console.log(obj)
            this.dialogVisible = true
            if (obj.pid) {
                this.form.pid = obj.pid
            }
            if (obj && obj.id) {
                this.form = obj
                if (obj.pic) {
                    setTimeout(() => {
                        this.$refs.uploadImg.fileList = [
                            {
                                url: obj.pic
                            }
                        ]
                    }, 100)
                }
            }
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form = { ...this.resetForm }
            this.$refs.uploadImg.clearFiles()
        }
    }
}
</script>