<!--发票登录页面-->
<script>
    module.exports = {
        data: function () {
            return {
                // 小数位位数
                digit: 2,
                settle: {
                    barcode:'',
                    urguid:'', 
                },
                queryTrmedstockbyBarcode:[],
                // 复选框监听
                chGoodsListListener: [],
                invoice:{
                  invoiceno:'',
                },
                num: '',
                sNum:'',
                backMessage: {
                    showDialog: 'N',
                    mList: [], // 提示信息
                },
                getinvoiceList: [],
                getsumlist: {
                    sumGoods: '',
                    sumInvoice: '',
                },
                requestS:false,
            };
        },
        methods: { 
            // 查询所有商品、未勾对的商品 立继武
            getSettleDetailList: function () {
                var self = this; 
                self.settle.barcode = this.$route.params.barcode;
                self.settle.urguid = this.$route.params.urguid;
                Ajax.post('/cost/queryTrmedstockbyBarcode',{'barcode':self.settle.barcode,'urguid':self.settle.urguid})
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('queryTrmedstockbyBarcode', data);
                        self.getsumlist.sumGoods = self.queryTrmedstockbyBarcode[0].price; 
                    })
            },
            /*
              保存发票信息：新增、修改
              永远操作的是当前的发票信息；
              涉及到修改，要知道之前绑定的数据有哪些，新绑定的数据有哪些，因为有可能发票号也会发生变化，
              所以不能用发票号进行判断
            */
            saveInvoice:function(){
                var self = this;        
                if(self.chGoodsList.length == 0){
                    self.MessageBox.alert('请勾选商品!'); 
                    return ;           
                } 
                // 判断发票号 
                if(self.invoice.invoiceno==''){
                    self.MessageBox.alert('请填写发票号!');
                    return ;           
                }   
                if(self.num > self.sNum){
                    self.MessageBox.alert('发票金额不能大于商品金额!');
                    return ;  
                }
                self.requestS = true;
                Ajax.post('/cost/addHvUrByInvoice',{'barcode':self.settle.barcode,'invoiceno':self.invoice.invoiceno,'invoiceamount':self.num})
                    .then(function (response) {
                        var data = response.data.data;
                        self.requestS = false;
                        if (response.data.errorCode == 0) {
                            layer.msg('保存成功!');
                            self.getqueryinvoice();
                        } else { 
                            layer.msg(response.data.message)
                        }
                    }) 
              },
              //提交
              submitHvUrByInvoice:function(){
                var self = this;        
                if(self.chGoodsList.length == 0){
                    self.MessageBox.alert('请勾选商品!'); 
                    return ;           
                } 
                // 判断发票号 
                if(self.invoice.invoiceno==''){
                    self.MessageBox.alert('请填写发票号!');
                    return ;           
                }   
                if(self.num > self.sNum){
                    self.MessageBox.alert('发票金额不能大于商品金额!');
                    return ;  
                }
                self.MessageBox({
                            title: '提示',
                            message: '您是否确定要提交发票？',
                            type: 'success',
                            showCancelButton: true
                        }, function (action){
                            if (action == 'cancel') {
                            return;
                    } else {
                            self.requestS = true;
                            Ajax.post('/cost/submitHvUrByInvoice',{'barcode':self.settle.barcode,'invoiceno':self.invoice.invoiceno,'invoiceamount':self.num})
                                .then(function (response) {
                                    var data = response.data.data;
                                    self.requestS = false;
                                    if (response.data.errorCode == 0) {
                                        layer.msg('提交成功!');
                                        self.chGoodsListListener = [];
                                        self.invoice.invoiceno = '';
                                        self.getqueryinvoice();
                                    } else { 
                                        layer.msg(response.data.message)
                                    }
                                }) 
                            }
                });
              },
              // 保存 提交 
              submitHvUrByInvoiceUp:function(invoiceno,invoiceamount){
                var self = this;          
                self.MessageBox({
                            title: '提示',
                            message: '您是否确定要提交发票？',
                            type: 'success',
                            showCancelButton: true
                        }, function (action){
                            if (action == 'cancel') {
                            return;
                    } else {
                            self.requestS = true;
                            Ajax.post('/cost/submitHvUrByInvoice',{'barcode':self.settle.barcode,'invoiceno':invoiceno,'invoiceamount':invoiceamount})
                                .then(function (response) {
                                    var data = response.data.data;
                                    self.requestS = false;
                                    if (response.data.errorCode == 0) {
                                        layer.msg('提交成功!');
                                        self.chGoodsListListener = [];
                                        self.invoice.invoiceno = '';
                                        self.getqueryinvoice();
                                    } else { 
                                        layer.msg(response.data.message)
                                    }
                                }) 
                            }
                });
              },
            //查询发票
            getqueryinvoice: function () {
                var self = this;
                Ajax.post('/cost/queryHvUrByInvoice',{'barcode':self.settle.barcode})
                    .then(function (response) {
                        var data = response.data; 
                        self.$set("getinvoiceList", data.data);   
                        var sum = 0;
                        for (var i = 0; i < self.getinvoiceList.length; i++) {
                            sum += self.getinvoiceList[i].invoiceamount * 100;
                        }
                        sum = sum / 100;
                        self.getsumlist.sumInvoice = sum;
                    })
            }, 
            slidedown: function (index) {
                var self = this;
                self.getqueryinvoice();
                $(".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');
                });
            },
            //删除发票
              delInvoices: function (invoiceno) {
                var self = this;   
                Ajax.post('/cost/delHvUrByInvoice',{'barcode':self.settle.barcode,'invoiceno':invoiceno})
                    .then(function(response) { 
                  var data = response.data;    
                   if(response.data.errorCode==0){  
                            layer.msg('删除成功!');
                          self.getqueryinvoice(); 
                      }else{ 
                            layer.msg(response.data.message)
                      } 
                })
              },   
            //验证供应商单位系数
              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 () { 
            },
            data: function (transition) {
                this.getSettleDetailList();
                this.num=  0; 
                this.sNum = 0; 
                this.getqueryinvoice();
                this.chGoodsListListener = [];
                this.chGoodsList = [];
            },
        },
        watch: {
            // 实时监听复选框勾选变化 - 变化的是计算的金额
            'chGoodsListListener': function (val) {
                var self = this;     
                self.chGoodsList = [];
                // 当前勾选的商品明细
                for(var j=0;j<self.queryTrmedstockbyBarcode.length;j++){
                  var good = self.queryTrmedstockbyBarcode[j];   
                  if(JSON.stringify(val).indexOf(good.barcode)!=-1){             
                    self.chGoodsList.push(good);  
                  }
                }      
                if(self.chGoodsList.length > 0){
                        self.num=  self.chGoodsList[0].price; 
                        self.sNum = self.chGoodsList[0].price; 
                }else{
                        self.num=  0; 
                        self.sNum = 0; 
                } 
              }
        },
    };
