<template>
    <div>
        <div class="container resource close-left-menu contaNEW">
            <div class="pop-banner clearfix">
                <!-- <div class="current-operate"></div>
              -->
                <div class="operate-btns">
                    <a v-on:click="showDialog(trpo.guid,trpo.billno,'dange')"
                       :style="trpo.billstate!='P02'? 'color:#DCDCDC':''"
                       v-if="'/supplier/trpo:doState' | myqx"
                       class="fbtn fb-dispose">受理</a>
                    <!--
                    <a href="javascript:;" class="fbtn fb-Print">打印</a>
                    -->
                </div>
                <h3 class="current-module">高值要货订单详情</h3>
            </div>
            <!--order-orderlist-view start-->
            <div class="order-orderlist-view clearfix">
                <div class="pd-form mb-20">
                    <div class="group-row group-row-3">
                        <div class="form-group form-label">
                            <label for="cn1" class="label">要货订单</label>
                            <div class="control">
                                <input type="text" id="cn1" :value="trpo.billno" readonly="readonly" class="inp4"></div>
                        </div>
                        <div class="form-group form-label">
                            <label for="cn2" class="label w120">要求到货日期</label>
                            <div class="control">
                                <input type="text" id="cn2" :value="trpo.planenddate | getYMD" readonly="readonly"
                                       class="inp6"></div>
                        </div>
                        <div class="form-group form-label">
                            <label for="cn3" class="label">执行状态</label>
                            <div class="control">
                                <input type="text" id="cn3" :value="trpo.billstate | billstate_trpo" readonly="readonly"
                                       class="inp4"></div>
                        </div>
                    </div>
                    <div class="group-row group-row-3">
                        <div class="form-group form-label">
                            <label for="cn4" class="label">计划单号</label>
                            <div class="control">
                                <input type="text" value="" id="cn4" :value="trpo.medplanbillno" readonly="readonly"
                                       class="inp4"></div>
                        </div>
                        <div class="form-group form-label">
                            <label for="cn5" class="label">业务员</label>
                            <div class="control">
                                <input type="text" id="cn5" :value="trpo.buyername" readonly="readonly" class="inp3">
                            </div>
                        </div>
                        <div class="form-group form-label">
                            <label for="cn16" class="label">订货日期</label>
                            <div class="control">
                                <input type="text" id="cn16" :value="trpo.planbegindate | getYMD" readonly="readonly"
                                       class="inp4"></div>
                        </div>
                    </div>
                    <div class="group-row">
                        <div class="form-group form-label">
                            <label for="cn15" class="label">要货单位</label>
                            <div class="control">
                                <input type="text" :value="trpo.medname" id="cn15" readonly="readonly" class="inp4">
                            </div>
                        </div>
                        <div class="form-group form-label">
                          <label for="cc2" class="label">单据类型</label>
                          <div class="control select-style">
                            <select v-model="trpo.billtype" class="inp4" readonly="readonly" disabled="disabled"> 
                            <option v-for="option in HighValueList" v-bind:value="option.value">
                              {{option.label}}
                            </option>
                          </select>
                          </div>
                        </div> 
                    </div>
                    <div class="group-row">
                        <div class="form-group form-label">
                            <label for="cn6" class="label">收货地点</label>
                            <div class="control w700">
                                <input type="text" id="cn6" :value="trpo.address" readonly="readonly" class="inp4">
                            </div>
                        </div>
                    </div>
                    <div class="group-row">
                        <div class="form-group form-label">
                            <label for="cn46" class="label">备注</label>
                            <div class="control w700">
                                <input type="text" id="cn46" :value="trpo.memo" readonly="readonly" class="inp2"></div>
                        </div>
                    </div>
                </div>


                <div class="ctable ct-parent mt-20">
                    <div class="ct-head">
                        <span class="ct-col w30"></span>
                        <span class="ct-col w50">序号</span>
                        <span class="ct-col w120">商品编码</span>
                        <span class="ct-col w130">商品名称</span>
                        <span class="ct-col w80">规格</span>
                        <span class="ct-col w90">生产厂商</span>
                        <span class="ct-col w130">注册证号/批准文号</span>
                        <span class="ct-col w100">订货数</span>
                        <span class="ct-col w100">价格</span>
                        <span class="ct-col w80">含税金额(元)</span>
                        <span class="ct-col w80">备注</span>
                    </div>
                    <div class="ct-row mt-0 pt10" id="warp2{{$index}}" v-for="(one,cus) in mxList" track-by="$index">
                        <div class="row-line">
                            <span class="ct-col w30 mt-5">
                              <img src="/images/consumable.png" alt="" v-if='cus.goodscode=="耗材包"'>
                            </span>
                            <span class="ct-col w50">{{$index+1}}</span>
                            <span class="ct-col w120  ">{{cus.supplierGoodscode}}</span>
                            <span class="ct-col w130  ">
                                <span class="p-tit-green" style=' color: #4aa8e5;'>{{cus.supplierGoodsname}}</span>
                            </span>
                            <span class="ct-col w80 t-left pr10">{{cus.supplierGoodsspec}}</span>
                            <span class="ct-col w90 t-left pr10">{{cus.producer}}</span>
                            <span class="ct-col w130 t-left pr10">{{cus.register}}</span>
                            <span class="ct-col w100  activate isFocus" 
                                  :class='{pt5:cus.supplierGoodscode!="耗材包"}'>
                              <a v-if='cus.supplierGoodscode=="耗材包"' href="javascript:void(0);"
                               @click="slidedown($index,cus.purchaserGoodsguid,cus.billno)"
                               class="txt_underline  status-switch text-color-blue" style="display: inline-block;">1套</a>
                              <a href="javascript:;" 
                               class="status-switch text-color-blue" 
                               v-else>
                               {{cus.supplierPoqty}}
                                {{cus.supplierUnit}}
                              </a>
                                <!--       <input v-else type="text" class="edit-number t-right" v-model="cus.poqty"  style='height:34px;line-height: 34px;' @change="checkInfo(cus.poqty, $index, 2)"> -->
                            </span>
                            <span class="ct-col w100 pr10 t-right">
                                {{cus.supplierPrice |numDigit 2}}
                                <br>元/{{cus.supplierUnit}}
                            </span>
                            <span class="ct-col w80 t-right pr10">{{cus.taxsum |numDigit 2}}</span>
                            <span class="ct-col w80 t-left pr10">{{cus.memo}}</span>
                        </div>
                        <div class="row-launch" style="display: none;">
                            <h3>要货量（{{cus.parasite.length}}）</h3>
                            <table class="itable mb-30">
                                <thead>
                                <tr>
                                    <th class="w50">序号</th>
                                    <th class="w120">商品编码</th>
                                    <th class="w120">商品名称</th>
                                    <th class="w80">规格</th>
                                    <th class="w120">生产厂商</th>
                                    <th class="w120">注册证号/批准文号</th>
                                    <th class="w120">订货数</th>
                                    <th class="w100">价格</th>
                                    <th class="w100">含税金额(元)</th>
                                    <th class="w50">耗材类型</th>
                                    <!-- <th class="w100">备注</th> -->
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-if="cus.parasite==null || cus.parasite.length==0">
                                    <td colspan="12">暂无符合条件的记录</td>
                                </tr>
                                <tr v-for="(index,variation) in cus.parasite">
                                    <td>{{ $index + 1 }}</td>
                                    <td class='t-left pr10'>
                                        {{variation.supplierGoodscode}}
                                    </td>
                                    <td>
                                        <span class="p-tit-green" style=' color: #4aa8e5;'>{{variation.supplierGoodsname}}</span>
                                    </td>
                                    <td>{{variation.supplierGoodsname}}</td>
                                    <td class='t-left'>{{variation.producer}}</td>
                                    <td>{{variation.register}}</td>
                                    <td v-if="variation.isaccessory=='N'">
                                        <input type="number" class="edit-number t-right w60"
                                               v-model="variation.supplierPoqty"
                                               style='height:34px;line-height: 34px;'
                                               @input="checkInfo(variation.supplierPoqty,one, index)">{{variation.supplierUnit}} 
                                    </td>
                                    <td v-else>
                                        {{variation.supplierPoqty}} {{variation.supplierUnit}}
                                    </td>

                                    <td class="t-right pr10">{{variation.supplierPrice |numDigit 2}}
                                        <br>
                                        元/{{variation.supplierUnit}}
                                    </td>
                                    <td class="t-right pr10">
                                        {{variation.taxsum|numDigit 2}}
                                    </td>
                                    <!-- <td>{{variation.isaccessory=='N'?'主料':'辅料'}}</td> -->
                                    <td>{{variation.isaccessory=='N'?'辅料':variation.isaccessory=='Y'?'主料':'工具'}}</td>

                                    <!-- <td class="t-left">{{variation.memo}}</td> -->
                                </tr>
                                </tbody>
                            </table>
                            <div class="zip" @click="slideup2($index)"></div>
                        </div>

                    </div>

                    <br>
                    <br>
                    <br>
                    <!--      <div class="mt-20" style="text-align: center" v-if="getTrMedDeptDoList.length==0">
                             未查询到相关数据！
                         </div> -->
                    <!--<div class="pagination" style="margin: 20px 0">
                        <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
                                    :total-pages.sync="search.totalPages"></pagination>
                    </div>-->
                </div>

            </div>


            <!--star 9-9 受理弹出-->
            <!--单个订单受理弹出框-->
            <div id="dange" class="modal hide">
                <div class="container resource">
                    <div class="audit-detail"
                         style="width:540px;">
                        <span class="close-win" v-on:click="closeDialog('dange')"></span>

                        <div class="sdiv-9-9b">
                            <a class="btn-d btn-d-activate btn-d-lg" href="javascript:;" style='border-radius:8px;'>单个订单受理</a>
                        </div>

                        <div class="status-process wbe-0 clearfix pd20" style="padding-top:0px;">
                            <p style="color:#606f7a;font-size:14px;">
                                请选择送货日期</p>

                            <div class="sp-head sp-headb">
              <span class="sp-col w300">
                <span class="control radio-control ">
                  <input type="radio" id="radio_d_01" name="radio_d"
                         value="1" v-model="ywdata.ywchecked">
                  <label class="radio mr-0" for="radio_d_01" style="line-height:20px;"> 
                  <span>{{sysdate}} （今天送货）  </span>
                  </label>
                </span>
              </span>
                            </div>
                            <div class="sp-head sp-headb">
              <span class="sp-col w300">
                <span class="control radio-control ">
                  <input type="radio" id="radio_d_02" name="radio_d"
                         value="2" v-model="ywdata.ywchecked">
                  <label class="radio mr-0" for="radio_d_02" style="line-height:20px;"> 
                  <span>{{sysdate2}} （明天送货）  </span>
                  </label>
                </span>
              </span>
                            </div>
                            <div class="sp-head sp-headb">
              <span class="sp-col w300">
                <span class="control radio-control ">
                  <input type="radio" id="radio_d_03" name="radio_d"
                         value="3" v-model="ywdata.ywchecked">
                  <label class="radio mr-0" for="radio_d_03" style="line-height:20px;"> 
                  <span>{{sysdate3}} （后天送货）  </span>
                  </label>
                </span>
              </span>
                            </div>
                            <div class="sp-head sp-headb" style="height: auto;">
              <span class="sp-col w300">
                <span class="control radio-control ">
                  <input type="radio" id="radio_d_04" name="radio_d"
                         value="4" v-model="ywdata.ywchecked">
                             <label class="radio mr-0 fl" for="radio_d_04" style="line-height:20px;"> 其他日期  </label>
                    <!--<input class="cert-numd2 "v-if="ywdata.ywchecked=='4'" v-model="ywdata.planenddate" >
                    <input class="cert-numd2 "v-if="ywdata.ywchecked!='4'"  >-->
                   <div class="form-group form-label w180 fl pl10">                   	
                    <datepicker v-if = " ywdata.ywchecked == '4' " :target.sync = " ywdata.planenddate|getYMD " >
                    </datepicker>
                      <datepicker v-if="ywdata.ywchecked!='4'"></datepicker>
                  </div>


                    <!--<label class="radio mr-0" for="radio_d_04" style="line-height:20px;">
                    <span>其他日期
                      <input class="cert-numd2 "v-if="ywdata.ywchecked=='4'" v-model="ywdata.planenddate" >
                      <input class="cert-numd2 "v-if="ywdata.ywchecked!='4'"  >
                    </span>
                    </label>-->
                </span>
              </span>
                            </div>


                            <div class="sdiv9-9">
                                <button v-on:click="doState('dange')" class="btn button-green">确定</button>
                                <button v-on:click="closeDialog('dange')" class="btn button-red">关闭</button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!--star 9-9 受理弹出-->
            <!--新加提示信息-->
            <div class="modal " v-show="showTrsuppliercheck">
                <div class="container resource">
                    <div class="audit-detail"
                         style="width:550px; margin:220px auto; min-height: 150px; border:0; padding: 15px 0 0px; border-radius: 2px;">
                        <div class="sdiv-9-9b t-center text-color-gray f-size18"
                             style="margin-left: 0; margin-right: 0; ">
                            提示
                        </div>
                        <div class="sdiv-9-9b t-center text-color-gray f-size18"
                             style="margin-left: 0; margin-right: 0; padding-bottom: 0; height: 100px;  padding:20px 90px 0px 90px">
                            该订单中耗材包包含辅料，请确认已核实<b class="text-color-red">辅料</b>的数量后受理!
                        </div>
                        <a v-on:click="showTrsuppliercheck=false">
                            <div class="sdiv-9-9b t-center text-color-gray f-size18"
                                 style="margin-left: 0; margin-right: 0; padding-bottom: 0; height: 50px; line-height: 50px; cursor: pointer;">
                                取消
                            </div>
                        </a>
                        <div class="t-right text-color-gray f-size14"
                             style="margin-left: 0; margin-right: 0; padding-bottom: 0; padding-right: 20px; height: 30px; line-height: 30px; ">
                            <a v-on:click="showTIme()">
                                继续
                            </a>
                        </div>

                    </div>
                </div>
            </div>
            <!--新加提示信息 end-->

            <div class="modal" v-if='getListFlag'>
                <div class="container resource">
                    <div class="audit-detail" style="margin:100px auto;width:1000px;padding:30px;">
                        <span class="close-win" @click='getListFlag=false'></span>
                        <table class="itable mb-30">
                            <thead>
                            <tr>
                                <th class="w50">序号</th>
                                <th class="w150">商品编码</th>
                                <th class="w150">商品名称</th>
                                <th class="w80">规格</th>
                                <th class="w120">生产厂商</th>
                                <th class="w120">注册证号/批准文号</th>
                                <th class="w120">订货数</th>
                                <th class="w100">价格</th>
                                <th class="w100">含税金</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(index,variation) in getList">
                                <td>{{ $index + 1 }}</td>
                                <td class='t-left pr10'>
                                    {{variation.supplierGoodscode}}
                                    <br>

                                </td>
                                <td class="t-left pr10">
                                    <span class="p-tit-green"
                                          style=' color: #4aa8e5;'>{{variation.supplierGoodsname}}</span>
                                </td>
                                <td>{{variation.supplierGoodsname}}</td>
                                <td class='t-left'>{{variation.producer}}</td>
                                <td>{{variation.register}}</td>
                                <td>
                                    {{variation.supplierPoqty}}{{variation.supplierUnit}}
                                </td>
                                <td class="t-right pr10">{{variation.supplierPrice |numDigit
                                    2}}元/{{variation.supplierUnit}}
                                </td>
                                <td>
                                    {{variation.taxsum |numDigit 2}}元
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<!--订单受理：明细-->
<script>

    //初始化过滤器


    module.exports = {
        data: function () {
            return {
                sysdate: '',
                sysdate2: '',
                sysdate3: '',
                sysdate4: '',
                HighValueList:[{
                  value:'H02',
                  label:'跟台高值'
                },{
                  value:'H03',
                  label:'备货高值'
                }],

                // 业务数据
                ywdata: {
                    ywtag: 'dange',// 操作的类型：单一处理，批量处理
                    ywguid: '',// 业务guid
                    ywchecked: '',// 选中哪一个
                    planenddate: '',// 时间

                    ywdate: ''// 选择的时间
                },

                trpo: {},
                // 明细数据
                mxList: [],
                // 图片数据
                imgcache: [],
                // 查询条件
                search: {
                    //total: 0,
                    page: 1,
                    pageSize: 10,
                    totalPages: 0,
                },
                getList: [],
                getListFlag: false,
                showTrsuppliercheck: false
            };
        },
        methods: {
            initData: function () {
                var now = new Date();
                this.sysdate = this.formDate(now);

                now.setDate(now.getDate() + 1);
                this.sysdate2 = this.formDate(now);

                now.setDate(now.getDate() + 1);
                this.sysdate3 = this.formDate(now);
            },
            // 初始化操作
            getData: function () {
                var self = this;
                var billno = this.$route.params.billno;
                self.search.search_EQ_billno = billno;

                // 1.获得订单详细信息
                Ajax.get('/cost/getTrsupplierpo/' + billno)
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('trpo', data);
                    })
                // 2.获得商品列表信息
                Ajax.get('/cost/listTrsupplierdetail', this.search)
                    .then(function (response) {
                        var data = response.data.data;

                        for (var a = 0; a < data.length; a++) {
                            if (data[a].ispackage == 'N') {
                                data[a].parasite = [];
                                self.mxList.push(data[a]);
                            } else {
                                for (var i = 0; i < self.mxList.length; i++) {
                                    if (self.mxList[i].supplierGoodscode == "耗材包" && self.mxList[i].supplierGoodsguid == data[a].parentpackageguid) {
                                        data[i].parasite.push(data[a]);
                                    }
                                }
                            }
                        }
                        console.dir(self.mxList)
                        // self.$set('mxList', self.mxList);
                        self.search.pageno = data.pageno;
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;

                        // 封存商品图片信息
                        self.$set('imgcache', response.data.senData);


                    })
            },
            slideup2: function (index) {

                $('#warp2' + index).find(".row-launch").slideUp(400, function () {
                    $('#warp2' + index).removeClass('active');
                    $('#warp2' + index).find(".isFocus").removeClass("focus");
                })
            },
            slidedown: function (index) {
                var self = this;

                if (self.mxList[index].parasite.length <= 10) {
                    $('#warp2' + index).find(".row-launch").slideDown(400, function () {
                        $('#warp2' + index).find(".isFocus").addClass("focus active");
                    })
                } else {
                    self.$set('getList', self.mxList[index].parasite);
                    self.getListFlag = true;
                }

                // Ajax.post('/cost/listTrsupplierdetailBysupplies',{'goodsguid':goodsguid,'billno':billno})
                //     .then(function (response){
                //       var res = response.data.data;
                //       if(response.data.errorCode == 0){
                //
                //         if(res.length<=10){
                //            self.mxList[index].parasite=res;
                //           $('#warp2' + index).find(".row-launch").slideDown(400, function () {
                //               $('#warp2' + index).find(".isFocus").addClass("focus active");
                //           })
                //         }else{
                //
                //           self.$set('getList',res);
                //           self.getListFlag=true;
                //         }
                //
                //         // self.$set('slideList',res);
                //
                //       }else{
                //         layer.msg(response.data.message);
                //       }
                //   })
                // for(var a=0;a<self.modelList.length;a++){
                //   if(a==index){
                //     $(".ct-row:eq(" + index + ")").addClass("active");
                //     $(".row-launch:eq(" + index + ")").slideDown(400, function() {});
                //   }else{
                //     $(".row-launch:eq(" + a + ")").slideUp(400, function() {
                //       $(".ct-row:eq(" + a + ")").removeClass('active');
                //     });
                //   }
                // }
            },
            // 确定处理 检查
            doStateByTrsupplier: function () {
                var self = this;
                Ajax.post('/cost/doStateByTrsupplier', self.ywdata)
                    .then(function (response) {
                        var data = response.data.data;
                        // 重新刷新页面
                        self.MessageBox({
                            title: '提示',
                            message: data.split("@")[1],
                            type: 'alert'
                        }, function (action) {
                            var billno = self.billno;
                            self.$route.router.go('/cost/costDisposeSub/' + billno);
                        });
                    })
            },
            check: function () {
                var self = this;
                Ajax.post('/cost/doStateByTrsuppliercheck', self.ywdata)
                    .then(function (response) {
                        var data = response.data.data;
                        console.log(data)
                        if (response.data.errorCode == 0) {
                            if (data > 0) {
                                self.showTrsuppliercheck = true;
                            } else {
                                self.showTIme();
                            }
                        } else {
                            layer.msg(response.data.message);
                        }

                    })
            },
            showTIme: function () {
                $("#dange").attr("class", "modal");
                this.showTrsuppliercheck = false;
            },
            doState: function (tag) {
                var self = this;
                // 批量处理：按医院批量受理要货订单
                self.MessageBox({
                    title: '提示',
                    message: "您确认受理该要货订单吗？",
                    type: 'success',
                    showCancelButton: true
                }, function (action) {
                    if (action == 'confirm') {
                        self.doStateByTrsupplier();
                        return;
                    }
                });
            },
            checkInfo: function (val, one, two) {
                if (val<=0) {
                    layer.msg('请输入大于0的数字');
                    return;
                }
                var item = this.mxList[one].parasite[two];
                this.mxList[one].parasite[two].taxsum = item.supplierPoqty * item.supplierPrice;
                this.mxList[one].parasite[two].purchaserPoqty = item.supplierPoqty * item.sitem;
                var sp = 0;
                var ite = this.mxList[one].parasite;
                for (var i = 0; i < ite.length; i++) {
                    sp += ite[i].taxsum;
                    console.log(sp)
                }
                this.mxList[one].supplierPrice = sp;
                this.mxList[one].purchaserPrice = sp;
                this.mxList[one].taxsum = sp;
                // console.log(this.mxList[one].taxsum)
                // console.log(this.mxList[one].supplierPrice)


            },
            // 展示单个订单受理的页面
            showDialog: function (guid, billno, ywtag) {
                var self = this;
                // 设置当前的弹出框的一些属性
                self.$set('ywdata.ywtag', ywtag);
                self.$set('ywdata.ywguid', guid);
                self.$set('ywdata.ywchecked', 1);
                self.$set('ywdata.ywdate', self.sysdate);

                var list = [];
                for (var a = 0; a < self.mxList.length; a++) {
                    if (self.mxList[a].supplierGoodscode != '耗材包') {
                        self.mxList[a].parasite = [];
                        list.push(self.mxList[a]);
                    } else {
                        list.push(self.mxList[a]);
                        for (var i = 0; i < self.mxList[a].parasite.length; i++) {
                            console.log(self.mxList[a].parasite)
                            list.push(self.mxList[a].parasite[i]);
                        }
                    }
                }
                console.dir(list)
                self.$set('ywdata.list', list);

                self.$set('billno', billno);// 用于单一处理的时候

                self.check();
            },
            // 关闭单个订单
            closeDialog: function (dialogId) {
                this.ywguid = "";
                $("#" + dialogId).attr("class", "modal hide");
            },
            // 初始化时间
            formDate: function (day) {
                var Year = 0;
                var Month = 0;
                var Day = 0;
                var CurrentDate = "";
                //初始化时间
                Year = day.getFullYear();//ie火狐下都可以
                Month = day.getMonth() + 1;
                Day = day.getDate();
                CurrentDate += Year + "-";
                if (Month >= 10) {
                    CurrentDate += Month + "-";
                } else {
                    CurrentDate += "0" + Month + "-";
                }
                if (Day >= 10) {
                    CurrentDate += Day;
                } else {
                    CurrentDate += "0" + Day;
                }
                return CurrentDate;
            }
        },
        route: {
            activate: function () {
                this.getData();
                this.initData();
            }
        },
        watch: {
            // 判断选择的日期
            'ywdata.ywchecked': function (val) {
                var self = this;
                // 需要处理全选
                if (self.ywdata.ywchecked == 4) {
                    // self.ywdata.planenddate = self.ywdata.planenddate;
                } else if (self.ywdata.ywchecked == 1) {// 今天
                    self.ywdata.planenddate = self.sysdate;
                } else if (self.ywdata.ywchecked == 2) {// 明天
                    self.ywdata.planenddate = self.sysdate2;
                } else if (self.ywdata.ywchecked == 3) {// 后天
                    self.ywdata.planenddate = self.sysdate3;
                }
            },
        }
    };
</script>