<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2024-01-12 17:12:35
 * @LastEditors: gcz
 * @LastEditTime: 2024-01-12 19:41:52
 * @FilePath: \great_webui\src\views\officesale\preorder.vue
 * @Copyright: Copyright (c) 2016~2024 by gcz, All Rights Reserved. 
-->
<template>
    <!--  预约赠票  -->
    <div class="app-container">
        <div class="item u-flex">
            <div class="title ticketType">票务类型</div>
            <el-radio-group v-model="form.ticketType">
                <el-radio :label="1">普通席</el-radio>
                <el-radio :label="2">贵宾席</el-radio>
                <el-radio :label="3">VIP席位</el-radio>
            </el-radio-group>
        </div>
        <div class="item u-flex">
            <div class="tile">打印数量</div>
            <el-input v-model="form.ticketNum" size="small" type="number" placeholder="打印数量"></el-input>
            <div>张</div>
        </div>
        <div class="item">
            <el-button type="primary" @click="handleOpen">开始打印</el-button>
        </div>

        <el-dialog
            title="选择打印机"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="打印机" prop="region">
                <el-select v-model="ruleForm.region" placeholder="选择打印机">
                <el-option :label="item.deviceName" :key="item.id" :value="item.id" v-for="(item,index) in printList"></el-option>
                </el-select>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="dialogVisibleLoading" @click="ticketout()">{{ dialogVisibleLoading?'打印中...':'打印' }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { pageList as getPrintListApi } from "@/api/device/pda";
import { ticketout } from "@/api/officesale/officesale";
const https = require('https');
const axios = require('axios');
    export default {
        name: "preorder",
        data() {
            return {
                // 遮罩层
                loading: true,
                dialogVisible:false,
                form:{
                    ticketType:1,
                    deviceId:'',
                    ticketNum:null,
                },
                printList:[],
                rules: {
                    region: [
                        { required: true, message: '请选择打印机', trigger: ['change','blur' ]}
                    ],
                },
                ruleForm: {},
                dialogVisibleLoading: false,
                ticketoutData:{},
            }     
        },
        created() {

        },
        methods: {
            /** 查询打印机列表 */
            getPrintListApi() {
                getPrintListApi({deviceType:5,pageNum: 1,
                pageSize: 999,})
                .then(response => {
                    this.printList = response.data.rows;
                }).catch((error)=>{
                    console.log("error===",error)
                }
                );
            },
            handleOpen(){
                this.dialogVisible = true;
                this.getPrintListApi()
            },
            handleClose(){
                this.dialogVisible = false;
                this.dialogVisibleLoading = false;
            },
            ticketout(){
                console.log('111',this.form);
                console.log('ruleForm',this.ruleForm);
                if(this.ruleForm.region){
                    this.form.deviceId = this.ruleForm.region;
                    let messagelist = {
                        ticketType: '票务类型不能为空',
                        deviceId: '打印机不能为空',
                        ticketNum: '打印数量不能为空',
                    };
                    for (let field in this.form) {
                        if (!this.form[field]) {
                            this.$message.error(messagelist[field]);
                            // console.log('this.formData', this.formData);
                            // break; // 如果发现一个字段为空就停止循环
                            return
                        }
                    }
                    this.dialogVisibleLoading = true
                    ticketout(this.form).then(res => {
                        if(res.code == 200){
                            // this.$message({
                            //     message: '打印成功',
                            //     type: 'success'
                            // });
                            this.ticketoutData = res.data;
                            this.print();
                        }else{
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }).catch(err => {
                        this.$message({
                            message: '赠票出票失败！',
                            type: 'warning'
                        });
                    });
                }else{
                    this.$message.error('请选择打印机！');
                }
               
            },
            print(){
                console.log('ticketoutData',this.ticketoutData);
                let that= this;
                let params = this.ticketoutData.printInfo;
                axios.post(this.ticketoutData.linkIp, params)
                .then(function (response) {
                    that.handleClose();
                    console.log(response);
                })
                .catch(function (error) {
                    that.handleClose();
                    console.log(error);
                });
                

            }
        }
    };
</script>
<style scope="scoped" lang="scss">
.u-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.u-row-between {
	justify-content: space-between;
}

.u-row-around {
	justify-content: space-around;
}
.item{
    margin-bottom: 20px;
    margin-left: 30vw;
    .title.ticketType{
        position: relative;
        top: -3px;
        margin-right: 10px;
    }
}
.el-input{
    width:auto;
    margin: 0 10px;
}
</style>