<template>
  <!-- 支付订单 -->
  <div class="order-bgc">
    <div class="putSupplier" v-for="(item,index) in newArrayData" :key="index">
      <div class="header acea-row row-between-wrapper">
        <div class="left acea-row row-middle">
          <div class="pictrue" :id="'qrCodeUrl'+index"></div>
          <div class="info">
            <div v-if="type == 'want'"><span class="name" >要货单号：</span>{{item.want_order_id}}</div>
			<div v-if="type == 'purchase'"><span class="name" >采购单号：</span>{{item.purchase_order_id}}</div>
			<div v-if="type == 'out'"><span class="name" >出库单号：</span>{{item.out_order_id}}</div>
			<div v-if="type == 'in'"><span class="name" >入库单号：</span>{{item.in_order_id}}</div>
			<div><span class="name">创建人：</span>{{item.cuser && item.cuser.id ? item.cuser.staff_name : ''}}</div>
           <div><span class="name">审核人：</span>{{item.auser && item.auser.id ? item.auser.staff_name : ''}}</div>
          </div>
        </div>
        <div class="info">
          <div v-if="type=='want'"><span class="name">要货门店：</span>{{item.my_store_id ? item.mystore.name:''}}</div>
          <div v-if="type=='want'"><span class="name">出货{{item.wid?'仓库':'门店'}}：</span>{{item.wid?item.ware.title:(item.store_id?item.store.name: '')}}</div>
		  <div v-if="type=='purchase'"><span class="name">供应商：</span>{{item.supplier ? item.supplier.supplier_name:''}}</div>
		  <div v-if="type=='purchase'"><span class="name">采购人：</span>{{item.puser ? item.puser.staff_name:''}}</div>
		  <div v-if="type=='out'"><span class="name">调出{{item.wid?'仓库': '门店'}}：</span>{{item.wid ? item.ware.title:item.store.name}}</div>
		  <div v-if="type=='in'"><span class="name">仓库：</span>{{item.ware.title}}</div>
          <div><span class="name">状态：</span>{{item.status == 0?'待审核':(item.status == 1? '通过': (item.status == 2?'部分完成':(item.status == 3? '完成': (item.status == -1 ?'拒绝':(item.status == -2?'无效':'')))))}}</div>
        </div>
      </div>
      <div class="mt20">
        <Table border :columns="columns" :data="item.goodsList" :disabled-hover="true">
          <template slot-scope="{ row }" slot="batch_code">
            <div class="line1">{{row.product_name? (row.batch_code?row.batch_code:'/'): ''}}</div>
          </template>
		  <template slot-scope="{ row }" slot="product_name">
		    <div class="line1">{{row.product_name || row.store_name}}</div>
		  </template>
          <template slot-scope="{ row }" slot="suk">
            <div class="line1">{{row.suk}}</div>
          </template>
        </Table>
      </div>
      <!-- <div class="bottom acea-row row-between-wrapper">
        <div class="acea-row row-middle">
          <div class="item"><span class="name">运费：</span>{{item.freight_price}}</div>
          <div class="item"><span class="name">优惠：</span>{{item.coupon_price}}</div>
          <div class="item"><span class="name">会员折扣：</span>{{item.vip_true_price}}</div>
          <div class="item"><span class="name">积分抵扣：</span>{{item.deduction_price}}</div>
        </div>
        <div class="pricePay">实付金额：{{item.pay_price}}</div>
      </div> -->
      <!-- <div class="bottom acea-row">
        <div class="name">用户备注：<span class="con">{{item.mark || '-'}}</span></div>
      </div> -->
      <div class="h50">
        <div class="delivery" v-if="site_name || refund_address || refund_phone">
          <div v-if="site_name">店铺信息：{{ site_name }}</div>
          <div v-if="refund_address">地址：{{ refund_address }}</div>
          <div v-if="refund_phone">联系方式：{{ refund_phone }}</div>
        </div>
		<div class="delivery" >
		  <div v-if="type == 'purchase'">采购{{item.wid?'仓库': '门店'}}：{{ item.wid? item.ware.title: item.store.name }}</div>
		  <div v-if="type == 'want'">要货{{item.wid?'仓库': '门店'}}：{{ item.wid? item.ware.title: item.store.name }}</div>
		  <div v-if="type == 'out'">调出{{item.wid?'仓库': '门店'}}：{{ item.wid? item.ware.title: item.store.name }}</div>
		  <div v-if="type == 'in'">仓库：{{item.ware.title }}</div>
		  <div>地址：{{ item.wid? item.ware.detailed_address: item.store.detailed_address }}</div>
		  <div >联系方式：{{ item.wid? item.ware.phone: item.store.phone }}</div>
		</div>
      </div>
    </div>
