<template>
    <lj-win-common :title="title" :show-back="true" ref="baseWin">
        <div slot="body" class="printTemplate">
            <div class="print-preview" ref="preview" id="preview">
                <!-- <qrcode :value="qrcode" type="img" id="qrcode" ref="qrcode" v-show="false"></qrcode> -->
                <div class="reference">*图片仅供参考,请以打印实物为准</div>
            </div>
            <div class="print-setting">
                <div class="settingTemplate">
                    <van-cell-group inset title="打印设置">
                        <van-field 
                            v-if="bluetoothModule"
                            v-model="bluetoothModule.text"
                            is-link
                            readonly
                            label="界面"
                            placeholder="选择模板"
                            :disabled="isModuleEdit"
                            @click="handleSelModule" />
                        <van-field 
                            v-if="bluetoothInfo"
                            v-model="bluetoothInfo.text"
                            is-link
                            readonly
                            label="模板"
                            placeholder="选择模板"
                            @click="handleSelTemplateInfo" />
                        <van-field 
                            v-if="bluetoothInfo"
                            label="打印纸张样式" 
                            v-model="bluetoothInfo.style.text" 
                            is-link
                            readonly
                            placeholder="选择纸张样式"
                            @click="handleSelPaperStyle" />
                    </van-cell-group>
                </div>
                <van-cell-group inset v-if="bluetoothTemplate" title="模板属性值设置">
                    <template>
                        <div v-for="(one,i) in bluetoothTemplate" :key="i">
                            <!-- <div class="row-content"> -->
                                <van-field 
                                    v-if="one.useable" 
                                    v-model="one.value" 
                                    :label="one.text" 
                                    :placeholder="`请输入${one.text}`" 
                                    is-link
                                    readonly
                                    @click.stop="handleTemplateValueClick(i)"
                                />
                            <!-- </div> -->
                        </div>
                    </template>
                    
                </van-cell-group>
            </div>
            
            <!-- 组件引用 -->
            <lj-picker
                    v-if="showStylePicker"
                    ref="handStyleSelect"
                    title="纸张样式"
                    confirmtext="选择"
                    :defaultIndex="stylePickerDefaultIndex"
                    @confirm="handleSelectStyle"
            />
            <lj-picker
                    v-if="showModulePicker"
                    ref="handModuleSelect"
                    title="打印界面"
                    confirmtext="选择"
                    :defaultIndex="modulePickerDefaultIndex"
                    @confirm="handleSelectModule"
            />
            <lj-picker
                    v-if="showTemplateInfoPicker"
                    ref="handTemplateSelect"
                    title="打印模板"
                    confirmtext="选择"
                    :defaultIndex="templateInfoPickerDefaultIndex"
                    @confirm="handleSelectTemplate"
            />
            <!-- <van-dialog
                v-if="bluetoothInfo"
                v-model="showParamEdit"
                show-cancel-button
                :beforeClose="beforeClose"
            >
                <van-field
                    v-model.number="bluetoothInfo.width"
                    type="number"
                    ref="labelInput"
                    label="宽度"
                    placeholder="请输入宽度"
                    class="search-input"
                    label-width = "90"
                    :disabled = "true"
                />
                <van-field
                    v-model.number="bluetoothInfo.height"
                    type="number"
                    ref="labelInput"
                    label="高度"
                    placeholder="请输入高度"
                    class="search-input"
                    label-width = "90"
                />
                <van-field
                    v-model.number="bluetoothInfo.initX"
                    type="number"
                    ref="labelInput"
                    label="打印起点X"
                    placeholder="请输入打印起点X"
                    class="search-input"
                    label-width = "90"
                />
                <van-field
                    v-model.number="bluetoothInfo.initY"
                    type="number"
                    ref="labelInput"
                    label="打印起点Y"
                    placeholder="请输入打印起点Y"
                    class="search-input"
                    label-width = "90"
                />
            </van-dialog> -->
            <lj-picker
                    v-if="handtypeVisible"
                    ref="handtypeSelect"
                    title="标题"
                    confirmtext="选择"
                    :defaultIndex="pickerDefaultIndex"
                    @confirm="handleAlterTemplate"
            ></lj-picker>
            <!-- <van-popup v-model="dateVisiable" position="bottom">
                <van-datetime-picker
                    v-model="tempDateValue"
                    type="date"
                    title="选择年月日"
                    @confirm="handleDateTimeComfirm"
                    @cancel="handleDateTimeCancel"
                />
            </van-popup> -->
        </div>
        <div slot="footer">
            <div class="print-footer">
                <van-button type="info" block @click="print">测试打印</van-button>
                <van-button type="primary" block @click="handleSavePrintTemplate">保存模板</van-button>
            </div>
        </div>
    </lj-win-common>
