<template>
    <div>
        <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.contentType">
                        <el-option :label="item.name" :value="item.value" v-for="item in devices"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备尺寸">
                    <el-radio-group v-model="form.config.width">
                        <el-radio-button label="58">58mm</el-radio-button>
                        <el-radio-button label="80">80mm</el-radio-button>
                    </el-radio-group>
                </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="设备号" prop="address">
                    <el-input v-model="form.address" placeholder="请输入设备号"></el-input>
                </el-form-item>
                <el-form-item label="打印份数">
                    <el-select v-model="form.config.printerNum">
                        <el-option :label="item" :value="item" v-for="item in 4" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出品模式">
                    <el-select v-model="form.config.model">
                        <el-option :label="item.name" :value="item.value" v-for="item in models"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打印类型">
                    <el-select v-model="form.subType">
                        <el-option :label="item.name" :value="item.value" v-for="item in subTypes"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="尾部留空">
                    <el-radio-group v-model="form.config.feet">
                        <el-radio-button :label="`${item}`" v-for="item in feets" :key="item">{{ item
                            }}行</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="自动切刀">
                    <el-switch v-model="form.config.autoCut" :active-value="0" :inactive-value="1"></el-switch>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="form.status" :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-item label="商品分类">
                    <div style="cursor: pointer;" @click="$refs.classify.show()">
                        <span style="color: #409eff;" v-for="item in form.config.categoryList">{{ item.name }},</span>
                        <span style="color: #e65d6e;" v-if="!form.config.categoryList.length">请选择分类</span>
                    </div>
                </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>
        <classify ref="classify" @success="classifySuccess" />
    </div>
</template>

<script>
import { devices, models, subTypes } from '../devices'
import { tbPrintMachine } from '@/api/devices'
import classify from '@/components/classify'

export default {
    components: { classify },
    data() {
        return {
            dialogVisible: false,
            devices,
            models,
            subTypes,
            feets: [0, 1, 2, 3, 4, 5, 8],
            loading: false,
            form: {
                id: '',
                contentType: '',
                config: {
                    width: '80mm', // 设备尺寸
                    printerNum: 1, //打印份数
                    categoryList: '', // 商品分类
                    model: 'normal', // 出品模式,
                    feet: '0',
                    autoCut: 0
                },
                name: '',
                subType: 'kitchen', // 打印类型
                status: 0,
                sort: ''
            },
            resetForm: '',
            rules: {
                name: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                address: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
    },
    methods: {
        // 确认选择商品分类
        classifySuccess(e) {
            this.form.config.categoryList = e
        },
        onSubmitHandle() {
            console.log(this.form)
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        this.form.shopId = localStorage.getItem('shopId')
                        let res = await tbPrintMachine(this.form, this.form.id ? 'put' : 'post')
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                        this.loading = false
                    } catch (error) {
                        this.loading = false
                        console.log(error)
                    }
                }
            })
        },
        show(obj) {
            this.dialogVisible = true
            if (obj && obj.id) {
                this.form = { ...obj }
            }
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form = { ...this.resetForm }
        }
    }
}
</script>