</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> 
            </div>
            <h3 class="current-module">发票录入</h3>
        </div>

        <!-- 左侧statr -->

        <div class="close-left no-border w634 pd0">
            <!-- <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-red 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="queryTrmedstockbyBarcode==null || queryTrmedstockbyBarcode.length==0">
                    <div class="row-line t-center">
                        <span class="ct-col">暂无符合条件的记录！</span>
                    </div>
                </div>
                <div class="ct-row" id="div{{$index}}" @click="cssActive($index)"
                     v-for="detail in queryTrmedstockbyBarcode">
                    <div class="row-line">
		<span class="ct-col w60">
                            <div class="checkbox-control">
                            <div class="checkbox-control">
                            <input type="checkbox" :id="detail.barcode" v-model="chGoodsListListener" :value="detail.barcode">
                            <label class="checkbox" :for="detail.barcode">{{ $index + 1 }}</label>
                          </div>
                          </div>
                        </span>
                        <span class="ct-col w240 t-left break-it"> 
                                <span class=" dis-inline w180 p-lr-10 break">
                                {{detail.goodscode}}<br>
                                    <span class="p-tit-green">{{detail.goodsname}}</span>
                                    <br> {{detail.goodsspec}}
                                    <br> {{detail.producer}}
                                    <br> {{detail.register}}
                                </span>
                        </span>
                        <span class="ct-col w70">
                            1{{detail.unit}}
                          </span>
                        <span class="ct-col w90">
                           {{detail.price==null?0:detail.price | numDigit 2 | numFmt}}元
                          </span>
                        <span class="ct-col w70">
                            {{detail.price==null?0:detail.price | 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 getinvoiceList">
                                <td>{{$index+1}}</td>
                                <td>{{mx.invoiceno}}</td>
                                <td>{{mx.invoiceamount}}</td>
                                <td>{{mx.invoiceamount | numUpper}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="zip" @click="slideup($index)"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧start -->
        <div class="close-right border-left-blue2 pd0-15">  
            <!-- 发票信息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="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 class="from-button"  style="margin-left: 180px;">
                             <a href="javascript:;" class="green-button p-lr-10" v-on:click="saveInvoice">保存<i>|</i></a>
                             <a href="javascript:;" class="green-button p-lr-10" v-on:click="submitHvUrByInvoice()">提交</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> 
                     <!-- <a href="javascript:;" class="btn button-red" v-if="invoices.invoicestate == 'N'" style="position: absolute; z-index: 9; margin-top: -65px; margin-left: 215px;" >删除</a>  -->
                     <div class="from-button"  style="margin-left: 188px; position: absolute; z-index: 9; margin-top: -65px;" v-if="invoices.invoicestate == 'N'"> 
                         <a href="javascript:;" class="green-button p-lr-10" v-on:click="submitHvUrByInvoiceUp(invoices.invoiceno,invoices.invoiceamount)">提交<i>|</i></a>
                         <a href="javascript:;" class="red-button p-lr-10" v-on:click="delInvoices(invoices.invoiceno)">删除</a>
                       </div>
              </div>
           </div> 
        </div> 
        </div> 
<!--新加提示信息 start -->
      <div class="roll-bg" v-show='requestS'>
          <div class="w60" style="margin:0 auto;">
              <img src="/images/roll.gif">
          </div>
          <div class="container resource t-center text-color-red">
            正在处理中，请勿关闭！
          </div> 
        </div>
<!--新加提示信息 end-->
</template>