<template>
	<div class="container resource close-left-menu contaNEW">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a @click="confirm" class="fbtn fb-save ml-10 mr-10">保存</a>
				<!--<a @click="confirm" class="fbtn fb-submit ml-10 mr-10">提交</a>-->
				<!-- <a  @click="exportsuppliergoodsPO"  class="fbtn fb-del ml-10 mr-10">取消分配</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">
						<datepicker :target.sync="search.invoicedate | getYMD" inpclass='inp4'></datepicker>

						<!--<input type="text" v-model="search.invoicedate" 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="search.invoiceno" 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="search.invoicemoney" 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="search.memo" class="inp2">
					</div>
				</div>
				<div class="form-group form-label  mb-15 w1003">
					<label for="cn24" class="label">生产厂商</label>

					<div class="control mt-15 h-30 ">
						<input id="cn1" type="text" v-model="search.name" title='生产厂商' @click='state=true' class="inp4">
						<div class="select-template" id="searchMore" v-if='state'>
							<div class="div-select before-none">
								<ul style="z-index:6;top:0px;width:480px; margin-top: 0px;">
									<li class="div-select-item pl10 hover-none" style='line-height:20px;height:auto;'>
										<table class="itable itable-thead-13px itable-td-long-text">
											<thead id="t_header">
												<tr>
													<th class="w50 ">序号</th>
													<th class="w130 ">厂商名称</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="item in findproducerList" @click='goodsData(item)' track-by="$index">
													<td class="w50">
														<div>{{$index+1}}</div>
													</td>
													<td class=" w120">{{item.producer}}</td>
												</tr>
											</tbody>
										</table>
									</li>
									<li class="div-select-item pl10" v-show="findproducerList.length==0 || findproducerList == undefined">
										<span style="width:100%; text-align: center;">未查询到结果！</span>
									</li>
								</ul>
							</div>
						</div>
					</div>

				</div>

				<div class="form-group form-label  mb-15">
					<form class="search-bar  clearfix mt-15" active="###">
						<div class="search-btn fr cur-poin" @click="getDate()">
						</div>
						<input class="fl" style="width: 422px; margin-top: -33px;" type="text" placeholder="商品编号、名称、助记码" v-model="search.goodsinfo">
					</form>
				</div>
			</section>

			<section class="w480 ml-480 fl pl40">
				<div class="form-group clearfix">
					<div class="control w300 fl">
						<div class="pro-img w180  fl">
							<div class="pic-container ">
								<section style="width: 100%; height: 87px; margin-bottom: 10px; " class=" fl" v-if="upload">
									<div class="pic-contain w180 h-80" :style="{backgroundImage:'url('+upload.path+')'}" style="position:relative;">
										<div class="close-win" v-on:click="deleteimg()"></div>
									</div>
								</section>
								<section id="pic0" style="margin-right:5px; height: 87px;" v-else>
									<uploads v-bind:class="['pic-contain w180 h-80']" :display="'block'" v-on:file-change="fileChange" v-bind:multiple="false" v-bind:readonly="readonly">
									</uploads>
								</section>

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

					</div>

				</div>
			</section>

		</div>

		<div style="position: relative;" class="clearfix">
			<section class="in-block bg_eb  w480 factory-li pl10 pr10">
				<table class="itable itable-thead-13px">
					<thead>
						<tr>
							<th class="w50 ">序号</th>
							<th class="w80 ">商品编号</th>
							<th class="w100 ">商品名称</th>
							<th class="w50 ">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="goodL in findgoodsByProducer">
							<td>
								{{ $index + 1 }}
							</td>
							<td>{{ goodL.goodscode }}</td>
							<td class="t-left pr10">
								<span class="p-tit-green">
									{{goodL.goodsname}}
								</span>
								</br>
								{{goodL.goodsspec}}</br>
								{{goodL.registkey}}
							</td>
							<td @click="addGood(goodL)">
								<a class="btn button-green">添加</a>
							</td>
						</tr>
					</tbody>
				</table>

				<div class="pagination" style="margin: 20px 0">
					<pagination @page-change="getDate()" :class="['m-20-0']" :page-no.sync="search.pageNo" :total-pages.sync="search.totalPages"></pagination>
				</div>
			</section>
			<section class="in-block w10 box-center ">
				<span>&gt;&gt;</span>
			</section>
			<section class="in-block bg_eb w480 fr pl10 pr10" style="height: 100%;">
				<table class="itable itable-thead-13px ">
					<thead>
						<tr>
							<th class="w40 ">序号</th>
							<th class="w130 ">商品编号</th>
							<th class="w40 ">商品名称</th>
							<th class="w40 ">数量</th>
							<th class="w50 ">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="goodR in addGoods">
							<td>
								{{ $index + 1 }}
							</td>
							<td>{{ goodR.goodscode }}</td>
							<td class="t-left pr10">
								<span class="p-tit-green">
									{{goodR.goodsname}}
								</span>
								</br>
								{{goodR.goodsspec}}</br>
								{{goodR.registkey}}
							</td>
							<td>
								<input type="number" v-model="goodR.invoicenum" />
							</td>
							<td>
								<a class="btn  button-red" @click="removeGood($index)">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="pagination" style="margin: 20px 0">
					<pagination @page-change="getSupDoods()" :class="['m-20-0']" :page-no.sync="search1.pageNo" :total-pages.sync="search1.totalPages"></pagination>
				</div>
			</section>
		</div>