</template>

<script>
import LjWinCommon from "components/lj-win-common";
import LjPicker from 'components/L1APP/pda/lj-picker';
export default {
    name: "bluetooth-print-set",
    components: {
        LjWinCommon,
        LjPicker,
        // Qrcode,
    },
    data() {
        return {
            title: "打印模板设置",

            bluetoothData: null,
            bluetoothTemplate: null, // 蓝牙打印模板
            bluetoothModule: null, // 蓝牙打印模块
            bluetoothInfo: null, // 蓝牙打印模板信息
            useModules: null,
            useInfos: null,
            showModulePicker: false,
            showTemplateInfoPicker: false,
            templateInfoPickerDefaultIndex: 0,
            modulePickerDefaultIndex: 0,
            showParamEdit: false,
            winMode: 0,
            moduleName: "",
            activateIndex: 0,
            showStylePicker: false,
            stylePickerDefaultIndex: 0,


            tempDateValue: null,
            editVisible:false,
            dateVisiable: false,
            handtypeListPicker : null, // lj-picker
            handtypeVisible : false, // lj-picker
            pickerDefaultIndex : 0, // lj-picker
        }
    },
    created(){
        let pageParam = $lj.getPageParam();
        console.log('初始化！！！ pageParam :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(pageParam));
        if(pageParam){
            this.winMode = pageParam.winMode || 0;
            this.moduleName = pageParam.moduleName || "";
            this.bluetoothData = pageParam.bluetoothData || null;
        }

        this.useModules = $BlueToothPrintTemplate.getBluePrintModule();
    },
    mounted(){
        let self = this;
        $BlueToothPrintTemplate.getAlreadySaveTemplateInfo().then(function(){
            if(self.winMode == 0) {
                self.handleSelectModule(self.useModules[0],0);
            } else {
                for(let i = 0; i < self.useModules.length;i++) {
                    if(self.useModules[i].value == self.moduleName) {
                        self.handleSelectModule(self.useModules[i],i);
                        break;
                    }
                }
            }
        })
    },
    computed:{
        isModuleEdit() {
            return this.winMode == 1;
        }
    },
    methods: {
        handleAlterTemplate(data,idx){
            var template = $BlueToothPrintTemplate.getBlueToothPrintUseTemplate();

            if(template[this.activateIndex].type == "barcode") {
                $BlueToothPrintTemplate.setBlueToothPrintTemplateValue(this.activateIndex,idx);
            } else {
                var nIndex = 0;
                for(let i = 0;i < template.length;i++) {
                    if(template[i].value == data.value && template[i].type != "barcode") {
                        nIndex = i;
                        break;
                    }
                }

                $BlueToothPrintTemplate.setBlueToothPrintTemplateValue(this.activateIndex,nIndex);
            }
            
            this.refreshTemplate();
        },
        handleTemplateValueClick(index) {
            var template = $BlueToothPrintTemplate.getBlueToothPrintUseTemplate();
            let list = [];

            if(template[index].type != "barcode" && template[index].type != "select") return;

            // 条码号有专属range
            if(template[index].type == "barcode") {
                list = template[index].range;
            } else {
                for(let i = 0;i < template.length;i++) {
                    if(!template[i].useable) {
                        list.push(template[i]);
                    }
                }
            }

            if(list.length <= 0) {
                $lj.toast("没有可替换的属性值,请联系管理员!");
                return;
            }

            var self = this;
            this.handtypeVisible = true;
            this.activateIndex = index;
            this.$nextTick(function() {
                self.$refs.handtypeSelect.setValue(list);
            })
        },
        handleSelTemplateInfo() {
            var self = this;
            this.showTemplateInfoPicker = true;
            this.$nextTick(function() {
                self.$refs.handTemplateSelect.setValue(this.useInfos);
            })
        },
        handleSelModule() {
            if (this.isModuleEdit) return;

            var self = this;
            this.showModulePicker = true;
            this.$nextTick(function() {
                self.$refs.handModuleSelect.setValue(this.useModules);
            })
        },
        handleSelPaperStyle() {
            var self = this;
            this.showStylePicker = true;
            let list = $BlueToothPrintTemplate.getBlueToothPrintPaperStyle();
            this.$nextTick(function() {
                self.$refs.handStyleSelect.setValue(list);
            })
        },
        beforeClose(action, done){
            if(action === 'confirm') {
                setTimeout(done, 1000);
            } else if(action === 'cancel') {
                done() //关闭
            }
        },
        createTemplate() {    
            var canvas = document.getElementById("canvas");

            if(canvas != null) {
                canvas.remove();
            }

            canvas = $BlueToothPrintTemplate.getBlueToothPrintUsePrinter().getCanvasElement();

            var canvasList = document.getElementById("preview");
            canvasList.prepend(canvas);

            $BlueToothPrintTemplate.GetBlueToothPrint(this.bluetoothData);
        },
        handleSelectTemplate(data,idx){
            this.templateInfoPickerDefaultIndex = idx;
            $BlueToothPrintTemplate.setBlueToothPrintUseTemplateInfo(data);
            this.bluetoothInfo = $BlueToothPrintTemplate.getBlueToothPrintUseTemplateInfo();
            this.refreshTemplate();
        },
        handleSelectModule(data,idx) {
            this.modulePickerDefaultIndex = idx;

            let self = this;
            $BlueToothPrintTemplate.setBlutToothPrintUseModule(data.value).then(function() {
                self.useInfos = $BlueToothPrintTemplate.getBlueToothPrintUseTemplateInfoList();
                self.bluetoothModule = $BlueToothPrintTemplate.getBlueToothPrintUseModule();
                self.bluetoothInfo = $BlueToothPrintTemplate.getBlueToothPrintUseTemplateInfo();
                self.refreshTemplate();
            })
        },
        handleSelectStyle(data,idx) {
            this.stylePickerDefaultIndex = idx;

            $BlueToothPrintTemplate.setBlueToothPrintPaperStyle(data);
        },
        refreshTemplate() {
            this.bluetoothTemplate = $BlueToothPrintTemplate.getBlueToothPrintUseTemplate();
            this.createTemplate();
        },
        print(){
            // this.printer.print();
            $BlueToothPrintTemplate.getBlueToothPrintUsePrinter().print()
            // 关闭窗口
            // $lj.closeWin();
        },
        handleSavePrintTemplate() {
            // 保存模板信息
            $BlueToothPrintTemplate.SaveBlueToothTemplateInfo();
            // 保存模板
            $BlueToothPrintTemplate.SaveBlueToothModuleTemplate();
        }
    }
}
</script>

<style lang="less" scope>
    .printTemplate{
        .print-preview{
            height: 100%;
            width: 100%;
            padding: 16px;
            padding-bottom: 0;
            overflow: hidden;

            .canvas{
                width: 100%;
                height: 100%;
                border: 1px solid black;
                border-radius: 5px;
                // transform: scale(0.5);                
            }

            .reference {
                text-align: center;
                color: red;
            }
        }
    }

    .print-setting{

        &:first-child .row-title{
            padding-top: 0;
        }

        .settingRow{
            text-align: left;

            .row-title{
                padding: 5px 16px;
                padding-top: 10px;
            }

            .row-content{
                // .content-label{
                //     // text-align: right;
                //     display: flex;
                //     flex-direction: column;

                //     .extra {
                //         font-size: 12px;
                //         color: #c8c9cc;
                //     }
                // }

                // .content-label-icon{
                //     font-size: 12px !important;
                // }
            }
        }
    }

    .print-footer{
        display: flex;
        flex-direction: row;
    }
</style>