<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="56%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div id="printTest" ref="printTest" class="main">
      <div class="top">
        <img crossorigin="anonymous" style="margin-left: 20px;width:55px;height:100%" src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/erp_img/wumalogo.png"></img>
        <div style="margin-left: 15px;display:flex;flex-direction:column">
          <span class="top-text">五马伟业</span>
          <span class="top-text1">AppleCare Service or sales</span>
        </div>
      </div>
      <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.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">{{ aaa.salesman_info }}</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.location_id }}</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-row>
      <!--引入表格组件-->
      <div>
        <table>
          <tr>
            <td class="text1">供应商:温州新唐科技</td>
            <td class="text1">联系方式:13666666666</td>
          </tr>
          <tr>
            <td class="text1">
              发货地址:浙江省温州市鹿城区龙泉巷瑞霞公寓写字楼1105
            </td>
            <td class="text1">总金额:{{ sumprice }}</td>
          </tr>
        </table>
      </div>
      <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>
      <div class="footer">
        <div class="fotter-top">
          <span class="footer-Toptext">五马伟业,专做二手机回收、维修、销售,资深验机团队,专业维修。</span>
        </div>
        <div class="fotter-main">
          <span class="footer-maintext">感谢您选择爱果战壕ERP,我们将竭诚为您服务!!!</span>
          <span style="margin-left:5px" class="footer-maintext">服务热线:057788858858 17757760777</span>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-popover
        title="扫描查看明细"
        placement="top-start"
        width="100"
        trigger="click"
        @hide="hide"
      >
        <div ref="qrCodeUrl" class="qrcode" />
        <el-button slot="reference" style="margin:0 10px" @click="share()">分享</el-button>
      </el-popover>
      <el-button type="primary" @click="toImg">确认打印</el-button>
    </span>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
import { pre_print } from '@/api/machineList' // 获取列表信息接口
export default {
  name: 'Accessoriesprint',
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    input: {
      type: Array,
      default: () => {
        return []
      }
    },
    formLabelAlign: {
      type: Object,
      default: () => {
        return {}
      }
    },
    jiqidata: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    const that = this
    const style = '@page { margin: 0 } @media print { zoom:100% }'// 自定义样式
    return {
      printobj: {
        id: '#printTest',
        popTitle: '打印',
        style: style,
        closeCallback(e) {
          that.$emit('update:dialogVisible', false)
        }
      },
      tableLabel: [
        {
          label: '配件分类',
          param: 'cate_name',
          align: 'center',
          width: '100',
          show: true,
          formatter: (row) => {
            let obj = ''
            this.jiqidata.map((res) => {
              if (row.cate_name == res.value) {
                obj = res.label
              } else {
                return '/'
              }
            })
            return obj
          }
        },
        {
          label: '是否原厂',
          input: true,
          param: 'is_original',
          align: 'center',
          renderheader: this.renderheader,
          show: true,
          ortable: true,
          formatter: (row) => {
            if (row.is_original == 1) {
              return '原厂'
            } else if (row.is_original == 2) {
              return '非原厂'
            }
          }
        },
        {
          label: '适用配件',
          param: 'phone_list',
          align: 'center',
          show: true,
          ortable: true,
          formatter: (row) => {
            let obj = ''
            const a = { brand_name: '', model_name: '', color_name: '', rom_name: '' }
            //  {{items.brand_name}}  {{items.model_name}}{{items.rom_name}} {{items.color_name}}
            for (const key in a) {
              obj += ' ' + row.phone_list[key]
            }
            return obj
          }
        },
        {
          label: '配件单价',
          select: true,
          param: 'pay_amount',
          align: 'center',
          renderheader: this.renderheader,
          show: true,
          ortable: true,
          formatter: (row) => {
            let obj = ''
            if (row.pay_amount.unitprice && !row.number.number) {
              obj = row.pay_amount.unitprice
            } else if (row.pay_amount.unitprice && row.number.number) {
              obj = '单价' + row.pay_amount.unitprice + '\n总价格' + row.pay_amount.sumprice
            }
            return obj
          }
        },
        {
          label: '产品名称',
          input: true,
          param: 'product_name',
          align: 'center',
          width: '100',
          show: true,
          renderheader: this.renderheader,
          ortable: true
        },
        {
          label: '数量',
          input: true,
          param: 'number',
          align: 'center',
          width: '100',
          show: true,
          renderheader: this.renderheader,
          ortable: true,
          formatter: (row) => {
            let obj = ''
            obj = row.number.number
            return obj
          }
        }
      ]
    }
  },
  computed: {
    date() {
      var date = new Date()
      return date.toLocaleDateString()
    },
    sumprice() {
      var price = 0
      this.tableData.map((res) => {
        price += Number(res.pay_amount)
      })
      return price
    },
    aaa() {
      const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
      for (const 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
                }
              })
            }
          }
        })
      }
      return obj
    }
  },
  watch: {},
  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: '打印'
        })
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
    },
    share() { // 转发
      this.$nextTick(function() {
        pre_print().then((res) => {
          new QRCode(this.$refs.qrCodeUrl, {
            text: res.datas.url,
            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;
}
.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: center;
    align-items: center;
}
.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:#4ca48c;
    font-size: 20px;
}
</style>