</template>

<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: '',
				},

				upload: '', //上传图片
				findproducerList: '', //生产厂商名字
				findgoodsByProducer: '', // 商品列表
				addGoods: [],
				invoice: '',
				state: false,

			};
		},
		watch: {
			'search.name': function() {
				var self = this;
				self.init();
				self.findgoodsByProducer = '';
			},
		},
		methods: {
			fileChange: function(data) {
				var backObj = JSON.parse(data), imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径
				data = backObj.data;
				for(var i = 0; i < data.length; i++) {
					var path = imgReg.test(data[i].thumbnail.path) ? data[i].thumbnail.path : data[i].thumbnail.path + data[i].thumbnail.name;
					var json = '{"path":"' + path + '"}';
					var obj = JSON.parse(json);
					obj.pic = JSON.stringify(data);
					this.$set('upload', obj);
				}
			},
			deleteimg: function() {
				this.upload = '';
			},
			init: function() {
				var self = this;
				if(!self.search.name) {
					return;
				}
				Ajax.post('/supplierReport/findproducerList', {
						'name': self.search.name
					})
					.then(function(response) {
						if(response.data.errorCode == 0) {
							self.$set('findproducerList', response.data.data);
						} else {
							layer.msg(response.data.message);
						}
					})
			},
			// 查询的数据结果出来
			goodsData: function(data) {
				var self = this;

				if(data.producer != self.search.manufacturer) {
					self.MessageBox({
						title: '提示',
						message: '确定更换生产厂商,右侧商品将被删除',
						type: 'alert',
						showCancelButton: true
					}, function(action) {
						if(action == "confirm") {
							self.addGoods = [];
						} else {
							return;
						}
					})
				}

				self.search.name = data.producer;
				self.state = false;
			},
			//左侧商品列表
			getDate: function() {
				var self = this;
				if(!self.search.name) {
                    layer.msg('请选择生产厂商');
                    return;
				}

				Ajax.post('/supplierReport/findgoodsByProducer', self.search)
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							self.$set('findgoodsByProducer', data.list);
							self.search.pageNo = data.pageNo;
							//							self.search.totalPages = data.totalPages;
							//							self.search.total = data.total;

						} else {
							layer.msg(response.data.message);
						}

					})
			},
			//右侧商品列表
			addGood: function(item) {
				var self = this;
				for(let i = 0; i < self.addGoods.length; i++) {

					if(item.guid == self.addGoods[i].guid) {
                        layer.msg('请勿重复添加');
                        return;
					}
				}

				item.goodsguid = item.guid;
				self.addGoods.push(item);
			},
			removeGood: function(i) {
				var self = this;
				self.addGoods.splice(i, 1);
			},
			//保存分配
			confirm: function() {

				var self = this;
				if(!self.search.invoicedate) {
					layer.msg('请输入发票日期');
					return;
				}
				if(!self.search.invoiceno) {
					layer.msg('请输入发票号');
					return;
				}
				if(!self.search.invoicemoney) {
					layer.msg('请输入发票金额');
					return;
				}

				if(!self.search.name) {
					layer.msg('请输入生产厂商');
					return;
				}
				if(!self.upload.pic) {
					layer.msg('请上传图片');
					return;
				}
				if(!self.search.name) {
					layer.msg('请输入生产厂商');
					return;
				}
				if(self.addGoods.length <= 0) {
					layer.msg('请添加商品');
					return;
				}
				for(let i = 0; i < self.addGoods.length; i++) {
					if(!self.addGoods[i].invoicenum) {
						layer.msg('请输入添加商品数量');
						return;
					}

				}

				self.search.invoicepic = self.upload.pic;
				self.search.manufacturer = self.search.name;

				Ajax.post('/supplierReport/updateTrsupplierMir', {
						'trsuppliermir': self.search,
						'trsuppliermirdetails': self.addGoods,
					})
					.then(function(response) {
						var data = response.data.data;

						if(response.data.errorCode == 0) {
							self.MessageBox({
								title: '提示信息',
								message: '保存成功',
								type: 'alert'
							}, function(action) {
								window.location.reload();
								self.$route.router.go('/factoryInvoice');
							});
						} else {
							layer.msg(response.data.message);
						}
					})
			},

			//左侧商品列表
			getfindmirDetailByGuid: 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);
							self.$set('search', data.trsuppliermir);
							self.$set('search.name', data.trsuppliermir.manufacturer);
							self.$set('addGoods', data.trsuppliermirdetails);
							self.$set('upload.pic', self.search.invoicepic);

							var objPic = JSON.parse(self.search.invoicepic);
							for(var i = 0; i < objPic.length; i++) {
								self.$set('upload.path', objPic[i].thumbnail.path);
							}

							self.search.page = 1;
							self.search.pageNo = 0;
							self.search.pageSize = 10;

						} else {
							layer.msg(response.data.message);
						}

					})
			},

		},
		route: {

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