<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="70%"
    top='5vh'
    append-to-body
    :close-on-click-modal = "false"
    :before-close="handleClose"
  >
    <div class="main" id="printTest" ref="printTest">
      <div class="header">
        <span style="font-size: 30px; font-weight: bold">入库打印单</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="body-text">
            <span class="text">入库类型:</span>
            <span class="text1">{{ aaa.warehousing_type }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">订单名称:</span>
            <span class="text1">{{ aaa.order_name }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">客户:</span>
            <span class="text1">{{ aaa.customer_id }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">入库仓库:</span>
            <span class="text1">{{aaa.op_user_id}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">业务员:</span>
            <span class="text1">{{ aaa.salesman_info }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">入库日期:</span>
            <span class="text1">{{ date }}</span>
          </div>
        </el-col>
       <el-col :span="6">
          <div class="body-text">
            <span class="text">收款状态:</span>
            <span class="text1">{{ aaa.pay_status }}{{aaa.pay_channel ? `(${aaa.pay_channel})` : '' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">单号:</span>
            <span class="text1">{{id}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">入库数量:</span>
            <span class="text1">{{ tableData.length }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="body-text">
            <span class="text">质检员:</span>
            <span class="text1">{{aaa.op_user_id}}</span>
          </div>
        </el-col>
       <!-- <el-col :span="6">
          <div class="body-text">
            <span class="text">库位:</span>
            <span class="text1">{{ aaa.location_id }}</span>
          </div>
        </el-col> -->
      </el-row>
      <!--引入表格组件-->

      <el-table border :data="tableData">
        <el-table-column
          v-for="(item, index) in tableLabel"
          :key="index"
          :property="item.param"
          :label="item.label"
          :formatter="item.formatter"
        >
        </el-table-column>
      </el-table>
      <div>
        <table style="height: 40px;">
          <tr>
            <td class="text1">供应商:{{msg.company}}</td>
            <td class="text1">联系方式:{{msg.phone}}</td>
            <td class="text1">
              发货地址:{{msg.address}}
            </td>
            <td class="text1">总金额:{{ sumprice }}</td>
          </tr>
         <!-- <tr>

          </tr> -->
        </table>
      </div>
    <div class="footer">
        <div class="fotter-top" >
            <span class="footer-Toptext">{{msg.company}},{{msg.slogan}}。</span>
            <div class="fotter-main">
              <span class="footer-maintext">感谢您选择爱果战壕ERP,我们将竭诚为您服务!!!</span>
              <span style="margin-left:5px" class="footer-maintext">服务热线:{{msg.tel}}</span>
            </div>
        </div>

     </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-popover
            @hide="hide"
            title="扫描查看明细"
            placement="top-start"
            width="100"
            trigger="click"
          >
          <div class="qrcode" ref="qrCodeUrl"></div>
        <el-button slot="reference" style="margin:0 10px" @click="share()">分享</el-button>
      </el-popover>
      <el-button type="primary" v-print="'#printTest'">确认打印</el-button>
    </span>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas'  // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
import QRCode from 'qrcodejs2'
import {pre_print} from "@/api/machineList"; //获取列表信息接口
import { op_order_details_code } from "@/api/Warehousing"; //获取二维码信息接口
export default {
  name: "Warehousingprint",
  data() {
      let that = this
      const style = '@page { margin: 0 } @media print { zoom:100%  }'//自定义样式
    return {
      printobj:{
          id:'#printTest',
          popTitle:'打印',
          style:style,
          scanStyles:true,
          closeCallback(e){
              that.$emit("update:dialogVisible", false);
          }
      },
      tableLabel: [
        {
          label: "序号",
          param: "Serial",
          align: "center",
          width: "100",
          show: true,
        },
        {
          label: "IMEI/SN",
          input: true,
          param: "sn_or_imei",
          align: "center",
          renderheader: this.renderheader,
          show: true,
          ortable: true,
          formatter:(row)=>{
            // console.log(row,666)
              let obj = row.sn_or_imei.imei
              return obj
          }
        },
        {
          label: "机器信息",
          param: "phone_list",
          align: "center",
          show: true,
          ortable: true,
          formatter:(row)=>{
            // console.log(row,666)
              let obj = row.phone_list.brand_name+' '+row.phone_list.model_name+' '+row.phone_list.rom_name+' '+row.phone_list.color_name
              // let a={brand_name:'',model_name:'',color_name:'',rom_name:'' }
             //  {{phone_list.brand_name}}  {{phone_list.model_name}}{{phone_list.rom_name}} {{phone_list.color_name}}
              //  for (const key in a) {
              //     obj +=' ' + row.phone_list[0][key]
              //  }
              return obj
          }
        },
        {
          label: "机器等级(成色)",
          select: true,
          param: "grade_list",
          align: "center",
          renderheader: this.renderheader,
          show: true,
          ortable: true,
          formatter:(row)=>{
              let obj = ''
              this.jiqidata.map((res) => {
                  if(row.grade_list.grade == res.value){
                      obj = res.label
                  }else{
                      return '/'
                  }
              })
              return obj
          }
        },
        {
          label: "价格",
          input: true,
          param: "price",
          align: "center",
          width: "100",
          show: true,
          renderheader: this.renderheader,
          ortable: true,
        },
        {
          label: "备注",
          input: true,
          param: "remark",
          align: "center",
          width: "100",
          show: true,
          renderheader: this.renderheader,
          ortable: true,
        },
      ],
    };
  },
  computed:{
    date() {
      var date = new Date();
      return date.toLocaleDateString();
    },
    sumprice() {
      var price = 0;
      this.tableData.map((res) => {
        price += Number(res.price);
      });
      return price;
    },
    aaa(){
      let obj = JSON.parse(JSON.stringify(this.formLabelAlign))
          for(let key in obj){
              this.input.map((res,index) => {
                  if (res.enName == key) {
                      if(Array.isArray(res.options)){
                        res.options.map(r=>{
                            if (obj[key] == r.value) {
                                obj[key] = r.label
                            }
                        })
                      }
                  }
              })
          }
          // window.localStorage.setItem("setform",JSON.stringify(this.formLabelAlign));//存储
          return obj
      },
  },
  watch: {},
  created(){
    // if(localStorage.getItem("setform")){
    //   let lastname = JSON.parse(localStorage.getItem("setform"));//读取
    //   this.formLabelAlign = lastname
    // }
    // console.log(this.formLabelAlign,'thisformLabelAlign')
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    msg: {
      type: Object,
      default: () => {
        return {};
      },
    },
    id: {
      type: String,
      default: () => {
        return '';
      },
    },
    input: {
      type: Array,
      default: () => {
        return [];
      },
    },
    formLabelAlign: {
      type: Object,
      default: () => {
        return {};
      },
    },
    jiqidata: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    toImg() { // 转图片打印
    window.pageYoffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
     html2canvas(this.$refs.printTest, {
       backgroundColor: false,
       useCORS: true,
       allowTaint: true,
     }).then((canvas) => {
       const url = canvas.toDataURL()
       this.img = url
       printJS({
         printable: url,
         type: 'image',
         documentTitle: '打印'
       })
      //  console.log(url)
     })
   },
    handleClose() {
      this.$emit("update:dialogVisible", false);
      this.$emit('showbox','false');
    },
    share() { // 转发
      op_order_details_code({order_op_id:this.id}).then((res) => {
        this.$delete(this.formLabelAlign,'phone_list');
        var list = JSON.stringify(this.formLabelAlign)
        var host = window.location.host;
        var http = window.location.protocol
        // console.log(`${http}`+'//'+`${host}/#/share2?uuid=`+res.datas.uuid+'&formLabelAlign='+list)
        new QRCode(this.$refs.qrCodeUrl, {
            // text:'https://erpv2.aiguovip.com/#/share/share?uuid='+res.datas.uuid,
            text:`${http}`+'//'+`${host}/#/share2?uuid=`+this.id+'&formLabelAlign='+list,
            width: 120,
            height: 110,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
      })

    },
    //隐藏二维码
    hide() {
      this.$nextTick(function () {
        this.$refs.qrCodeUrl.innerHTML = "";
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
}
.body-text {
  // display: flex;
  // flex-direction: column;
  margin-bottom: 15px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.text {
  font-size: 20px;
  font-weight: bold;
}
.text1 {
  font-size: 18px;
  // height: 20px;
}
.calculation {
  border: 1px solid #ebeef5;
  padding: 10px;
  font-size: 14px;
  span {
    padding: 0 10px;
    display: inline-block;
  }
}
table,td,th {
  border: 1px solid #d4d4d4;
}

table {
  border-collapse: collapse;
  height: 100px;
  width: 100%;
}

th {
  height: 65px;
}
.top{
    display: flex;
    background-color:#4ca48c;
    height:60px
}
.top-text{
    font-family: STHeiti;
    color: #fff;
    font-size: 26px;
    text-align: center;
}
.top-text1{
    font-family: STHeiti;
    color: #fff;
    font-size: 12px;
}
.fotter-top{
    display: flex;
    background-color:#4ca48c;
    height:60px;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.footer-Toptext{
    font-family: STHeiti;
    color: #fff;
    font-size: 24px;
}
.fotter-main{
    display: flex;
    // background-color:#fff;
    height:30px;
    justify-content: center;
}
.footer-maintext{
    font-family: STHeiti;
    color:#FFFFFF;
    font-size: 20px;
}
.el-col-6{
  width: 20%!important;
}
</style>
