<!--发票登录页面-->
<script>
    module.exports = {
        data: function () {
            return {
                // 小数位位数
                digit: 2,
                num: '',
                sNum:'',
                // 结算单汇总表
                settlepo: {
                    billno: '',
                },
                invoice:{
                  invoiceno:'',
                },
                backMessage: {
                    showDialog: 'N',
                    mList: [], // 提示信息
                },
                getsumlist: {
                    sumGoods: '',
                    sumInvoice: '',
                },
                // 明细数据
                detailList: [],
                getSupplierDoDetailWithReceiptInfo: [],
                getinvoiceList: [],
                // 选中的数据
                chGoodsList: [],
                supplierrowno: [],
                // 复选框监听
                chGoodsListListener: [],
                // 查询条件
                search: {
                    pageSize: 9999,
                    page: 1,
                    totalPages: 0,
                    //total: 0,
                    search_EQ_guid: '',
                    // 查询所有未勾对发票的商品:Y:已勾对的， N：未勾对的
                    goodStatus: 'N',
                    invoiceno: '',
                    billno: '',
                },
                /**
                 列表数据状态专门字段
                 goodStatus: N :查看未勾对的
                 Y :查看所有的
                 REG:查看当前发票的
                 */
                listStatus: {
                    title: '查看所有商品',
                    goodStatus: 'N',
                    titleAll: '查看所有商品',
                    titleClick: '您当前正在查看发票',
                    titleCheck: '查看所有未勾对发票的商品'
                },

                /**
                 当前操作的发票的信息
                 一个发票的格式：如下
                 newList:本次操作绑定的对象
                 oldList:之前操作的时候绑定的对象
                 newList 和 oldList 主要是用来更新汇总单明细中涉及到该发票的数据
                 index：表示在数组中的位置，刚开始是0
                 invoiceamount：发票金额
                 settleamount：商品明细金额
                 **/
                newInvoice: {
                    // issave：Y表示已经保存，N或者其它表示未保存
                    issave: 'N',
                    index: 0,
                    invoiceno: '',
                    invoiceamount: 0,
                    goodssum: 0,
                    settleamount: 0,
                    receiptNo: '',
                    reveiptValue: '',
                    dobillNo: '',
                    detailRowNo: [],

                    invoicenoOld: '', // 之前的发票号
                    invoiceamountOld: 0, // 之前的发票金额

                    newList: [],
                    oldList: []
                },
                newInvoicess: {
                    // issave：Y表示已经保存，N或者其它表示未保存
                    issave: 'N',
                    index: 0,
                    invoiceno: '',
                    invoiceamount: 0,
                    goodssum: 0,
                    settleamount: 0,
                    receiptNo: '',
                    reveiptValue: '',
                    dobillNo: '',
                    detailRowNo: [],

                    invoicenoOld: '', // 之前的发票号
                    invoiceamountOld: 0, // 之前的发票金额

                    oldList: []
                },
                // 当前页面的所有发票信息
                invoiceList: [],

                // 发票状态修改
                billstateParams: {
                    billstate: '',
                    guid: ''
                },
                // 手风琴查询
                searchDetail: {
                    pageSize: 5,
                    page: 1,
                    totalPages: 0,
                    //total: 0,
                    guid: '',
                    supplierGoodsguid: '',
                },
                invoiceamountsssss: '',
                upload: '',
            };
        },
        methods: {
            // 模板生成采购订单汇总
            sumByCollection: function (guid) {
                var self = this;
                var billno = this.$route.params.billno;
                Ajax.get('/trsettle/getSumInvoiceAmount' + '/' + billno)
                    .then(function (response) {
                        var data = response.data.data;
                        for (var i = 0; i < data.length; i++) {
                            self.getsumlist.sumInvoice = data[i].suminvoiceamount;
                            if (self.getsumlist.sumInvoice == null) {
                                self.getsumlist.sumInvoice = 0;
                            }
                        }
                    })
            },
            // 结算单明细表 - 查询所有商品、未勾对的商品 立继武
            getSettleDetailList: function () {
                var self = this; 
                self.settlepo.billno = this.$route.params.billno;
                Ajax.get('/trsettle/getSupplierDoDetailWithReceiptInfo' + '/' + this.$route.params.billno)
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('getSupplierDoDetailWithReceiptInfo', data);
                        self.chGoodsListListener.splice(0, self.chGoodsListListener.length);
                        var sum = 0;
                        for (var i = 0; i < self.getSupplierDoDetailWithReceiptInfo.length; i++) {
                            sum += self.getSupplierDoDetailWithReceiptInfo[i].amount * 100;
                        }
                        sum = sum / 100;
                        self.getsumlist.sumGoods = sum;
                        self.sumByCollection();
                        // 如果没有发票信息，那么需要新增加一张空的
                        self.invoiceList = new Array();
                        self.invoiceList.push({
                            // issave：Y表示已经保存，N或者其它表示未保存
                            issave: 'N',
                            index: 0,
                            invoiceno: '',
                            invoiceamount: 0,
                            goodssum: 0,
                            settleamount: 0,
                            invoicenoOld: '', // 之前的发票号
                            invoiceamountOld: 0, // 之前的发票金额
                            newList: [],
                            oldList: []
                        });
                    })
            },
            /*
              保存发票信息：新增、修改
              永远操作的是当前的发票信息；
              涉及到修改，要知道之前绑定的数据有哪些，新绑定的数据有哪些，因为有可能发票号也会发生变化，
              所以不能用发票号进行判断
            */
            saveInvoice:function(){
                var self = this;        
                if(self.chGoodsList.length == 0){
                    self.MessageBox.alert('请勾选商品!'); 
                    return ;           
                }
                // 判断发票金额一定要大于明细金额
                // if(self.num<self.sNum){
                //     self.MessageBox.alert('发票金额不能小于勾对的商品明细金额!'); 
                //     self.num = self.sNum;
                //     return ;           
                // } 
                // 判断发票号 
                if(self.invoice.invoiceno==''){
                    self.MessageBox.alert('请填写发票号!');
                    return ;           
                }  
                self.MessageBox({
                title: '提示',
                message: '您是否确认保存发票信息?',
                type: 'success',
                showCancelButton: true
              },function(action) {
                if(action=='confirm'){
                  self.saveInvoiceAjax(); 
                } 
              });      
              },
            //查询发票
            getqueryinvoice: function () {
                var self = this;
                Ajax.get('/trsettle/findReceiptListBySupplierDoBillNo' + '/' + this.$route.params.billno)
                    .then(function (response) {
                        var data = response.data; 
                        self.$set("getinvoiceList", data.data); 
                        // for (let a = 0; a < self.getinvoiceList.length; a++) {
                        //     self.$set("getinvoiceList[" + a + '].pic', ''); 
                        //     var picsStr = self.getinvoiceList[a].pictcontent;
                        //     var objPic = JSON.parse(picsStr);
                        //     for (var i = 0; i < objPic.length; i++) {
                        //         var path = objPic[i].thumbnail.path + objPic[i].thumbnail.name;
                        //         var json = '{"path":"' + path + '"}';
                        //         var obj = JSON.parse(json);
                        //         obj.pic = picsStr; 
                        //         self.$set("getinvoiceList[" + a + '].pic', obj); 
                        //     }
                        // } 
                    })
            }, 
            //删除发票
              delInvoices: function (InvoiceNo) {
                var self = this;  
                Ajax.post('/trsettle/deleteReceipt',{'receiptNo':InvoiceNo,'billno':this.$route.params.billno})
                    .then(function(response) { 
                  var data = response.data;    
                   if(response.data.errorCode==0){ 
                          self.$set("getinvoiceList", data.data);
                          self.getqueryinvoice();
                          self.sumByCollection(); 
                      }else{
                              self.MessageBox({
                            title: '警告',
                            message: response.data.message,
                            type: 'alert'
                          }, function(action) {});
                      } 
                })
              },
            //发票明细商品
            goodsList: function (InvoiceNo) {
                var self = this;
                self.search.billno = this.$route.params.billno;
                self.search.invoiceno = InvoiceNo;
                Ajax.get('/trsettle/getTrsupplierdoBysettle', self.search)
                    .then(function (response) {
                        var data = response.data;
                        self.$set('backMessage.showDialog', 'Y');
                        self.$set("backMessage.mList", data.data);
                    })
            },
            // 关闭信息提示弹出框
            closeDialog: function () {
                var self = this;
                this.$set('backMessage.showDialog', 'N');
                this.$set('backMessage.mList', []);
            },
            // 支撑saveInvoice的方法
            saveInvoiceAjax:function(){
                 var self = this;       
                var indexCurrent = self.newInvoice.index;// 当前发票在发票List中的索引位置  
                var rowno=[]; 
                // 把出库单汇总表一并发送给后台
                self.newInvoice.settlepo = self.settlepo;  
                for(var j=0;j<self.chGoodsListListener.length;j++){
                    rowno.push(self.chGoodsListListener[j].split('/')[1]);
                }      
                self.$set('newInvoicess.receiptNo', self.invoice.invoiceno); 
                self.$set('newInvoicess.reveiptValue', self.num); 
                self.$set('newInvoicess.dobillNo', this.$route.params.billno); 
                self.$set('newInvoicess.detailRowNo',[rowno]);  
                Ajax.get('/trsettle/bindReceipt',self.newInvoicess)
                  .then(function (response){
                    var data = response.data; 
                    if(data.errorCode==0){ 
                      self.MessageBox.alert(data.data);   
                      self.sumByCollection();   
                      self.getqueryinvoice(); 
                      self.chGoodsListListener =[];
                      self.invoice.invoiceno ='';
                     self.$set('num',0);  
                     self.invoiceList[indexCurrent].invoiceno = '';
                     self.invoiceList[indexCurrent].invoiceamount = 0; 
                    }else{
                      if(data.errorCode==99){ 
                        self.MessageBox.alert(data.message);  
                      }else{
                        self.MessageBox.alert('保存异常!'); 
                      }
                      
                      
                    }
                })              
              },
            // 提交结算对账单
            stateSettle: function (billstate) {
                var self = this;
                var msg = "提交";
                // 'S01',// 待提交，结算汇总单初始状态
                if (billstate == self.ctns.stbillstate1) {
                    msg = "撤销";
                }
                self.MessageBox({
                    title: '提示',
                    message: '您是否确定要' + msg + '？',
                    type: 'success',
                    showCancelButton: true
                }, function (action) {
                    if (action == 'confirm') {
                        // 结算单状态
                        self.billstateParams.billstate = billstate;
                        // 结算guid
                        self.billstateParams.guid = self.settlepo.guid;

                        Ajax.get('/trsettle/stateSettle', self.billstateParams)
                            .then(function (response) {
                                var data = response.data;
                                if (data.errorCode == 0) {
                                    self.settlepo.billstate = billstate;
                                    layer.msg(data.data);
                                } else {
                                    layer.msg('保存异常!');
                                }
                            })
                    }
                });
            },
            // 查询未勾对发票的商品
            getEmptyDetail: function () {
                var self = this;
                // 说明选择了某个发票，这个时候，只能修改发票，或者重新添加发票信息
                if (self.listStatus.goodStatus == 'REG') {
                    // layer.msg('查看发票时不能查看所有商品，或者查看未勾对的商品!');
                } else {
                    if (self.listStatus.goodStatus == 'N') {
                        self.$set('listStatus.goodStatus', 'Y');
                        self.$set('listStatus.title', self.listStatus.titleCheck);
                        $("#aEmpty").text(self.listStatus.title);
                    } else {
                        self.$set('listStatus.goodStatus', 'N');
                        self.$set('listStatus.title', self.listStatus.titleAll);
                        $("#aEmpty").text(self.listStatus.title);
                    }

                    // 告诉查询条件查询的数据是什么样子的啊
                    self.$set('search.goodStatus', self.listStatus.goodStatus);
                    Ajax.get('/trsettle/getSupplierDoDetailWithReceiptInfo' + '/' + this.$route.params.billno)
                        .then(function (response) {
                            var data = response.data.data;
                            self.$set('getSupplierDoDetailWithReceiptInfo', data.list);

                            // self.search.pageno = data.pageno;
                            // self.search.totalPages = data.totalPages;
                            // self.search.total = data.total;
                        })
                }
            },
            // 初始化发票信息
            initInvoice: function () {
                var self = this;
                // 如果是本结算单所有的发票，那么需要统计查询出来（废弃 - 因为本页面上列出的发票信息是本次操作的发票）

                // 如果没有发票信息，那么需要新增加一张空的
                if (self.invoiceList == null || self.invoiceList.length == 0) {
                    self.invoiceList = new Array();
                    self.invoiceList.push({
                        // issave：Y表示已经保存，N或者其它表示未保存
                        issave: 'N',
                        index: 0,
                        invoiceno: '',
                        invoiceamount: 0,
                        goodssum: 0,
                        settleamount: 0,

                        invoicenoOld: '', // 之前的发票号
                        invoiceamountOld: 0, // 之前的发票金额

                        newList: [],
                        oldList: []
                    });
                }
            },
            // 添加发票信息
            // addNewInvoice: function() {
            // 	var self = this;
            // 	// 判断当前发票是否进行了操作
            // 	var isModify = self.compareModify(self.newInvoice);
            // 	// 如果修改了，需要提示是否放弃之前的操作
            // 	if(isModify) {
            // 		self.MessageBox({
            // 			title: '提示',
            // 			message: '添加发票，会导致您刚才的操作丢失，是否丢弃刚才的操作？',
            // 			type: 'success',
            // 			showCancelButton: true
            // 		}, function(action) {
            // 			// 如果确定放弃，则需要把之前的数据全部恢复
            // 			if(action == 'confirm') {

            // 				self.createBeforeRecoveryData(self.newInvoice);
            // 			} else { // 表示不继续后续的操作
            // 				return;
            // 			}
            // 		});
            // 	} else { // 如果没有发生变化，直接切换到新的发票上就可以了
            // 		self.createBeforeRecoveryData(self.newInvoice);
            // 	}
            // },
            // 创建新的发票，并且放弃之前的发票内容
            // createBeforeRecoveryData: function(oldInvoice) {
            // 	var self = this;
            // 	self.$set('listStatus.goodStatus', 'N');
            // 	self.$set('listStatus.title', self.listStatus.titleAll);
            // 	$("#aEmpty").text(self.listStatus.title);

            // 	var indexOld = oldInvoice.index; // 旧的发票的序号
            // 	// 1)恢复之前操作的发票的信息
            // 	if(oldInvoice.issave == 'N') {
            // 		// 如果发票的长度大于1，那么需要从发票数组中把这张发票删除
            // 		if(self.invoiceList != null && self.invoiceList.length > 1) {
            // 			// 需要把这个删除掉
            // 			self.invoiceList.splice(indexOld, 1);
            // 		} else if(self.invoiceList != null && self.invoiceList.length == 1) {
            // 			// 这种情况就是只有一个未保存的发票信息，实际上他也不能切换到其它发票上
            // 			return;
            // 		}
            // 	} else if(oldInvoice.issave == 'Y') {
            // 		// 如果是之前的发票是已经保存了的发票，需要对发票的信息进行一次更新
            // 		self.invoiceList[indexOld].index = oldInvoice.index;
            // 		self.invoiceList[indexOld].invoiceno = oldInvoice.invoicenoOld;
            // 		self.invoiceList[indexOld].invoiceamount = oldInvoice.invoiceamountOld;
            // 		self.invoiceList[indexOld].newList = oldInvoice.oldList;
            // 		// 处理商品的数量
            // 		if(oldInvoice.oldList != null) {
            // 			self.invoiceList[indexOld].goodssum = oldInvoice.oldList.length;
            // 		} else {
            // 			self.invoiceList[indexOld].goodssum = 0;
            // 		}

            // 		// 计算明细金额
            // 		var amount = self.calAmount(oldInvoice.oldList);
            // 		// 结算金额
            // 		self.invoiceList[indexOld].settleamount = amount;
            // 	}

            // 	// 创建新的发票
            // 	var nextLength = 0;
            // 	if(self.invoiceList != null) {
            // 		nextLength = self.invoiceList.length;
            // 	}

            // 	self.invoiceList.push({
            // 		// issave：Y表示已经保存，N或者其它表示未保存
            // 		issave: 'N',
            // 		index: nextLength,
            // 		invoiceno: '',
            // 		invoiceamount: 0,
            // 		goodssum: 0,
            // 		settleamount: 0,

            // 		invoicenoOld: '', // 之前的发票号
            // 		invoiceamountOld: 0, // 之前的发票金额

            // 		newList: [],
            // 		oldList: []
            // 	});

            // 	self.$set('newInvoice', self.invoiceList[self.invoiceList.length - 1]);

            // 	// 把选择的商品信息也要一并抛弃
            // 	self.$set('chGoodsList', self.newInvoice.newList);
            // 	// 处理监听的选择
            // 	if(self.chGoodsListListener != null) {
            // 		// 首先清空
            // 		self.chGoodsListListener.splice(0, self.chGoodsListListener.length);
            // 		// 把之前选择的商品的guid 、rowno放到这里面
            // 		if(self.chGoodsList != null && self.chGoodsList.length > 0) {
            // 			for(var indexJ = 0; indexJ < self.chGoodsList.length; indexJ++) {
            // 				self.chGoodsListListener.push(self.chGoodsList[indexJ].billno + "" + self.chGoodsList[indexJ].rowno);
            // 			}
            // 		}
            // 	}

            // 	// 需要重新查询未冲抵的商品
            // 	self.getSettleDetailList();
            // },
            // 点击发票区域之后的效果 - 点击其他地方认为是要放弃当前的操作
            invoiceClick: function (invoiceIndex) {
                var self = this;
                // 如果当前点击的发票的index与目前操作的index不一致，如果当前信息已经被操作，那么需要判断是否放弃新编写的数据
                if (invoiceIndex != self.newInvoice.index) {
                    var isModify = self.compareModify(self.newInvoice);
                    // 如果修改了，需要提示是否放弃之前的操作
                    if (isModify) {
                        self.MessageBox({
                            title: '提示',
                            message: '切换到其它发票，会放弃您刚才对本发票做的操作，是否放弃？',
                            type: 'success',
                            showCancelButton: true
                        }, function (action) {
                            // 如果确定放弃，则需要把之前的数据全部恢复
                            if (action == 'confirm') {
                                // 发票的头部信息需要切换
                                $("#aEmpty").text("您现在查看的是发票：" + self.newInvoice.invoiceno);
                                /**
                                 切换发票操作记录
                                 1)恢复数据；
                                 2)并且把焦点切换到新的发票上，如果当前操作的是一张新发票，需要把新发票删除
                                 3)需要查询该发票对应的商品明细；
                                 params
                                 newIndex：新切换到的发票index
                                 oldIndex：之前的发票index
                                 */
                                self.recoveryData(invoiceIndex, self.newInvoice);

                                return;
                            }
                        });
                    } else { // 如果没有发生变化，直接切换到新的发票上就可以了
                        // 发票的头部信息需要切换
                        self.$set('listStatus.goodStatus', 'REG');
                        self.$set('listStatus.title', self.listStatus.titleClick);

                        $("#aEmpty").text(self.listStatus.title);
                        self.recoveryData(invoiceIndex, self.newInvoice);
                    }
                } else {
                    self.$set('listStatus.goodStatus', 'REG');
                    self.$set('listStatus.title', self.listStatus.titleClick);
                    $("#aEmpty").text(self.listStatus.title);

                    // 20160913 9:13 delete
                    self.recoveryData(invoiceIndex, self.newInvoice);
                }
            },
            /**
             切换发票操作记录
             1)恢复数据；
             2)并且把焦点切换到新的发票上，如果当前操作的是一张新发票，需要把新发票删除
             3)需要查询该发票对应的商品明细；
             params
             newIndex：新切换到的发票index
             oldIndex：之前的发票index
             */
            recoveryData: function (newIndex, oldInvoice) {
                var self = this;
                var indexOld = oldInvoice.index || '0'; // 旧的发票的序号
                // 1)恢复之前操作的发票的信息
                if (oldInvoice.issave == 'N') {
                    // 如果发票的长度大于1，那么需要从发票数组中把这张发票删除
                    if (self.invoiceList != null && self.invoiceList.length > 1) {
                        // 需要把这个删除掉
                        self.invoiceList.splice(indexOld, 1);
                    } else if (self.invoiceList != null && self.invoiceList.length == 1) {
                        // 这种情况就是只有一个未保存的发票信息，实际上他也不能切换到其它发票上
                        return;
                    }
                } else if (oldInvoice.issave == 'Y') { // 说明之前是已经保存过的发票信息
                    self.invoiceList[indexOld].invoiceno = oldInvoice.invoicenoOld;
                    self.invoiceList[indexOld].invoiceamount = oldInvoice.invoiceamountOld;
                    self.invoiceList[indexOld].newList = oldInvoice.oldList;
                    // 处理商品的数量
                    if (oldInvoice.oldList != null) {
                        self.invoiceList[indexOld].goodssum = oldInvoice.oldList.length;
                    } else {
                        self.invoiceList[indexOld].goodssum = 0;
                    }

                    // 计算明细金额
                    var amount = self.calAmount(oldInvoice.oldList);
                    // 结算金额
                    self.invoiceList[indexOld].settleamount = amount;
                }

                // 2)切换到新的发票上
                self.newInvoice = self.invoiceList[newIndex];

                // 把选择的商品信息也要一并抛弃
                self.chGoodsList = self.newInvoice.newList;
                // 处理监听的选择
                if (self.chGoodsListListener != null) {
                    // 首先清空
                    self.chGoodsListListener.splice(0, self.chGoodsListListener.length);
                    // 把之前选择的商品的guid 、rowno放到这里面
                    if (self.chGoodsList != null && self.chGoodsList.length > 0) {
                        for (var indexJ = 0; indexJ < self.chGoodsList.length; indexJ++) {
                            self.chGoodsListListener.push(self.chGoodsList[indexJ].guid + "" + self.chGoodsList[indexJ].rowno);
                        }
                    }
                }

                // 当前显示的所有发票都应该是这个发票的
                self.$set('getSupplierDoDetailWithReceiptInfo', self.chGoodsList);
            },
            // 比较是否修改了数据,返回true，说明修改了数据
            compareModify: function (invoiceObj) {
                // 判断发票号
                if (invoiceObj.invoiceno != invoiceObj.invoicenoOld) {
                    return true;
                }
                // 判断发票金额
                if (invoiceObj.invoiceamount != invoiceObj.invoiceamountOld) {
                    return true;
                }
                // 判断选中的商品明细
                if (invoiceObj.newList.sort().toString() != invoiceObj.oldList.sort().toString()) {
                    return true;
                }
                return false;
            },
            // 计算明细金额
            calAmount: function (mxList) {
                if (mxList == null || mxList.length == 0) {
                    return 0;
                }
                var amount = 0;
                for (var i = 0; i < mxList.length; i++) {
                    amount = amount + mxList[i].amount;
                }
                return amount;
            },
            // 选中之后的样式
            cssActive: function (divIndex) {
                $("#leftCtable .ct-row").each(function () {
                    if ($(this).attr("id") == ("div" + divIndex)) {
                        $("#div" + divIndex).attr("class", "ct-row active");
                    } else {
                        $(this).attr("class", "ct-row");
                    }
                });
            },
            slidedown: function (index) {
                var self = this;
                self.listTRSettleMV(index);

                $(".ct-row:eq(" + index + ")").addClass("active");
                $(".row-launch:eq(" + index + ")").slideDown(400, function () {

                });
            },
            slideup: function (index) {
                $(".row-launch:eq(" + index + ")").slideUp(400, function () {
                    $(".ct-row:eq(" + index + ")").removeClass('active');
                    $(".ct-col:eq(" + index + ")").removeClass('activate');
                });
            },
            // 结算单出库明细（手风琴效果）
            listTRSettleMV: function (index) {
                var self = this;

                var dpoObj = self.getSupplierDoDetailWithReceiptInfo[index];
                var billno = dpoObj.billno;
                var rowno = dpoObj.rowno;
                if (dpoObj.search == null) {
                    // 设置每组的查询条件
                    dpoObj.search = {
                        pageSize: 5,
                        page: 1,
                        totalPages: 0,
                        billno: billno,
                        rowno: rowno,
                    };
                }

                Ajax.get('/trsettle/listReceiptInfo', dpoObj.search)
                    .then(function (response) {
                        var data = response.data.data;

                        self.$set('getSupplierDoDetailWithReceiptInfo[' + index + '].mxList', data.list);

                        dpoObj.search.pageno = data.pageno;
                        dpoObj.search.totalPages = data.totalPages;
                        dpoObj.search.total = data.total;
                        self.$set('getSupplierDoDetailWithReceiptInfo[' + index + '].search', dpoObj.search);
                    });
            },

            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 = '';
            },
            //验证供应商单位系数
              supCheckInfo: function(po) {
                var self = this; 
                var st=/^[0-9]+(\.[0-9]+)?$/; 
                if (!st.test(po) || po < 0) {
                  self.MessageBox({title:'警告', message:"请输入大于0的数!", type: 'alert'},function(action){
                    if (action == 'confirm') { 
                        self.$set('num', 0);  
                      } 
                  });
                }  
              },


        },
        route: {
            activate: function () {
//				this.getSettleDetailList();
//				this.initInvoice();
//				this.getqueryinvoice();
            },
            data: function (transition) {
                this.getSettleDetailList();
                this.initInvoice();
                this.getqueryinvoice();
            },
        },
        watch: {
            // 实时监听复选框勾选变化 - 变化的是计算的金额
            'chGoodsListListener': function (val) {
                var self = this;     
                self.chGoodsList = [];
                // 当前勾选的商品明细
                for(var j=0;j<self.getSupplierDoDetailWithReceiptInfo.length;j++){
                  var good = self.getSupplierDoDetailWithReceiptInfo[j];   
                  if(JSON.stringify(val).indexOf(good.billno+'/'+good.rowno +'/'+ good.invGuid)!=-1){             
                    self.chGoodsList.push(good);  
                  }
                }     
                // 发票中勾对的明细  
                // 计算明细金额
                var amount = self.calAmount(self.chGoodsList);    
                self.num=  amount; 
                self.sNum = amount; 
              }
        },
    };
