<!--发票登录页面-->
<script >

  module.exports = {
    data: function () {
      return {
        // 小数位位数
        digit:2,
        // 结算单汇总表
        settlepo:{},
        // 明细数据
        detailList: [],
        // 选中的数据
        chGoodsList:[],
        // 复选框监听
        chGoodsListListener:[],
        // 查询条件
        search: {
          pageSize: 9999,
          page: 1,
          totalPages: 0,
          //total: 0,
          search_EQ_guid: '',
          // 查询所有未勾对发票的商品:Y:已勾对的， N：未勾对的
          goodStatus:'N',
        },
        /**
           列表数据状态专门字段
           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,

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

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

        // 发票状态修改
        billstateParams:{
          billstate:'',
          guid:''
        },
        // 手风琴查询
        searchDetail: {
          pageSize: 5,
          page: 1,
          totalPages: 0,
          //total: 0,
          guid: '',
          supplierGoodsguid:'',
        },
      };
    },
    methods: {
      // 结算单汇总表
      getSettle: function () {
        var self = this;
        // 结算单guid
        self.search.search_EQ_guid = self.$route.params.guid;

        Ajax.get('/trsettle/getTrsettle', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('settlepo',data);
        })          
      },
      // 结算单明细表 - 查询所有商品、未勾对的商品
      getSettleDetailList:function(){
        var self = this;
        // 结算单guid
        if(self.search.search_EQ_guid!=''){
          self.search.search_EQ_guid = self.$route.params.guid; 
        }

        Ajax.get('/trsettle/listTrsettledetail', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('detailList',data.list);

            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;

        })          
      },
      /*
        保存发票信息：新增、修改
        永远操作的是当前的发票信息；
        涉及到修改，要知道之前绑定的数据有哪些，新绑定的数据有哪些，因为有可能发票号也会发生变化，
        所以不能用发票号进行判断
      */
      saveInvoice:function(){
        var self = this;       
        // 取出发票信息，重新赋值
        self.$set('newInvoice.invoiceno',$("#invoiceno"+self.newInvoice.index).val());

        var invoice = self.newInvoice; 
        // 判断发票金额一定要大于明细金额
        if(invoice.invoiceamount<invoice.settleamount){
            layer.msg('发票金额不能小于勾对的商品明细金额，请确认');
            return ;           
        }

        // 判断发票金额一定要大于明细金额
        if(invoice.invoiceno==''){
            layer.msg('请填写发票号!');
            return ;           
        }

        /**
          保存判断处理
              1）如果勾选的商品明细为空，并且是一张未保存过的发票，那么提示用户需要先勾选商品
              2）如果勾选的商品明细为空，但是是一张已经保存过的发票，那么会提示用户会清空发票的明细
              3）如果勾选的商品明细不为空，则提示是否需要保存
        */
        if(invoice.newList==null || invoice.newList.length==0){
          if(invoice.issave=='N'){// 标识是未保存
            layer.msg('您未勾对商品，不能保存发票!');
            return ;           
          }else if(invoice.issave=='Y'){// 之前已保存
            self.MessageBox({
              title: '提示',
              message: '您清空了勾对的商品信息，点击保存会清空之前勾对的商品，是否继续？',
              type: 'success',
              showCancelButton: true
            },function(action) {
              if(action=='confirm'){
                self.saveInvoiceAjax();
              } 
            }); 
          }
        }else{// 首次添加，或者修改
          self.MessageBox({
            title: '提示',
            message: '您是否确认保存发票信息?',
            type: 'success',
            showCancelButton: true
          },function(action) {
            if(action=='confirm'){
              self.saveInvoiceAjax();
            } 
          });           
        }
      },
      // 支撑saveInvoice的方法
      saveInvoiceAjax:function(){
        var self = this;       
        var indexCurrent = self.newInvoice.index;// 当前发票在发票List中的索引位置

        // 把出库单汇总表一并发送给后台
        self.newInvoice.settlepo = self.settlepo;
        Ajax.post('/trsettle/saveTrsettle', self.newInvoice)
          .then(function (response){
            var data = response.data;
            if(data.errorCode==0){
              layer.msg(data.data);
              /**
                保存成功之后的一些处理（保存成功之后，需要把发票置为查看状态）：
                1）修改发票的状态为已经保存‘Y’
                2）
              */
              // issave：Y表示已经保存，N或者其它表示未保存
              self.$set('newInvoice.issave','Y');
              self.$set('newInvoice.invoicenoOld',self.newInvoice.invoiceno);
              self.$set('newInvoice.invoiceamountOld',self.newInvoice.invoiceamount);
              self.$set('newInvoice.oldList',self.newInvoice.newList);
              self.$set('newInvoice.settlepo',{});

              // 清空新的数据，把数据添加到旧数据中
              self.$set('invoiceList['+indexCurrent+'].issave','Y');
              self.$set('invoiceList['+indexCurrent+'].invoicenoOld',self.invoiceList[indexCurrent].invoiceno);
              self.$set('invoiceList['+indexCurrent+'].invoiceamount',self.invoiceList[indexCurrent].settleamount);
              self.$set('invoiceList['+indexCurrent+'].invoiceamountOld',self.invoiceList[indexCurrent].invoiceamount);
              self.$set('invoiceList['+indexCurrent+'].oldList',self.invoiceList[indexCurrent].newList);

              // 调用一下点击发票的事件，需要把发票切换到当前的上边
              self.invoiceClick(indexCurrent);

              self.getSettle();

            }else{
              layer.msg('保存异常!');
            }
        })              
      },
      // 提交结算对账单
      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/listTrsettledetail', this.search)
            .then(function (response){
              var data = response.data.data;
              self.$set('detailList',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].guid + "" + self.chGoodsList[indexJ].rowno);
            }
          }
        }

        // 需要重新查询未冲抵的商品
        self.getSettleDetailList();

      },
      // 
      /*
        删除发票信息
        inOjb : 其实需要的是发票的序号就可以了
      */
      delInvoice:function(index){
        var self = this;
        var inObj = self.invoiceList[index];// 当前操作的发票
        // 必须通过旧发票号才能删除，删除内容包括页面元素、数据库中对应的发票和发票明细信息
        if(inObj.issave=='N'){// 如果没有保存，那么直接删除就可以了
          if(self.invoiceList!=null && self.invoiceList.length>1){
            self.invoiceList.splice(inObj.index,1);

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

            layer.msg('删除成功！');
          }else{
            layer.msg('该发票未保存，不需要删除！');
          }
        }else{// 如果已经保存，则需要先从数据库清空，然后再清楚页面元素
          self.MessageBox({
            title: '提示',
            message: '您是否确定要删除该发票吗？',
            type: 'success',
            showCancelButton: true
          },function(action) {
            if(action=='confirm'){

              Ajax.get('/trsettle/deleteSettle', {guid:self.settlepo.guid,invoice:inObj.invoicenoOld})
                .then(function (response){
                  var data = response.data;
                  if(data.errorCode==0){
                    self.invoiceList.splice(inObj.index,1);     
                    self.$set('newInvoice',self.invoiceList[self.invoiceList.length-1]);        
                  }else{
                    layer.msg('删除异常!');
                  }
              }) 
            } 
          }); 
        }
      },
      // 点击发票区域之后的效果 - 点击其他地方认为是要放弃当前的操作
      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('detailList',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].settleamount;
        }
        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.detailList[index];
        var guid = dpoObj.guid;
        var purchaseGoodsguid = dpoObj.purchaseGoodsguid;
        if(dpoObj.search==null){
          // 设置每组的查询条件
          dpoObj.search = {
            pageSize:5,
            page: 1,
            totalPages: 0,
            guid:guid,
            purchaseGoodsguid:purchaseGoodsguid,
          };
        }

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

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

            dpoObj.search.pageno = data.pageno;
            dpoObj.search.totalPages = data.totalPages;
            dpoObj.search.total = data.total;
            self.$set('detailList['+index+'].search',dpoObj.search);
        });
      },
    },
    route: {
      activate: function () {
        this.getSettle();
        this.getSettleDetailList();
        this.initInvoice();
      }
    },
    watch:{
      // 实时监听复选框勾选变化 - 变化的是计算的金额
      'chGoodsListListener': function (val) {
        var self = this;
        self.chGoodsList = [];
        // 当前勾选的商品明细
        for(var j=0;j<self.detailList.length;j++){
          var good = self.detailList[j];
          if(JSON.stringify(val).indexOf(good.guid+''+good.rowno)!=-1){            
            self.chGoodsList.push(good);
          }
        }
        // 需要给当前发票的实际对应的发票信息赋值选中的内容
        var newInvoice = self.newInvoice;
        var innerInvoice = self.invoiceList[newInvoice.index];

        /**
          发票数组中的发票信息
        */
        // 发票中勾对的明细
        innerInvoice.newList = self.chGoodsList;
        // 计算明细金额
        var amount = self.calAmount(self.chGoodsList);
        innerInvoice.settleamount = amount;
        innerInvoice.invoiceamount = amount;  


        /**
          当前操作的发票的信息
        */
        // 绑定新处理的明细
        newInvoice.newList = self.chGoodsList;
        // 明细金额
        newInvoice.settleamount = amount;
        // 发票金额
        newInvoice.invoiceamount = 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 v-on:click="saveInvoice"  
        v-if="'/supplier/trsettle:saveTrsettle'" 
        class="fbtn fb-save">保存</a>
      <a v-on:click="stateSettle('S02')" 
        v-if="'/supplier/trsettle:stateSettle'" 
        class="fbtn fb-submit">提交</a>
      <a v-on:click="stateSettle('S01')" 
        v-if="'/supplier/trsettle:cancelSettle'"
        class="fbtn fb-del">撤销</a>
    </div> 
    <h3 class="current-module">结算单【{{settlepo.settlebillno}}】发票录入</h3>
  </div>
  
  
  <!-- 左侧statr -->

  <div class="close-left no-border w634 pd0">
    <div class="pd-form mb-20 delivery-form">
      <div class="group-row">
        <div class="form-group">
          <label for="cn1" class="label lable-xf pl10">采购单位</label>
          <div class="control">
            <input type="text" id="cn1" v-model="settlepo.purchasercorpname" readonly="readonly" class="w634 pl75">
          </div>
        </div>
      </div>
      <div class="group-row w634">
        <div class="form-group">
          <label for="cn2" class="label lable-xf pl10">结算单号</label>
          <div class="control">
            <input type="text" id="cn2" v-model="settlepo.settlebillno" readonly="readonly" class="w634 pl75">
          </div>
        </div>
      </div>
      <div class="group-row w634">        
        <div class="form-group">
          <label for="cn3" class="label lable-xf pl10">结算日期</label>
          <div class="control">
            <input type="text" id="cn3" v-model="settlepo.settledate | getYMD" readonly="readonly" class="w634 pl75">
          </div>
        </div>
      </div>
      <div class="group-row w634">
        <div class="form-group">
          <label for="cn4" class="label lable-xf pl10">出库日期</label>
          <div class="control control-date w634">
            <input type="text" id="cn4" v-model="settlepo.begindate | getYMD" readonly="readonly" class="pl75">
            <span class="text-and">—</span>
            <input type="text" id="" v-model="settlepo.enddate | getYMD" readonly="readonly">
          </div>
        </div>
      </div>
      <div class="group-row w634">
        <div class="form-group w310 form-label">
          <label for="cn5" class="label">发票状态</label>
          <div class="control w310">
            <input type="text" id="cn5" v-model="settlepo.invoicestate | invoicestate" readonly="readonly" class="w310 inp4">
          </div>
        </div>
        <div class="form-group w310 form-label">
          <label for="cn6" class="label">单据状态</label>
          <div class="control fl w310">
            <input type="text" id="cn6" v-model="settlepo.billstate | settletype" readonly="readonly" class="w310 inp4">
          </div>
        </div>
      </div>
    </div>
  <a v-on:click="getEmptyDetail" id="aEmpty" class="btn button-green mt-10">{{listStatus.title}}</a>

    <div id="leftCtable" class="ctable ct-parentr">
      <div class="ct-head border2">
        <span class="ct-col w90">发票勾对</span>
        <span class="ct-col w170">商品</span>
        <span class="ct-col w80">结算数量</span>
        <span class="ct-col w90">结算金额(元)</span>
        <span class="ct-col w110">发票金额(元)</span>
        <span class="ct-col w90">操作</span>
      </div>
      <div class="ct-row" v-if="detailList==null || detailList.length==0">
        <div class="row-line t-center">
          <span class="ct-col w240">
          暂无符合条件的记录！
          </span>
        </div>
      </div>
      <div class="ct-row" id="div{{$index}}"
        @click="cssActive($index)" v-for="detailpo in detailList">
        <div class="row-line v-top">
          <span class="ct-col w90">{{$index+1}} 
            <div class="checkbox-control" v-if="listStatus.goodStatus=='N'" >
              <input type="checkbox" 
                  id="good{{detailpo.guid + '' + detailpo.rowno}}"  
                  v-model="chGoodsListListener"
                  value="{{detailpo.guid + '' + detailpo.rowno}}">
              <label class="checkbox mr-0 bef-bgc lh-15" for="good{{detailpo.guid + '' + detailpo.rowno}}"></label>            
            </div>
          </span>
          <span class="ct-col w170 t-left break-it">
          <div class="pro-pic big-imgs fl" style="background-image: url(../assets/c17.jpg)"></div>
            <div class="break fl w104 ml-10">
            {{detailpo.supplierGoodscode}}<br>
            <span class="p-tit-green">{{detailpo.supplierGoodsname}}</span><br>
            {{detailpo.purchaseUnit}}<br>
            {{detailpo.producer}}<br>
            {{detailpo.registkey}}
            </div>
          </span>
          <span class="ct-col w80 t-right"> 
           {{detailpo.purchaseSettleqty==null?0:detailpo.purchaseSettleqty}}
          </span>
          <span class="ct-col w90 t-right">
           {{detailpo.settleamount==null?0:detailpo.settleamount  | numDigit 2 | numFmt}}
          </span>
          <span class="ct-col w110">
            <input type="text" v-model="detailpo.invoiceamount==null?0:detailpo.invoiceamount" readonly="readonly" class="w70 t-right">
          </span>
          <span class="ct-col w90"><a @click="slidedown($index)" class="btn button-green">明细</a></span>
        </div>
        <div class="row-launch clearfix" style="display: none">
            <table class="itable mb-20">
              <thead>
                <tr>
                  <th class="w40 border1">序号</th>
                  <th class="w50 border1">发票勾对</th>
                  <th class="w80 border1">出库单号</th>
                  <th class="w110 border1">出库日期</th>
                  <th class="w40 border1">行号</th>
                  <th class="w120 border1">批号</th>
                  <th class="w60 border1">数量</th>
                  <th class="w80 border1">金额</th>
                </tr>
              </thead>
              <tbody class="txt_v">
                <tr v-if="!detailpo.mxList">
                  <td colspan="8" class="h-30">暂无符合条件的记录</td>
                </tr>
                <tr v-else v-for="mx in detailpo.mxList" >
                  <td class="pd15-0">{{$index+1}}</td>
                  <td class="pd15-0">
                    <div class="checkbox-control">
                      <input type="checkbox" name="cb" id="mxid_{{$index}}" >
                      <label class="checkbox mr-0 bef-bgc lh-15" for="mxid_{{$index}}"></label>
                    </div>
                  </td>
                  <td class="t-left pr10">{{mx.supplierdobillno}}</td>
                  <td>{{mx.supplierdodate | getYMD}}</td>
                  <td class="t-left pr10">{{mx.rowno}}</td>
                  <td class="t-left pr10">{{mx.log}}</td>
                  <td class="t-right">{{mx.qty}}</td>
                  <td class="t-right pr10">{{mx.amount}}元</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 bottom-1" @click="slideup($index)"></div>
          </div>
      </div>     
    </div>
  </div>

  <!-- 右侧start -->
  <div class="close-right border-left-blue2 pd0-15">
    <div class="fheader pd0 no-bottom">
       <h4 class="no-icon bottom-gray w318 pb10">
        本单发票总览
      </h4> 
    </div>

    <div class="ctable mt-10 bottom-gray pb10">
      <div class="ct-row">
        <div class="row-line m-h35">
          <span class="ct-col w120 f-size14 lh-35 m-h35 pd0 t-right">结算金额</span>
          <span class="ct-col w140 font22 t-right lh-35 m-h35 pd0">{{settlepo.amount}}</span>
          <span class="ct-col w50 f-size14 lh-35 m-h35 pd0">元</span>
        </div>
        <div class="row-line m-h35">
          <span class="ct-col w120 f-size14 lh-35 m-h35 pd0 t-right">已开发票金额</span>
          <span class="ct-col w140 font22 t-right lh-35 m-h35 pd0">{{settlepo.inovicedamount}}</span>
          <span class="ct-col w50 f-size14 lh-35 m-h35 pd0">元</span>
        </div>
        <div class="row-line m-h35">
          <span class="ct-col w120 f-size14 lh-35 m-h35 pd0 t-right">已开发票张数</span>
          <span class="ct-col w140 font22 t-right lh-35 m-h35 pd0">{{settlepo.inovicednum}}</span>
          <span class="ct-col w50 f-size14 lh-35 m-h35 pd0">张</span>
        </div>
        <div class="row-line text-color-red m-h35 m-h35 pd0">
          <span class="ct-col w120 f-size14 lh-35 m-h35 pd0 t-right">未开发票金额</span>
          <span class="ct-col w140 font22 t-right lh-35 m-h35 pd0">{{settlepo.amount-settlepo.inovicedamount}}</span>
          <span class="ct-col w50 f-size14 lh-35 m-h35 pd0">元</span>
        </div>
      </div>
    </div> 


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

    <div class="fheader pd0 no-bottom mt-30">
       <h4 class="no-icon bottom-gray w318 pb10">
        本单发票总览
      </h4> 
    </div>

    <div v-for="invoice in invoiceList" >
       <div class="fheader no-bottom text-color-gray pd10-0">
         <h4 class="no-icon"
         第<span class="ctable-em f-size26">1</span>张
        </h4> 
        <div class="stretch ml-10">
          <div class="stretch-push"></div>
        </div>
      </div>
      
      <div class="ctable ct-parent  box-shadow bgc-gray-eb h-500" id="invoice{{$index}}"  @dblclick="invoiceClick($index)">
        <div class="ct-row table-no-border active pt20 pb20 h-500">
          <div class="ctable-title clearfix">
           
            <div class="ctable-line">
                <label class="lable-xf pl10" for='invoiceno{{$index}}'>发票号</label>
                <section>
                  <input class="t-right font22" type="text"  id="invoiceno{{$index}}" v-model="invoice.invoiceno" >
                </section>
            </div>
            <div class="ctable-line  mt-15 mb-10">
                <label class="lable-xf pl10" for='cc4'>发票金额</label>
                <section>
                  <input class="t-right font22 pr20" type="text" v-model="invoice.invoiceamount"
                    :v-on:blur="invoiceBlur($index,'invoiceamount')" id='cc4'><lable class="fr yuan">元</lable> 
                </section>
            </div>
            <div class="ctable-line h-100">
                <section class="big-sums bgc-gray-eb">大写金额</section>
                <div class="big-sum div-border">
                   {{invoice.invoiceamount | numUpper}}
                </div>
            </div>
          </div>
            <div class="row-launch invoice-show pd0 mar-20 border-blue pd10">
              <div class="invoice-item clearfix pd0">
                <div>已勾商品<span class="show-price text-color-blue mar-none">{{invoice.newList.length}}</span>条</div>
                <div class="w230 h-30">
                  <section class="fl">发票金额</section>
                  <section class="fr">
                    <span class="show-price">{{invoice.settleamount}}</span>元
                  </section>
                </div>
                <div class="ctable-line h-100">
                    <section class="big-sums bgc-gray-eb">大写金额</section>
                    <div class="big-sum">
                      {{invoice.settleamount | numUpper}}
                    </div>
                </div>
              </div>
            </div>
            <div class="fr mt-20 mr-20 pl0" :class="($index)==invoiceList.length-1?'':'bottom-border pl240'">
              <a v-on:click="addNewInvoice()" 
                v-if="invoice.issave=='Y' && ($index+1)==invoiceList.length" 
                class="green-button p-lr-10">添加</a>
              <a v-on:click="delInvoice(invoice.index)" class="btn button-red">删除</a>
            </div>
          </div> 
        </div> 
    <div>
    <!-- 发票信息end -->


    </div>
  </div>
</div>
</template>