<template>
    <div class="app-container">
        <el-form :model="forms">
            <el-form-item label="打印机品牌">
                <el-select v-model="forms.contentType" placeholder="请选择打印机品牌">
                    <el-option label="云想印" value="yxyPrinter"></el-option>
                    <el-option label="飞鹅" value="fePrinter"></el-option>
                    <!-- <el-option label="本地" value="local"></el-option> -->
                    <!-- <el-option label="USB" value="printer"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="小票打印">
                <el-select v-model="forms.subType" placeholder="请选择小票打印">
                    <el-option label="标签" value="label"></el-option>
                    <el-option label="出品" value="kitchen"></el-option>
                    <el-option label="小票" value="cash"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="打印机名称">
                <el-input v-model="forms.name" style="width: 280px;" placeholder="请输入打印机名称"></el-input>
            </el-form-item>
            <!-- <template v-if="forms.contentType == 'network'"> -->
            <el-form-item label="打印机编号">
                <el-input v-model="forms.address" style="width: 280px;" placeholder="请输入打印机编号"></el-input>
            </el-form-item>
            <el-form-item label="打印机秘钥">
                <el-input v-model="forms.port" style="width: 280px;" placeholder="请输入打印机秘钥"></el-input><br />
                <div style="margin-left: 80px;color: #FF4D4F;">* 可在打印机设备底部查看打印机编号和秘钥(key)</div>
            </el-form-item>
            <!-- </template> -->
            <!-- <template v-if="forms.contentType == 'local'">  <el-form-item label="IP地址">
                    <el-input v-model="forms.address" style="width: 280px;" placeholder="请输入打印机编号"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model="forms.port" style="width: 280px;" placeholder="请输入打印机秘钥"></el-input><br />
                    <div style="margin-left: 80px;color: #FF4D4F;">* 可在打印机设备底部查看打印机编号和秘钥(key)</div>
                </el-form-item>
            </template> -->
            
            <el-form-item label="小票尺寸">
                <el-radio-group v-model="forms.receiptSize">
                    <el-radio label="58mm"></el-radio>
                    <el-radio label="80mm"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类打印">
                <el-radio-group v-model="forms.classifyPrint">
                    <el-radio label="0">打印所有</el-radio>
                    <el-radio label="1">部分分类(仅打印制作单[厨房])</el-radio>
                    <!-- <el-radio label="2">部分商品</el-radio> -->
                </el-radio-group>
                <!-- <div  v-if="forms.classifyPrint == 1"  style="color: rgb(255, 77, 79);margin-left: 80px;"></div> -->
                <div v-if="forms.classifyPrint == 1" style="margin-left:70px">
                    <!-- <el-tree :data="partList" show-checkbox node-key="id" ref="tree" :default-checked-keys="this.forms.categoryIds"
                        :props="{ children: 'childrenList', label: 'name' }">
                    </el-tree> -->
                    <el-checkbox-group v-model="forms.selectcheckbox">
                        <el-checkbox v-for="item in partList" :key="item.id" :label="item.name"></el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-form-item>

            <!-- <el-form-item label="桌台打印">
                <el-radio-group v-model="forms.tablePrint">
                    <el-radio label="0">打印所有</el-radio>
                    <el-radio label="1">打印部分桌台</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="打印数量">
                <el-radio-group v-model="forms.printQty">
                    <el-radio label="c1m1^2">顾客联+商家联「2张」</el-radio>
                    <el-radio label="m1^1">只打印商家联「1张」</el-radio>
                    <el-radio label="c1^1">只打印顾客联「1张」</el-radio>
                    <el-radio label="c2m1^3">2张顾客联+1张商家联「3张」</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="打印方式">
                <el-radio-group v-model="forms.printMethod">
                    <el-radio label="all">打印全部</el-radio>
                    <el-radio label="normal">仅打印结账单[前台]</el-radio>
                    <el-radio label="one">仅打印制作单[厨房]</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="打印类型">
                <el-checkbox-group v-model="forms.printType">
                    <el-checkbox label="refund">确认退款单</el-checkbox>
                    <el-checkbox label="handover">交班单</el-checkbox>
                    <el-checkbox label="queue">排队取号</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <!-- <el-form-item label="打印单据">
                <el-radio-group v-model="forms.printReceipt">
                    <el-radio label="0">全部打印</el-radio>
                    <el-radio label="1">仅厨房</el-radio>
                    <el-radio label="2">仅前台</el-radio>
                </el-radio-group>
                <div style="margin-left: 80px;color: #FF4D4F;">如果你的店只使用一台小票机，建议选择“全部打印”</div>
            </el-form-item> -->
            <el-form-item label="打印机状态">
                <el-switch v-model="forms.status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label-width="80px">
                <el-button type="primary" @click="$router.go(-1)">返回</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { configprinter, printerd, tbShopCategory } from '@/api/devices'
export default {
    components: {
    },
    data() {
        return {
            forms: {
                sort: "0",
                status: 1,
                connectionType: "network",
                selectcheckbox: [],

                receiptSize: '58mm',
                classifyPrint: '0',
                printQty: 'm1^1',
                printType: ["refund", 'handover', 'queue'],
                printMethod: "all",
            },
            partList: []
        }
    },
    filters: {
    },
    mounted() {

        this.getpartList()

    },
    methods: {
        async onSubmit() {

            // 删除时间字段
            if (this.$route.query.id) {
                delete this.forms.createdAt
                delete this.forms.updatedAt
            }
            // 处理打印部分分类
            if (this.forms.classifyPrint == 1) {
                let idstr = ''
                let arr = []
                this.forms.selectcheckbox.forEach(element => {
                    let prts = this.partList.filter(ele => ele.name == element)[0]
                    idstr = idstr + prts.id + ','
                    arr.push(prts)
                })
                this.forms.categoryIds = idstr.substring(0, idstr.length - 1)
                this.forms.categoryList = JSON.stringify(arr)

            }
            const res = await configprinter({
                shopId: localStorage.getItem('shopId'),
                ...this.forms,
            },
                this.$route.query.id ? 'put' : 'post'
            )
            this.$router.go(-1)
        },
        async getpartList() {
            const res = await tbShopCategory({
                shopId: localStorage.getItem('shopId'),
                sort: "sort,desc",
                page: 0,
                size: 500
            })
            let arr = []
            res.content.forEach(ele => {
                arr.push({
                    id: ele.id,
                    name: ele.name
                })
                if (ele.childrenList.length > 0) {
                    ele.childrenList.forEach(element => {
                        arr.push({
                            id: element.id,
                            name: element.name
                        })
                    })
                }
            })
            this.partList = arr
            if (this.$route.query.id) {
                this.getList(this.$route.query.id)
            }
        },
        async getList(id) {
            const res = await printerd(id)
            this.forms = res
            if (res.categoryIds) {
                let ids = res.categoryIds.split(',')
                let arr = []
                ids.forEach(element => {
                    let prts = this.partList.filter(ele => ele.id == element)[0]
                    arr.push(prts.name)
                })
                this.$set(this.forms, 'selectcheckbox', arr)
            } else {
                this.$set(this.forms, 'selectcheckbox', [])
            }
            if (res.printType) {
                this.forms.printType = JSON.parse(res.printType)
            } else {
                this.forms.printType = []
            }
        }
    }
}
</script>