<template>
  <div>
    <vxe-button type="text" status="primary" content="打印" @click="openChooseTemplate"></vxe-button>
    <print ref="print"></print>
    <Modal
      v-model="showChooseTemplate"
      title="选择打印模板">
      <Select v-model="currentTemplate" filterable>
        <Option v-for="item in templateList" :value="item.tmId" :key="item.tmId">{{ item.tmName }}</Option>
      </Select>
      <Checkbox style="margin-top: 10px;" v-model="pageFlag">是否打印页码</Checkbox>
      <div slot="footer">
        <Button @click="showChooseTemplate = false">取消</Button>
        <Button @click="printBtn">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>

import print from '_c/business/print/index.vue'

export default {
  name: 'print_button',
  components:{
    print
  },
  props:{
    orderType:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      templateList:[],
      currentTemplate:null,
      pageFlag:true,
      currentTemplateObj:{},
      allAlign: null,
      showChooseTemplate:false,
    }
  },
  methods: {
    printBtn(){
      if(!this.currentTemplate){
        this.$Message.warning('请先选择一个模板再打印')
      }
      this.currentTemplateObj = this.templateList.filter(it=>{return it.tmId === this.currentTemplate})[0]
      // console.log(this.currentTemplateObj)

      let div = document.createElement("div");
      div.id = "cm";
      div.style.width = this.currentTemplateObj.templateData.paperInfo.width+"cm";
      div.style.height = this.currentTemplateObj.templateData.paperInfo.height+"cm";
      document.querySelector("body").appendChild(div);
      // 原生方法获取浏览器对元素的计算值
      let cm = document.getElementById("cm").getBoundingClientRect();

      let widthPx = cm.width
      let heightPx = cm.height
      div.remove()

      // console.log('切换之后宽：'+widthPx+'，高：'+heightPx)

      this.$refs['print'].paperHeight = this.currentTemplateObj.templateData.paperDirection === 'portrait' ? heightPx:widthPx
      this.$refs['print'].paperDirection = this.currentTemplateObj.templateData.paperDirection
      // console.log('currentTemplateObj',this.currentTemplateObj)
      this.$emit('print-btn')
    },
    print(printData){
      // console.log('print')
      this.$refs.print.printFunc(printData,this.currentTemplateObj.templateData,this.pageFlag)
      this.showChooseTemplate = false
    },
    openChooseTemplate(){
      this.getTemplateList()
      this.showChooseTemplate = true
      this.currentTemplate = null
    },
    getTemplateList() {
      // let arrStr = localStorage.getItem('print_template');
      // let arr = []
      // if(arrStr){
      //   arr = JSON.parse(arrStr);
      // }
      // this.templateList = arr.filter(it=>{return it.typeCode === this.orderType});
      printTemplateService.selectChooseTemplate(
        {
            docCode:this.orderType,
            flgDel: false,
            flgValid:true,
            flgChoose:true,
            sysId:this.$store.state.user.sysId,
            cpId:this.$store.state.user.cpId
         }
        ).then(res=>{
        if(res.code === 200){
          this.templateList = res.data
          this.templateList.forEach(it=>{
            this.$set(it,'templateData',it.tmData)
          })
        }else{
          this.$Message.warning(res.message)
        }
      })
    }
  },
  created() {

  },

}
</script>

<style scoped>

</style>