<!--  注意：后续要是加内容使页面撑大，记得查看下打印是否在同一张  -->
  </div>
</template>
<script>
import { distributionInfo } from '@/api/supplier'
import { distributionOrder } from '@/api/order'
import { getWantInfo,getPurchaseInfo,getOutInfo,getInInfo  } from '@/api/erp';
import QRCode from 'qrcodejs2';
import Setting from '@/setting';
export default {
  data (){
    return {
		id:[],
		type: '',
      columns:[
      ],
      data:{},
      goods:[],
      BaseURL: Setting.apiBaseURL.replace(/adminapi/, ""),
      newArrayData:[],
      site_name: '',
      refund_phone: '',
      refund_address: ''
    }
  },
  created() {
	  this.type = this.$route.query.type
	  this.id = this.$route.query.id.split(',')
	  this.id.forEach(item => {
		  this.getDistribution(item);
	  })
  },
  mounted() {
    this.$nextTick(function () {
      let that = this;
      setTimeout(function () {
        that.creatQrCode();
      },200)
    })
  },
  methods:{
    // 生成二维码
    creatQrCode() {
      let url= this.BaseURL;
      let qrcode = '';
      this.newArrayData.forEach((item,index)=>{
        let obj = document.getElementById('qrCodeUrl'+index);
        qrcode = new QRCode(obj, {
          text: url, // 需要转换为二维码的内容
          width: 90,
          height: 90,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      });

    },
    getDistribution(id){
		let getInfo;
		try{
			switch (this.$route.query.type){
				case 'want':
					getInfo = getWantInfo;
					this.columns = [
						{
						  title: '商品编号',
						  key: 'product_id',
						  align: 'center',
						  width: 60
						},
						{
						  title: '商品名称',
						  slot: 'product_name',
						  align: 'center',
						  minWidth: 200
						},
						{
						  title: '要货数量',
						  key: 'want_product_num',
						  align: 'center',
						  width: 120
						},
						{
						  title: '商品单位',
						  key: 'unit_name',
						  align: 'center',
						  width: 80
						}
					]
					break;
				case 'purchase':
					getInfo = getPurchaseInfo;
					this.columns = [
						{
						  title: '商品编号',
						  key: 'product_id',
						  align: 'center',
						  width: 60
						},
						{
						  title: '商品名称',
						  slot: 'product_name',
						  align: 'center',
						  width: 200
						},
						{
						  title: '采购数量',
						  key: 'product_num',
						  align: 'center',
						  width: 120
						},
						{
						  title: '商品单位',
						  key: 'unit_name',
						  align: 'center',
						  width: 80
						},
						{
						  title: '净重（kg）',
						  key: 'net_weight',
						  align: 'center',
						  width: 120
						},
						{
						  title: '毛重（kg）',
						  key: 'tare_weight',
						  align: 'center',
						  width: 120
						}
					]
					break;
				case 'out':
					getInfo = getOutInfo;
					this.columns = [
						{
						  title: '商品编号',
						  key: 'product_id',
						  align: 'center',
						  width: 60
						},
						{
						  title: '商品名称',
						  slot: 'product_name',
						  align: 'center',
						  minWidth: 200
						},
						{
						  title: '批次编号',
						  slot: 'batch_code',
						  align: 'center',
						  width: 120
						},
						{
						  title: '数量',
						  key: 'pur_number',
						  align: 'center',
						  width: 120
						},
						{
						  title: '商品单位',
						  key: 'unit_name',
						  align: 'center',
						  width: 80
						},
						{
						  title: '总重（kg）',
						  key: 'weight',
						  align: 'center',
						  width: 120
						},
					]
					break;
				case 'in':
					getInfo = getInInfo;
					this.columns = [
						{
						  title: '商品编号',
						  key: 'product_id',
						  align: 'center',
						  width: 60
						},
						{
						  title: '商品名称',
						  slot: 'product_name',
						  align: 'center',
						  minWidth: 200
						},
						{
						  title: '批次编号',
						  slot: 'batch_code',
						  align: 'center',
						  width: 120
						},
						{
						  title: '数量',
						  key: 'product_num',
						  align: 'center',
						  width: 120
						},
						{
						  title: '商品单位',
						  key: 'unit_name',
						  align: 'center',
						  width: 80
						},
						{
						  title: '净重（kg）',
						  key: 'net_weight',
						  align: 'center',
						  width: 120
						},
					]
					break;
				default:
					break;
			}
			getInfo(id).then(res => {
				
				let item = res.data
				if(this.type == 'out') {
					// item.info = item.product
					let arr = []
					item.product.forEach(e => {
						e.group.forEach(i => {
							let obj = {
								batch_code:i.batch_code,
								bin_number: i.bin_number,
								product_id: e.id,
								product_name: e.store_name,
								product_num: i.product_num,
								unit_name: i.unit_name,
								pur_number: i.pur_number,
								rate: i.rate,
								weight: i.weight,
								is_weigh:i.is_weigh
							}
							arr.push(obj)
						})
					})
					item.infos = arr
				}else if(this.type == 'in') {
					let arr = []
					item.info.forEach(e => {
						e.batchs.forEach(i => {
							let obj = {
								batch_code:i.batch_code,
								bin_number: e.bin_number,
								product_id: i.product_id,
								product_name: i.product_name,
								product_num: i.product_num,
								unit_name: i.unit_name,
								weight: i.weight,
								is_weigh:e.is_weigh,
								tare_weight: i.tare_weight,
								net_weight: i.net_weight,
								price: i.price
							}
							console.log(obj,'obj');
							arr.push(obj)
						})
					})
					item.infos = arr
				}else {
					item.infos = item.info
				}
				let len = 6-item.infos.length
				if(len > 0) {
					for(let z = 0; z < len; z++){
					  item.infos.push({
					    product_id:'',
					    product_name:'',
					    want_product_num:'',
					    unit_name:'',
					  })
					}
				}
				item.goodsList = item.infos
				this.newArrayData.push(item)
			})
		}catch(e){
			console.log(e,'err');
			//TODO handle the exception
		}
		
	}
  }
}

</script>
<style lang="less" scoped>
.order-bgc {
  background-color: #fff;
}
/deep/.ivu-table th{
  background-color: #fff!important;
}
/deep/.ivu-table-header thead tr th:nth-of-type(1){
  padding-left:0!important;
}
/deep/.ivu-table-header thead tr th{
  border-top: 1px solid #333;
}
/deep/.ivu-table td:nth-of-type(1){
  padding-left:0!important;
}
/deep/.ivu-table-header table{
  //border-top:0!important;
}
/deep/.ivu-table-border th, /deep/.ivu-table-border td{
  border-right: 1px solid #333!important;
}
/deep/.ivu-table-border th:nth-of-type(1), /deep/.ivu-table-border td:nth-of-type(1){
  border-left: 1px solid #333!important;
}
/deep/.ivu-table th, /deep/.ivu-table td{
  border-bottom: 1px solid #333!important;
  height: 47px!important;
}
/deep/.ivu-table-wrapper-with-border{
  border-color: #333!important;
  border: unset;
  //border-bottom: 1px solid #333;
  //border-right: 1px solid #333;
}
/deep/.ivu-table-border:after{
  background-color: #333;
  width: 0!important;
  height: 0!important;
}
/deep/.ivu-table:before{
  background-color: #333;
  width: 0!important;
  height: 0!important;
}
/deep/.ivu-table{
  color: #000;
}
.pricePay{
  font-weight: bold;
}
.bottom{
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  font-weight: 400;
  margin-top: 10px;
  .item{
    margin-right: 30px;
  }
  .name{
    font-weight: 600;
  }
  .con{
    width: 740px;
    font-weight: unset;
  }
}
.putSupplier{
  width: 794px;
  height: 1150px;
  background-color: #fff;
  margin: 0 auto;
  padding-top: 10px;
  /*padding: 20px 20px 450px 20px;*/
  /*box-sizing: border-box;*/
  .header{
    .info{
      font-size: 12px;
      color: rgba(0, 0, 0, 0.85);
      .name{
        font-weight: 600;
      }
      div~div{
        margin-top: 10px;
      }
    }
    .left{
      width: 500px;
      .pictrue{
        width: 90px;
        height: 90px;
        margin-right: 20px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        flex: 1;
      }
    }
  }
}
.delivery {
  display: flex;
  justify-content: center;
  width: 794px;
  padding-top: 14px;
  border-top: 1px solid #DDDDDD;
  margin: 11px auto;
  font-size: 10px;
  color: #333333;

  div + div {
    margin-left: 30px;
  }
}
</style>
