@extends('layouts.base')

@section('content')
@section('title', '打印机信息')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<style>
    .box-top {
        width: 100%;
    }

    .factory-sty {

    }

    .factory-sty .detail-box {
        font-weight: 600;
        position: relative;
        line-height: 1;
        margin-top: 10px;
        display: inline-block;
        margin-right: 40px;
    }

    .factory-sty .detail-box .el-icon-close {
        position: absolute;
        right: -17px;
        top: -3px;
        cursor: pointer;
    }
    
    .checkbox-box .el-checkbox {
        line-height: 3;
    }
</style>
<div id="app">
    <div class="all">
    <div class="vue-head">
        <div class="vue-main-title">
            <div class="vue-main-title-left"></div>
            <div class="vue-main-title-content">打印机信息</div>
        </div>
        <div style="padding:0 50px ;">
        <el-card class="box-card">
            <div class="top-box">
                USER与UKEY, 请前往飞鹅注册查看
            </div>
        </el-card>
    </div>
    <div style="padding: 50px 100px;">
        <el-form label-position="right" label-width="80px" :model="form">
            <el-form-item label="打印机名称" label-width="100px">
                <el-input placeholder="请输入打印机名称" v-model="form.title" style="width: 700px;;"></el-input>
            </el-form-item>
            <el-form-item label="USER" label-width="100px">
                <el-input placeholder="请输入USER" v-model="form.user" style="width: 700px;;"></el-input>
            </el-form-item>
            <el-form-item label="UKEY" label-width="100px">
                <el-input placeholder="请输入UKEY" v-model="form.ukey" style="width: 700px;;"></el-input>
            </el-form-item>
            <el-form-item label="打印机编号" label-width="100px">
                <el-input placeholder="请输入打印机编号" v-model="form.printer_sn" style="width: 700px;;"></el-input>
            </el-form-item>
            <el-form-item label="打印联数" label-width="100px">
                <el-input placeholder="请输入打印联数" v-model="form.times" style="width: 700px;;"></el-input>
                <p class="help-block">打印联数上限为5联</p>
            </el-form-item>

            <el-form-item label="是否开启" label-width="100px">
                <el-switch v-model="form.status" active-color="#29ba9c" inactive-color="#dcdfe6"     :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="打印设置" label-width="100px">
                <el-radio v-model="form.print_setting_type" :label="0">统一设置</el-radio>
                <el-radio v-model="form.print_setting_type" :label="1">独立设置</el-radio>
            </el-form-item>
            <div v-if="form.print_setting_type == 1">
                <el-form-item label="选择打印模板" label-width="100px">
                    <el-select v-model="form.print_temp_id" clearable placeholder="请选择">
                        <el-option
                            v-for="item in print_temp_list"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打印订单类型" label-width="100px" v-if="is_show_print_type">
                    <el-checkbox-group v-model="form.print_type" class="checkbox-box">
                        <el-checkbox :label="1">门店订单</el-checkbox>
                        <el-checkbox :label="2">商米D2订单</el-checkbox>
                        <el-checkbox :label="3">收银台订单</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="打印厂家订单" label-width="100px" v-if="is_show_producer == 1">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="factoryDialog = true">选择厂家 </el-button>
                    <div class="factory-sty">
                        <div class="detail-box" v-for="(item,index) in print_producer_list" :key="index">
                            <span>[[item.producer_name]]</span>
                            <i class="el-icon-close" @click="delChooseFactory(index)"></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="订单打印方式" label-width="100px">
                    <el-checkbox-group v-model="form.print_order_mode" class="checkbox-box">
                        <el-checkbox :label="1">订单下单</el-checkbox>
                        <el-checkbox :label="2">订单支付</el-checkbox>
                        <el-checkbox :label="3">售后订单</el-checkbox>
                        <el-checkbox :label="4">手动打印</el-checkbox>
                    </el-checkbox-group>
                    <p style="color: red">注: 手动打印勾选后自提点，门店自提点订单核销员扫码显示打印小票按钮</p>
                </el-form-item>
            </div>
        </el-form>
    </div>        
    </div>
    <div class="vue-page">
        <div class="vue-center">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="backTo">返回列表</el-button>
        </div>
    </div>        
    </div>
    
    <!-- 选择厂家弹窗 -->
    <el-dialog
        title="选择厂家"
        :visible.sync="factoryDialog"
        width="700px"
        center>
        <div class="top-pane">
            <el-input placeholder="请选择厂家名称" style="width: 85%;"  v-model="producer_name"></el-input>
            <el-button @click="getFactoryListData">搜索</el-button>
        </div>
        <el-table :data="factoryList" style="width: 100%">
            <el-table-column prop="producer_name" label="厂家名称"></el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button @click="chooseFactory(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
