<template>
  <a-spin :spinning="confirmLoading">
    <div class="container">
      <div class="left">
        <j-form-container :disabled="formDisabled">
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail" layout="vertical">
            <a-row >
<!--              <a-col :span="24">-->
<!--                <a-form-model-item label="模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">-->
<!--                  <a-input v-model="model.name" placeholder="请输入打印模板名称" ></a-input>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
                <a-col :span="24">
                    <a-form-model-item  label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specs">
                        <j-dict-select-tag v-if="model.type == 10" type="radio" v-model="model.specs" placeholder="请选择规格" dictCode="print_template_specs"
                                           @change="e=>onSpecsChange(e)"/>
                        <j-dict-select-tag v-else type="radio" v-model="model.specs" placeholder="请选择规格" dictCode="print_template_specs"
                                           @change="e=>onSpecsChange(e)"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
                        <a-textarea v-model="model.remarks" rows="4" placeholder="请输入备注" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="preview">
                        <a-checkbox v-model="model.preview">不显示打印预览窗口，直接打印小票</a-checkbox>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="默认打印机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="defaultPrint">
                        <a-input v-model="model.defaultPrint" placeholder="请输入默认打印机"  ></a-input>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if=" model.type == 1 || model.type == 9 || model.type == 14">
                    <a-form-model-item label="打印类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="printType">
                        <j-dict-select-tag type="radio" v-model="model.printType" placeholder="请选择打印类型" dictCode="print_template_type"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="model.type == 9">
                    <a-form-model-item label="是否显示退菜" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShowRefund">
                        <j-dict-select-tag type="radio" v-model="model.isShowRefund" placeholder="请选择是否显示退菜" dictCode="print_template_refund"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-row>
                        <a-col :span="11" v-if="model.type == 1 || model.type == 8 || model.type == 14 || model.type == 15">
<!--                            <a-form-model-item label="是否打印证件信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShowIdcard">-->
<!--                                <j-dict-select-tag type="radio" v-model="model.isShowIdcard" placeholder="请选择是否打印证件信息" dictCode="print_template_refund"/>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item label="是否显示二维码信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShowQrCode">
                                <j-dict-select-tag type="radio" v-model="model.isShowQrCode" placeholder="请选择是否显示二维码信息" dictCode="print_template_refund"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="11" v-if="model.type == 1 || model.type == 8 || model.type == 14 || model.type == 15">
                            <a-form-model-item label="是否打印早餐信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShowBreakfast">
                                <j-dict-select-tag type="radio" v-model="model.isShowBreakfast" placeholder="请选择是否打印早餐信息" dictCode="print_template_refund"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :span="24">
                    <a-row>
                        <a-col :span="11" v-if="model.type == 1 || model.type == 8 || model.type == 14 || model.type == 15">
                            <a-form-model-item label="是否打印客人详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShowAddress">
                                <j-dict-select-tag type="radio" v-model="model.isShowAddress" placeholder="请选择是否打印客人详细地址" dictCode="print_template_refund"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="11" v-if="model.type == 1 || model.type == 8 || model.type == 14 || model.type == 15">
                            <a-form-model-item label="是否打印客人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShowPhone">
                                <j-dict-select-tag type="radio" v-model="model.isShowPhone" placeholder="请选择是否打印客人电话" dictCode="print_template_refund"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="打印份数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="printSum">
                        <a-input-number v-model="model.printSum" placeholder="请输入打印份数" style="width: 100%" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="10">
                    <a-form-model-item label="打印时内容宽度偏差" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="printContentOffset">
                        <a-input v-model="model.printContentOffset" placeholder="请输入打印时内容宽度偏差"  ></a-input>
                    </a-form-model-item>
                </a-col>
                <a-col :span="1"></a-col>
                <a-col :span="10">
                    <a-form-model-item label="打印时纸张宽度偏差" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="printPaperOffset">
                        <a-input v-model="model.printPaperOffset" placeholder="请输入打印时纸张宽度偏差"  ></a-input>
                    </a-form-model-item>
                </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </div>
      <div class="right" id="print_content">
        <div v-if="model.type == 1">
          <jzd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></jzd>
        </div>
        <div v-else-if="model.type == 2">
          <skd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></skd>
        </div>
        <div v-else-if="model.type == 3">
          <tkd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></tkd>
        </div>
        <div v-else-if="model.type == 4">
          <jbb ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></jbb>
        </div>
        <div v-else-if="model.type == 5">
          <hfd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></hfd>
        </div>
        <div v-else-if="model.type == 6">
          <xzd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></xzd>
        </div>
        <div v-else-if="model.type == 7">
          <zfd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></zfd>
        </div>
        <div v-else-if="model.type == 8">