</script>
<template>

    <div class="container resource close-left-menu clearfix contaNEW">

        <div class="pop-banner clearfix">
            <!-- <div class="current-operate"></div> -->
            <div class="operate-btns">
                <a href="javascript:history.go(-1)" class="fbtn fb-return">返回</a>
                <!-- <a v-on:click="saveInvoice"
        v-if="'/supplier/trsettle:saveTrsettle' | myqx (settlepo.billstate=='S01')" 
        class="fbtn fb-save">保存</a>
      <a v-on:click="stateSettle('S02')" 
        v-if="'/supplier/trsettle:stateSettle' | myqx (settlepo.billstate=='S01')" 
        class="fbtn fb-submit">提交</a>
      <a v-on:click="stateSettle('S01')" 
        v-if="'/supplier/trsettle:cancelSettle' | myqx (settlepo.billstate=='S02')"
        class="fbtn fb-del">撤销</a> -->
            </div>
            <h3 class="current-module">出库单【{{settlepo.billno}}】发票录入</h3>
        </div>

        <!-- 左侧statr -->

        <div class="close-left no-border w634 pd0">

            <div class="pd-form mb-20" style="display: none;">
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn1" class="label">采购单位</label>
                        <div class="control">
                            <input type="text" id="cn1" v-model="settlepo.purchasercorpname" readonly="readonly"
                                   class="w530">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn1" class="label">结算单号</label>
                        <div class="control">
                            <input type="text" id="cn1" v-model="settlepo.settlebillno" readonly="readonly"
                                   class="w530">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn2" class="label">结算日期</label>
                        <div class="control">
                            <input type="text" id="cn1" v-model="settlepo.settledate | getYMD" readonly="readonly"
                                   class="w530">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn3" class="label">出库日期</label>
                        <div class="control control-date w630">
                            <input type="text" id="cn3" v-model="settlepo.begindate | getYMD" readonly="readonly"
                                   class="w220">
                            <span class="text-and w90">至</span>
                            <input type="text" id="cn3" v-model="settlepo.enddate | getYMD" readonly="readonly"
                                   class="w220">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group w280">
                        <label for="cn1" class="label">发票状态</label>
                        <div class="control">
                            <input type="text" id="cn1" v-model="settlepo.invoicestate | invoicestate"
                                   readonly="readonly" class="w200">
                        </div>
                    </div>
                    <div class="form-group w330">
                        <label for="cn2" class="label w100">单据状态</label>
                        <div class="control ml-125">
                            <input type="text" id="cn1" v-model="settlepo.billstate | settletype" readonly="readonly"
                                   class="w200">
                        </div>
                    </div>
                </div>
            </div>

            <a v-on:click="getEmptyDetail" id="aEmpty" class="btn-d btn-d-activate btn-d-lg" style="display: none;">{{listStatus.title}}</a>
            <div class=" w634  lh-30 text-color-blue f-size16">
                <b v-if="getsumlist.sumInvoice > getsumlist.sumGoods"> 商品总金额<em class="f-size16">
                    {{getsumlist.sumGoods}} </em>元，发票总金额<em class="text-color-blue f-size16">
                    {{getsumlist.sumInvoice}} </em>元</b>
                <b v-else> 商品总金额<em class="f-size16"> {{getsumlist.sumGoods}} </em>元，发票总金额<em class="f-size16">
                    {{getsumlist.sumInvoice}} </em>元</b>
            </div>
            <div id="leftCtable" class="ctable ct-parentr">
                <div class="ct-head">
                    <span class="ct-col w60">发票勾对</span>
                    <span class="ct-col w240">商品</span>
                    <span class="ct-col w70">数量</span>
                    <span class="ct-col w90">单价</span>
                    <span class="ct-col w70">金额</span>
                    <span class="ct-col w100">操作</span>
                </div>
                <div class="ct-row pb20"
                     v-if="getSupplierDoDetailWithReceiptInfo==null || getSupplierDoDetailWithReceiptInfo.length==0">
                    <div class="row-line">
                        <span class="ct-col w240">暂无符合条件的记录！</span>
                    </div>
                </div>
                <div class="ct-row" id="div{{$index}}" @click="cssActive($index)"
                     v-for="detailpo in getSupplierDoDetailWithReceiptInfo">
                    <div class="row-line">
		<span class="ct-col w60">
                            <div class="checkbox-control" v-if="listStatus.goodStatus=='N'" >
                            <div class="checkbox-control">
                            <input type="checkbox" :id="detailpo.billno+'/'+detailpo.rowno+'/'+detailpo.invGuid" v-model="chGoodsListListener" :value="detailpo.billno+'/'+detailpo.rowno+'/'+detailpo.invGuid">
                            <label class="checkbox" :for="detailpo.billno+'/'+detailpo.rowno+'/'+detailpo.invGuid">{{ $index + 1 }}</label>
                          </div>
                          </div>
                        </span>
                        <span class="ct-col w240 t-left break-it"> 
                                <span class=" dis-inline w180 p-lr-10 break">
                                {{detailpo.supplierGoodscode}}<br>
                                    <span class="p-tit-green">{{detailpo.supplierGoodsname}}</span>
                                    <br> {{detailpo.purchaseUnit}}
                                    <br> {{detailpo.producer}}
                                    <br> {{detailpo.registkey}}
                                </span>
                        </span>
                        <span class="ct-col w70">
           {{detailpo.supplierPesentqty==null?0:detailpo.supplierPesentqty}}{{detailpo.unit}}
          </span>
                        <span class="ct-col w90">
           {{detailpo.supplierPrice==null?0:detailpo.supplierPrice | numDigit 2 | numFmt}}元
          </span>
                        <span class="ct-col w70">
            {{detailpo.amount==null?0:detailpo.amount | numDigit 2 | numFmt}}元
          </span>
                        <span class="ct-col w100"><a @click="slidedown($index)" class="btn button-green">明细</a></span>
                    </div>
                    <div class="row-launch clearfix" style="display: none">
                        <table class="itable  mb-10">
                            <thead>
                            <tr>
                                <th class="w40">序号</th>
                                <th class="w50">发票号</th>
                                <th class="w80">发票金额</th>
                                <th class="w110">大写金额</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-if="detailpo.mxList.length<=0">
                                <td colspan="8">暂无符合条件的记录</td>
                            </tr>
                            <tr v-else v-for="mx in detailpo.mxList">
                                <td>{{$index+1}}</td>
                                <td>{{mx.invoiceNo}}</td>
                                <td>{{mx.invoiceAmount}}</td>
                                <td>{{mx.invoiceAmount | numUpper}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pagination page-line" v-if="detailpo.mxList">
                            <pagination @page-change="listTRSettleMV($index)" :page-no.sync="detailpo.search.page"
                                        :total-pages.sync="detailpo.search.totalPages">
                            </pagination>
                        </div>
                        <div class="zip" @click="slideup($index)"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧start -->
        <div class="close-right border-left-blue2 pd0-15">
            <div class="fheader no-bottom" style="display: none;">
                <h4 class="no-icon">
                    本单发票总览
                </h4>
            </div>

            <div class="ctable" style="display: none;">
                <div class="ct-row">
                    <div class="row-line">
                        <span class="ct-col w120">结算金额</span>
                        <span class="ct-col w140 font22">{{settlepo.amount}}</span>
                        <span class="ct-col w50">元</span>
                    </div>
                    <div class="row-line">
                        <span class="ct-col w120">已开发票金额</span>
                        <span class="ct-col w140 font22">{{settlepo.inovicedamount}}</span>
                        <span class="ct-col w50">元</span>
                    </div>
                    <div class="row-line">
                        <span class="ct-col w120">已开发票张数</span>
                        <span class="ct-col w140 font22">{{settlepo.inovicednum}}</span>
                        <span class="ct-col w50">张</span>
                    </div>
                    <div class="row-line text-color-red">
                        <span class="ct-col w120">未开发票金额</span>
                        <span class="ct-col w140 font22">{{settlepo.amount-settlepo.inovicedamount}}</span>
                        <span class="ct-col w50">元</span>
                    </div>
                </div>
            </div>

            <!-- 发票信息statrt -->

            <div class="fheader bd-color-gray2  mb-0" style="padding: 0px 0 10px;">
                <h4 class="no-icon">
                    发票信息
                </h4>
            </div>

            <div>   <!-- v-for="invoice in invoiceList" -->
                <div class="fheader no-bottom text-color-gray">
                    <h4 class="no-icon">
                        第<span class="ctable-em f-size26 fW" style='margin:0 5px;'>{{getinvoiceList.length+1}}</span>张
                    </h4>
                </div>

                <div class="ctable ct-parent  box-shadow" id="invoice{{$index}}" @dblclick="invoiceClick($index)">
                    <div class="table-no-border bgc-gray-eb h-490 pd20">
                        <div class="row-launch invoice-show pd0 border-blue pd10">
                            <div class="invoice-item clearfix pd0">
                                <div>已勾商品<span class="show-price text-color-blue fW" style='margin:0 5px;'>{{chGoodsList.length}}</span>条
                                </div>
                                <div class="w230 h-30">
                                    <section class="fl">发票金额</section>
                                    <section class="fr">
                                        <span class="show-price fW"
                                              style='margin:0 5px;'>{{sNum | numDigit 2 | numFmt}}</span>元
                                    </section>
                                </div>
                                <div class="ctable-line h-100">
                                    <section class="big-sums bgc-gray-eb">大写金额</section>
                                    <div class="big-sum h-80">
                                        {{sNum | numUpper}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- <div class="pro-img form-add clearfix mt-15">
                            <div class="pic-container ">
                                <section class="has-image" v-if="upload">
                                    <div class="pic-contain" :style="{backgroundImage:'url('+upload.path+')'}"
                                         style="position:relative;background-repeat: no-repeat;background-size:  100% auto !important;">
                                        <div class="close-win" v-on:click="deleteimg()"></div>
                                    </div>
                                    <div class="license-btn icon fr">
                                        <imagebox v-bind:imgarr="[{img:upload.path}]">
                                            <span class="fbtn magnify-btn" title="放大"></span>
                                        </imagebox>
                                    </div>
                                </section>
                                <section id="pic0" style="margin-right:5px;" v-else>
                                    <uploads v-bind:class="['pic-contain']" :display="'block'"
                                             v-on:file-change="fileChange" v-bind:multiple="false"
                                             v-bind:readonly="readonly">
                                    </uploads>
                                    <p class="pic-desc t-center pt10">请上传发票图片信息</p>
                                </section>
                            </div>
                        </div> -->

                        <div class="clearfix  mt-20">
                            <div class="ctable-line">
                                <section class="fl t-right">发票号</section>
                                <section class="fr">
                                    <input class="w194" type="text"  id="invoiceno{{$index}}" v-model="invoice.invoiceno">
                                </section>
                            </div>
                            <div class="ctable-line mt-10">
                                <section class="fl">发票金额</section>
                                <section class="fr">
                                    <input class="w180 t-right" type="text" v-model="num | numDigit 2 | numFmt"
                                            @change="supCheckInfo(num)">元
                                </section>
                            </div>
                            <div class="ctable-line h-110">
                                <section class="big-sums bgc-gray-eb">大写金额</section>
                                <div class="big-sum div-border h-80">
                                    {{num | numUpper}}
                                </div>
                            </div>
                            <div class="ctable-line">
                                <a v-on:click="saveInvoice" class="btn button-green fr">保存</a>
                            </div>
                        </div>

                    </div>
                </div>
                <div>
                    <!-- 发票信息end -->

                </div>
            </div>

             <div v-for="invoices in getinvoiceList" v-show="getinvoiceList.length>0" class="div-border h-115 mt-20 pd10">
              <div class="ctable-line" class="lh-30 h-30"> 
                <section class="fl w70">发票号</section> 
                    <div>
                           {{invoices.InvoiceNo}}
                    </div>
              </div>
              <div class="ctable-line lh-30 h-30"> 
                <section class="fl w70">发票金额</section>
                    <div>
                           {{invoices.InvoiceAmount | numDigit 2 | numFmt}} 元
                    </div>
              </div>
              <div class="ctable-line lh-30 h-30"> 
                <section class="fl w70">大写金额</section>
                    <div>
                           {{invoices.InvoiceAmount | numUpper}}
                    </div>
                    <div class="from-button"  style="position: absolute;; z-index: 9; margin-top: -65px; margin-left: 200px; width:100px;">
                     <a href="javascript:;" class="green-button p-lr-10" v-on:click="goodsList(invoices.InvoiceNo)">明细<i>|</i></a>
                     <a href="javascript:;" class="red-button p-lr-10" v-on:click="delInvoices(invoices.InvoiceNo)">删除</a>
                   </div> 
              </div>
           </div> 
        </div>

            <!-- <div v-for="invoices in getinvoiceList" v-show="getinvoiceList.length>0"
                 class="div-border h-240 mt-20 pd10">
                <div class="ctable-line" class="lh-30 h-30">
                    <section class="fl w70">发票号</section>
                    <div>
                        {{invoices.InvoiceNo}}
                    </div>
                </div>
                <div class="ctable-line lh-30 h-30">
                    <section class="fl w70">发票金额</section>
                    <div>
                        {{invoices.InvoiceAmount}}
                    </div>
                </div>

                <div class="ctable-line lh-30 h-30">
                    <section class="fl w70">大写金额</section>
                    <div>
                        {{invoices.InvoiceAmount | numUpper}}
                    </div>
                </div>
                <div class="ctable-line ">

                    <div class="pic-container ">
                        <section class="has-image" v-if="invoices.pictcontent">
                            <div class="img" :style="{backgroundImage:'url('+invoices.pic.path+')'}"
                                 style="position:relative; height: 80px; background-repeat: no-repeat; background-position: left center; margin-top: 20px;">
                            </div>
                            <div class="license-btn icon fl"
                                 style="position: absolute; z-index: 9; margin-top: -35px; margin-left: 150px; width:40px; height:35px;">
                                <imagebox v-bind:imgarr="[{img:invoices.pic.path}]">
                                    <span class="fbtn magnify-btn pt0" style="padding: 5px 10px;" title="放大"></span>
                                </imagebox>
                            </div>
                            <div class="from-button fr"
                                 style="position: absolute; z-index: 9; margin-top: -35px; margin-left: 200px; width:98px;">
                                <a href="javascript:;" class="green-button p-lr-10"
                                   v-on:click="goodsList(invoices.InvoiceNo)">明细<i>|</i></a>
                                <a href="javascript:;" class="red-button p-lr-10"
                                   v-on:click="delInvoices(invoices.InvoiceNo)">删除</a>
                            </div>
                        </section>
                    </div>
                </div>

            </div> -->

        </div>

        <!--star 9-9 提示缺货信息列表-->
        <div class="modal " :class="backMessage.showDialog=='Y'?'':'hide'">
            <div class="container resource">
                <div class="audit-detail w700" style="margin:150px auto;  ">
                    <span class="close-win" v-on:click="closeDialog()"></span>
                    <div class="status-process wbe-0 clearfix" style="padding:0px 15px 0px 15px;">
                        <div class="ctable" style="max-height:400px; overflow-y:auto;">
                            <div class="ct-head">
                                <span class="ct-col w50">序号</span>
                                <span class="ct-col w270">商品</span>
                                <span class="ct-col w80 t-right">数量</span>
                                <span class="ct-col w100 t-right">单价</span>
                                <span class="ct-col w100 t-right">金额</span>
                            </div>
                            <div class="ct-row" v-for="mx in backMessage.mList">
                                <div class="row-line">
								<span class="ct-col w50  v-top">
                                  {{$index+1 | getIndex}} 
                                </span>
                                    <span class="ct-col w270 t-left break-it  v-top">
                                  <div class="p-lr-10 break fl  w160">
                                    {{mx.supplierGoodscode}}
                                    <br>
                                    <span class="p-tit-green">{{mx.supplierGoodsname}}</span>
								<br> {{mx.supplierGoodsspec}}
								<br> {{mx.manufacturer}}
								<br>{{mx.registkey}}</div>
							</span>

                                    <!--数量-->
                                    <span class="ct-col w80 t-right  v-top">
                                  <span class="table-detail-text">
                                    {{mx.supplierPesentqty==null ?'0':mx.supplierPesentqty}}
                                  </span>
							</span>
                                    <!--单价-->
                                    <span class="ct-col w100 t-right  v-top">
                                  <span class="table-detail-text">
                                    {{mx.supplierPrice==null ?'0':mx.supplierPrice}}
                                   </span>
							</span>
                                    <!--金额-->
                                    <span class="ct-col w100 t-right">
                                  <span class="table-detail-text">
                                    {{mx.supplierPesentqty==null ?'0':(mx.supplierPesentqty * mx.supplierPrice).toFixed(1) }}
                                    </span>
							</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--star 9-9 受理弹出-->

</template>