<script language='javascript'>
    let id = "{{ request()-> id }}"
    //是否显示选择厂家
    let is_show_producer = '{!! $is_show_producer !!}'
    //打印模板
    let print_temp_list = JSON.parse('{!! $print_temp_list?:"[]" !!}')
    //是否显示打印订单类型
    let is_show_print_type = '{!! $is_show_print_type !!}'
    //vue
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            let url = '{!! $url !!}'
            console.log(print_temp_list,is_show_producer, typeof print_temp_list ,5555);
            return {
                form: {
                    title: '',
                    user:'',
                    ukey:'',
                    printer_sn:'',
                    times:null,
                    status:0,
                    print_setting_type: 0, //打印设置
                    print_temp_id: '', //选择打印模板
                    print_type: [],  //打印订单类型
                    print_order_mode: []  //订单打印方式
                },
                url:url,
                print_temp_list:[], //选择打印模板列表
                factoryDialog: false, //选择厂家弹窗
                factoryList: [], //厂家列表数据
                producer_name: "", //厂家列表数据-搜索值
                print_producer_list:[], //选中 -厂家列表数据
                is_show_producer: 0, //判断是否显示-厂家列表数据
                is_show_print_type: false,  //是否显示打印订单类型
            }
        },
        computed: {

        },
        mounted() {
            if (id) {
             this.getTempDetail(id)
            }else {
                this.print_temp_list = print_temp_list;
                this.is_show_producer = is_show_producer;
                this.is_show_print_type = is_show_print_type;
            }
        },
        methods: {
            //返回列表
            backTo() {
                let url = this.url
                window.location.href = url
            },
            //提交表单
            submit() {
                let url=window.location.href
                if (id) {
                    this.$http.post(url, {
                        printer: {
                            id,
                            title: this.form.title,
                            user: this.form.user,
                            ukey: this.form.ukey,
                            printer_sn: this.form.printer_sn,
                            times: this.form.times,
                            status	: this.form.status,
                            print_setting_type: this.form.print_setting_type,
                            print_temp_id: this.form.print_setting_type ? this.form.print_temp_id : "",
                            print_type: this.form.print_setting_type ? this.form.print_type : [],
                            print_order_mode: this.form.print_setting_type ? this.form.print_order_mode : [],
                            print_producer_ids: this.form.print_setting_type ? this.print_producer_list.map(item => { return item.id }) : []
                        }
                    }).then((res) => {
                        if (res.data.result) {
                            this.$message.success(res.data.msg)
                            console.log(this.url)
                            window.location.href = this.url
                        } else {
                            this.$message.error(res.data.msg);

                        }
                    })

                } else {
                        this.$http.post(url, {
                            printer: {
                            id,
                            title: this.form.title,
                            user: this.form.user,
                            ukey: this.form.ukey,
                            printer_sn: this.form.printer_sn,
                            times: this.form.times,
                            status	: this.form.status,
                            print_setting_type: this.form.print_setting_type,
                            print_temp_id: this.form.print_setting_type ? this.form.print_temp_id : "",
                            print_type: this.form.print_setting_type ? this.form.print_type : [],
                            print_order_mode: this.form.print_setting_type ? this.form.print_order_mode : [],
                            print_producer_ids: this.form.print_setting_type ? this.print_producer_list.map(item => { return item.id }) : []
                        }
                        }).then((res) => {
                            if (res.data.result) {
                                console.log(this.url)
                                this.$message.success(res.data.msg)
                                window.location.href = this.url
                            } else {
                                this.$message.error(res.data.msg);

                            }
                        })
                }
            },
            //获取模板详情
            getTempDetail(id) {
                let data_url=window.location.href
                this.$http.get(data_url, {
                    id
                }).then((res) => {
                    if (res.data.result) {
                        let data = res.data.data.data
                        this.form.title = data.title
                        this.form.user = data.user
                        this.form.ukey = data.ukey
                        this.form.printer_sn = data.printer_sn
                        this.form.times = data.times
                        this.form.status = data.status
                        this.form.print_setting_type = data.print_setting_type;
                        this.print_temp_list = res.data.data.print_temp_list;
                        this.form.print_temp_id = data.print_temp_id ? data.print_temp_id : "";
                        this.form.print_type = data?.print_type?? [];
                        this.form.print_order_mode = data?.print_order_mode?? [];
                        this.print_producer_list = res.data.data?.print_producer_list?? [];
                        this.is_show_producer = res.data.data.is_show_producer;
                        this.is_show_print_type = res.data.data.is_show_print_type;
                    } else {
                        this.$message.error(res.data.msg);

                    }
                })
            },
            // 获取厂家列表数据
            async getFactoryListData () {
                let {data: { data,result,msg }} = await this.$http.post("{!! yzWebFullUrl('plugin.more-printer.admin.printer.operation.search-print-producer') !!}",{producer_name:this.producer_name})
                console.log(data,result,msg,'data,result,msgdata,result,msg');
                if(result) {
                    this.factoryList = data;
                }else {
                    this.$message.error(msg);             
                }
            },
            // 选择厂家
            chooseFactory(row) {
                let newArr = this.print_producer_list.filter(item => item.id == row.id);
                if(!newArr.length) {
                    this.print_producer_list.push(row);
                }else {
                    this.$message.success('已选择该厂家');
                }
            },
            // 删除-选择厂家
            delChooseFactory(index) {
                this.print_producer_list.splice(index,1);
            }
        },
    })
</script>
@endsection