<!--          <djd :sizeTypeClass="sizeTypeClass" :defContent="model.remarks" :defModel="model"></djd>-->
            <rzdjd ref="printContent" :sizeTypeClass="sizeTypeClass" :defContent="model.remarks" :defModel="model"></rzdjd>
        </div>
        <div v-else-if="model.type == 9">
          <posjzd ref="printContent" :defModel="model" :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></posjzd>
        </div>
        <div v-else-if="model.type == 10">
          <jbmxb ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></jbmxb>
        </div>
        <div v-else-if="model.type == 11">
          <hykfd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></hykfd>
        </div>
        <div v-else-if="model.type == 12">
          <ckd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></ckd>
        </div>
        <div v-else-if="model.type == 13">
          <rkd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></rkd>
        </div>
        <div v-else-if="model.type == 14">
          <tdjzd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></tdjzd>
        </div>
        <div v-else-if="model.type == 15">
          <tdrzd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></tdrzd>
        </div>
        <div v-else-if="model.type == 16">
          <zcq ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></zcq>
        </div>
        <div v-else-if="model.type == 17">
          <qxd ref="printContent" :defModel="model"  :sizeTypeClass="sizeTypeClass" :defContent="model.remarks"></qxd>
        </div>
        <div v-else></div>
      </div>
    </div>

      <!--      测试打印-->
<!--      <a-dropdown>-->
<!--          <a-button icon="printer" type="primary">-->
<!--              打印选项-->
<!--              <a-icon type="down" />-->
<!--          </a-button>-->
<!--          <a-menu slot="overlay">-->
<!--              <a-menu-item type="primary" @click="printPreview(0)">直接打印</a-menu-item>-->
<!--              <a-menu-item type="primary" @click="printPreview(1)">打印预览</a-menu-item>-->
<!--              <a-menu-item type="primary" @click="printPreview(2)">打印维护</a-menu-item>-->
<!--              <a-menu-item type="primary" @click="printPreview(3)">打印设计</a-menu-item>-->
<!--          </a-menu>-->
<!--      </a-dropdown>-->

