<template>
	<div class="container resource close-left-menu contaNEW">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a @click="confirm" class="fbtn fb-modify ml-10 mr-10" v-if="statemir=='MS01'" v-link="{ path: '/factoryInvoiceMake/' + $route.params.id}">修改</a>
			</div>
			<h3 class="current-module">生产厂商发票登记</h3>
		</div>
		<div class="pd-form clearfix">
			<section class="w480 fl">

				<div class="form-group form-label mb-15">
					<label for="producer" class="label">发票日期</label>
					<div class="control">

						<input type="text" v-model="invoice.trsuppliermir.invoicedate" readonly="readonly" class="inp4">
					</div>
				</div>

				<div class="form-group form-label  mb-15">
					<label for="cn24" class="label">发票号</label>
					<div class="control">

						<input type="text" v-model="invoice.trsuppliermir.invoiceno" readonly="readonly" class="inp3">
					</div>
				</div>
				<div class="form-group form-label  mb-15">
					<label for="cn24" class="label">发票金额</label>
					<div class="control">

						<input type="text" v-model="invoice.trsuppliermir.invoicemoney" readonly="readonly" class="inp4">
					</div>
				</div>
				<div class="form-group form-label  mb-15 w1003">
					<label for="cn24" class="label">生产厂商</label>
					<div class="control">

						<input type="text" v-model="invoice.trsuppliermir.manufacturer" readonly="readonly" class="inp4">
					</div>
				</div>
				<div class="form-group form-label  mb-15 w1003">
					<label for="cn24" class="label">备注</label>
					<div class="control">

						<input type="text" v-model="invoice.trsuppliermir.memo" readonly="readonly" class="inp2">
					</div>
				</div>
			</section>
			<section class="w480 ml-480 fl pl40">
				<div>
					<div class="pro-img w180  fl">
						<div class="pic-container">
							<section :style="{backgroundImage:'url('+simgSrc+')'}"   class="img_box_sec fl  w180"  style="height: 87px;">
                                <!--{backgroundImage:'url('+item.path+')'}" -->
								<!--<img :src="invoice.trsuppliermir.invoicepic|picSrc" />-->

							</section>

							<div class="license-btn w180 ">
								<span class="fbtn modify-btn" title="修改" style="width:90px;padding:5px 38px;" @click="deleteimg(0)"><i>|</i></span>
								<imagebox v-bind:imgarr="[{img:imgsrc}]">
									<span class="fbtn magnify-btn" title="放大" style="width:89px;padding:5px 7px;padding-left:38px;"></span>
								</imagebox>
							</div>
						</div>
					</div>

				</div>
			</section>

		</div>

		<div style="position: relative;">

			<section class=" pl10 pr10" style="height: 100%;">

				<table class="itable itable-thead-13px ">
					<thead>
						<tr>
							<th class="w40 ">序号</th>
							<th class="w100 ">商品编号</th>
							<th class="w100 ">商品名称</th>
							<th class="w40 ">规格</th>

							<th class="w100">注册证号/批准文号</th>
							<th class="w70">数量</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="6" v-if="invoice.trsuppliermirdetails.length==0">
								暂无符合条件的记录
							</td>
						</tr>
						<tr v-for="goodR in invoice.trsuppliermirdetails">
							<td>
								{{ $index + 1 }}
							</td>
							<td>{{ goodR.goodscode }}</td>
							<td> {{goodR.goodsname}}</td>
							<td> {{goodR.goodsspec}} </td>
							<td>{{goodR.registkey}}</td>
							<td> {{goodR.invoicenum}} </td>
						</tr>

					</tbody>
				</table>
				<div class="pagination" style="margin: 20px 0">
					<pagination @page-change="getSupDoods()" :class="['m-20-0']" :page-no.sync="search.pageNo" :total-pages.sync="search.totalPages"></pagination>
				</div>
			</section>
		</div>

</template>
<style scoped>
    .img_box_sec{
        width: 100%; height: 150px; margin-bottom: 10px; border: solid 1px #dadada; text-align: center;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;

    }
</style>

<script>
	module.exports = {
		data: function() {
			return {
				search: {
					name: '',
					goodsinfo: '',
					invoicedate: '', //发票日期
					invoicemoney: '', //发票金额
					invoicepic: '', //发票图片
					invoiceno: '', //发票号
					memo: '', //备注
					manufacturer: '',
					pageSize: 10,
					page: 1,
					totalPages: 0,
					total: 0,
					pageNo: 0,
					memo: '',
				},
				invoice: '',
				upload: '', //上传图片
				findproducerList: '', //生产厂商名字
				findgoodsByProducer: '', // 商品列表
				addGoods: [],
				imgsrc: '',
				state: false,
				statemir: this.$route.params.state,
                simgSrc:'',
			};
		},
		watch: {
			'search.name': function() {
				var self = this;
				self.init();
			},
		},
		methods: {

			//左侧商品列表
			getDate: function() {
				var self = this;
				//this.$route.params.guid
				Ajax.post('/supplierReport/findmirDetailByGuid', {
						'guid': self.$route.params.id,
					})
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							self.$set('invoice', data);
                            var objPic = JSON.parse(self.invoice.trsuppliermir.invoicepic), imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                            // original 里面放的是放大的 图片
							for(var i = 0; i < objPic.length; i++) {
								self.imgsrc = imgReg.test(objPic[i].original.path) ? objPic[i].original.path : objPic[i].original.path + objPic[i].original.name;
                                self.simgSrc = imgReg.test(objPic[i].thumbnail.path) ? objPic[i].thumbnail.path : objPic[i].thumbnail.path + objPic[i].thumbnail.name;
                            }
							self.search.pageNo = data.pageNo;
						} else {
                            layer.msg(response.data.message);
						}

					})
			},

		},
		route: {
			data: function(transition) {
				this.getDate()
			},
		}
	};
</script>