<!--      <a-button type="info" @click="handlePrint()">打印</a-button>-->
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import jzd from './printComponents/settlePrint.vue'
  import skd from './printComponents/incomePrint.vue'
  import tkd from './printComponents/refundPrint.vue'
  import qxd from './printComponents/extractPrint.vue'
  import zcq from './printComponents/breakFastCouponPrint.vue'
  import tdrzd from './printComponents/teamCheckIn.vue'
  import tdjzd from './printComponents/teamCheckOut.vue'
  import rkd from './printComponents/hotelEntryPrint.vue'
  import ckd from './printComponents/hotelOutPrint.vue'
  import hykfd from './printComponents/memberChargePrint.vue'
  import posjzd from './printComponents/posCheckOutPrint.vue'
  import zfd from './printComponents/paymentPrint.vue'
  import xzd from './printComponents/renewalOrderPrint.vue'
  import hfd from './printComponents/changeRoomPrint.vue'
  import djd from './printComponents/registrationPrint.vue'
  import jbb from './printComponents/handoverPrint.vue'
  import jbmxb from './printComponents/handoverDetailPrint.vue'

  //入住登记单-客户提供
  import rzdjd from './printComponents/checkInPrint.vue'

  import { getLodop } from '../../../../utils/lodop/LodopFuncs'
  import Print from '../../../../utils/lodop/print.min'


  export default {
    name: 'printTemplateForm',
    components: {
        jzd,
        skd,
        tkd,
        qxd,
        zcq,
        tdrzd,
        tdjzd,
        rkd,
        ckd,
        hykfd,
        posjzd,
        zfd,
        xzd,
        hfd,
        djd,
        jbb,
        jbmxb,
        rzdjd
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        sizeTypeClass: 'mm80',
        model:{
         },
        labelCol: {
        },
        wrapperCol: {
        },
        confirmLoading: false,
        validatorRules: {
           name: [
              { required: true, message: '请输入打印模板名称!'},
           ],
           specs: [
              { required: true, message: '请输入规格!'},
           ],
          remarks: [
            { required: true, message: '请输入备注!'},
          ],
          printSum: [
            { required: true, message: '请输入打印份数!'},
          ],
          printContentOffset: [
            { required: true, message: '请输入打印时内容宽度偏差!'},
          ],
          printPaperOffset: [
            { required: true, message: '请输入打印时纸张宽度偏差!'},
          ],
        },
        url: {
          add: "/business/busPrintTemplate/add",
          edit: "/business/busPrintTemplate/edit",
          queryById: "/business/busPrintTemplate/queryById"
        },
        width:"94%"
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        add() {
            this.edit(this.modelDefault);
        },
        edit(record) {
            console.log(record)
            this.model = Object.assign({}, record);
            this.width = record.specs;
            if (record.specs === 'A5') {
                // this.width = '210mm';
                this.sizeTypeClass = "a5"
            } else if (record.specs === '58mm') {
                this.sizeTypeClass = "mm58"
            } else {
                this.sizeTypeClass = "mm80"
            }
            this.visible = true;
        },
        submitForm() {
            const that = this;
            var printContent = this.$refs.printContent
            if (printContent){
                var hotelLogo = printContent.defModel.hotelLogo

                if (hotelLogo){
                    this.model.hotelLogo = hotelLogo
                }
            }

            // 触发表单验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    that.confirmLoading = true;
                    let httpurl = '';
                    let method = '';
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = 'post';
                        var info = JSON.parse(localStorage.getItem("storeInfo"));
                        this.model.hotelId = info.id;
                    } else {
                        httpurl += this.url.edit;
                        method = 'put';
                    }
                    httpAction(httpurl, this.model, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.$emit('ok');
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                    })
                }

            })
        },
        onSpecsChange(val) {
            if (val == '80mm') {
                this.sizeTypeClass = 'mm80'
            } else if (val == '58mm') {
                this.sizeTypeClass = 'mm58'
            } else {
                this.sizeTypeClass = 'a5'
            }
        },
        printPreview(s) {
            this.CreateOneFormPage()
            if (s == 0) {
                LODOP.PRINT() //直接打印
            }
            if (s == 1) {
                LODOP.PREVIEW() //打印预览
            }
            if (s == 2) {
                LODOP.PRINT_SETUP() //打印维护
            }
            if (s == 3) {
                LODOP.PRINT_DESIGN() //打印设计
            }
        },
        CreateOneFormPage() {
            LODOP = getLodop()
            //样式
            var olstyle1 = '<style>' + document.getElementById('olstyle1') + '</style>'
            var body = olstyle1 + '<body>' + document.getElementById('print_content').innerHTML + '</body>'
            console.log(body)
            // var body = document.getElementById('print_content').innerHTML;
            LODOP.PRINT_INIT(this.model.name) //打印初始化
            // LODOP.SET_PRINT_STYLE('FontSize', 18) //设置对象风格
            LODOP.SET_PRINT_STYLE('Bold', 1) //设置对象风格
            // LODOP.ADD_PRINT_TEXT(50,521, 130, 39, this.description) //增加纯文本项
            var _left = 0;
            var _wight = 2000;
            var _height = 2000;
            //SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
            if (this.model.specs == '58mm') {
                _wight = 580;
                _height = 4000;
            } else if (this.model.specs == '80mm') {
                _wight = 800
                _height = 2190;
            } else if (this.model.specs == 'A5') {
                _wight = 2100;
                _height = 2970;
            } else {

            }
            _left = this.model.printPaperOffset;
            LODOP.SET_PRINT_PAGESIZE(_left, _wight, _height, '') //设定纸张大小
            /*
            intDispMode:预览比例，数字型，0-适度高 1-正常大小 2-适度宽
            intToolMode:工具条和按钮，数字型 0-显示（上方）工具栏   1-显示（下方）按钮栏 2-两个都显示3-两个都不显示
            blDirectPrint:打印按钮是否“直接打印” 1-是 0-否（弹出界面“选择打印”）
            intWidth，intHeight 窗口的宽和高，整数型，单位px
            strTitleButtonCaption：预览窗口和打印按钮的名称组合，字符型，用“点”分隔
            */

            LODOP.SET_PREVIEW_WINDOW(0, 0, 1, 0, 0, "");
            // LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', '55%')//设置缩放
            // LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, '')//设置窗口
            // 打印二维码
            // LODOP.ADD_PRINT_BARCODE(23,23,233,233,"QRCode","https://blog.csdn.net/qq_43652509");
            //打印网址
            // LODOP.ADD_PRINT_URL(222,2000,2000,233,"https://blog.csdn.net/qq_43652509");
            //打印图片
            // LODOP.ADD_PRINT_IMAGE(100,100,400,400,"<img border='0' src='http://s1.sinaimg.cn/middle/4fe4ba17hb5afe2caa990&690' width='345' height='250'>");

            // ● ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
            // ● ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
            // ● ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
            // ● ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
            LODOP.ADD_PRINT_HTM(this.model.printContentOffset, this.model.printContentOffset, _wight - this.model.printContentOffset, _height - this.model.printContentOffset, body) //增加超文本项
        },
        handlePrint() {
            var _content = this.model.printContentOffset;
            var _maxWidth = 210;
            if (this.model.specs == '58mm') {
                _maxWidth = 580;
            } else if (this.model.specs == '80mm') {
                _maxWidth = 800
            } else if (this.model.specs == 'A5') {
                _maxWidth = 2100;
            } else {

            }
            // var img = document.getElementById("image");
            // img.src = 'https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif';
            //打印图片要放在<img>标签中
            printJS({
                printable: "print_content", // 'printFrom', // 标签元素id
                type: 'html',
                header: '', // '表单',
                targetStyles: ['*'],
                maxWidth:_maxWidth,
                style: '@page {margin:'+_content+'mm;size: A3;};', // 可选-打印时去掉眉页眉尾
                ignoreElements: [], // ['no-print']
                properties: null
            })
        }
    }
  }
</script>

<style lang="less" scoped>
  .container{
    display: flex;
    flex-direction: row;
  }
  .left{
    flex: 2;
  }
  .right{
    flex: 3;
    padding-left: 20px;
  }
  .template{
    margin-left: 10px;
  }
</style>
