<script>

  module.exports = {
    data: function () {
      return {
        trpo:{},
        // 明细数据
        mxList: [],
        // 图片数据
        imgcache:[],
        // 查询条件
        search: {
          //total: 0,
          page: 1,
          pageSize: 50,
          totalPages: 0,
        },
      };
    },
    methods: {
      // 初始化操作
      getData:function(){
        var self = this;
        var billno = this.$route.params.billno;
        self.search.search_EQ_billno = billno;

        // 1.获得订单详细信息
        Ajax.get('/trplan/get/'+billno)
          .then(function (response){
            var data = response.data.data;
            self.$set('trpo',data);
        })
        // 2.获得商品列表信息
        Ajax.get('/trplan/listGoodsDetail', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('mxList',data.list);
            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;

            // 封存商品图片信息
            self.$set('imgcache',response.data.senData);
        })
      }
    },
    route: {
      activate: function () {
        this.getData();
      }
    }
  };
</script>
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
    <div class="operate-btns"></div>
    <h3 class="current-module">医院月度计划详情</h3>
  </div>
  <!--order-orderlist-view start-->
  <div class="order-orderlist-view clearfix">
    <div class="pd-form form-label4em mb-20">
      <div class="group-row group-row-3">
        <div class="form-group">
          <label for="cn1" class="label lable-xf pl10">计划单号</label>
          <div class="control">
            <input type="text" id="cn1" :value="trpo.billno" readonly="readonly" class="pl75"></div>
        </div>
        <div class="form-group">
          <label for="cn2" class="label lable-xf pl10">制单日期</label>
          <div class="control">
            <input type="text" id="cn2" :value="trpo.inputdate | getYMD" readonly="readonly" class="pl75"></div>
        </div>
        <div class="form-group">
          <label for="cn3" class="label lable-xf pl10">制单人</label>
          <div class="control">
            <input type="text" id="cn3" :value="trpo.operatername" readonly="readonly" class="pl60"></div>
        </div>
      </div>
      <div class="group-row group-row-3">
        <div class="form-group">
          <label for="cn4" class="label lable-xf pl10">计划月度</label>
          <div class="control">
            <input type="text" id="cn4" :value="trpo.planperiod" readonly="readonly" class="pl75"></div>
        </div>
        <div class="form-group control-date-long">
          <label for="cn7" class="label lable-xf pl10">日期范围</label>
          <div class="control control-date">
            <input style="width:41%;float:left;" type="text" id="cn7" :value="trpo.planbegindate | getYMD" readonly="readonly" class="pl75">
            <span class="text-and">—</span>
            <input style="width:41%;float:left;" type="text" :value="trpo.planbegindate | getYMD" readonly="readonly"></div>
        </div>


      </div>
      <div class="group-row">
       <div class="form-group">
          <label for="cn5" class="label lable-xf pl10">订货科室</label>
          <div class="control">
            <input type="text" id="cn5" :value="trpo.meddeptname" readonly="readonly" class="pl75">
          </div>
        </div>
       <div class="form-group">
          <label for="cn6" class="label lable-xf pl10">供应商</label>
          <div class="control">
            <input type="text" id="cn6" :value="trpo.entrpname" readonly="readonly" class="pl60">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="cn11" class="label lable-xf pl10">备注</label>
        <div class="control">
          <input type="text" id="cn11" :value="trpo.memo" readonly="readonly" class="pl40"></div>
      </div>
    </div>
    <table class="itable itable-td-long-text">
      <thead id="t_header">
        <tr >
          <th class="w40">序号</th>
          <th class="w240">商品</th>
          <th class="w80">订货单位</th>
          <th class="w80">订货数</th>
          <th class="w80">已到货数</th>
          <th class="w80">计划执行率</th>
          <th class="w120">包装价格</th>
          <th class="w120">含税金额</th>
        </tr>
      </thead>
      <tbody class="txt_v">
        <tr>
            <td colspan="9" v-if="mxList.length==0">
            暂无符合条件的记录
            </td>
        </tr>
        <tr v-for="po in mxList">
          <td class="v-top">
            {{$index+1}}
          </td>
          <td class="t-left">

           <imagebox v-if="po.goodsguid!=null" v-bind:imgarr="imgcache[po.goodsguid] | original">
                <img
                  class="pro-pic mar-none fl"
                  v-bind:src="imgcache[po.goodsguid] | thumbnail">
                <span class="pic-max blue-search">
                </span>
              </imagebox>

            <div class="p-lr-10 fl w180">
              {{po.goodscode}}
              <br>
              <span class="p-tit-green">{{po.goodsname}}</span>
              <br>
              {{po.goodsspec}}
              <br>
              {{po.producer}}
              <br>{{po.registkey}}</div>
          </td>
          <td>{{po.unit}}</td>
          <td>{{po.poqty}}</td>
          <td>{{po.arrivalqty}}</td>
          <td>{{Math.round(po.arrivalqty / po.poqty * 10000) / 100.00}}%</td>
          <td class="t-right pr10">{{po.price}}元</td>
          <td>{{po.aount}}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination m-20-0" v-if="mxList.length">
      <pagination
           @page-change="getData"
           :page-no.sync="search.page"
           :total-pages.sync="search.totalPages">
        </pagination>
    </div>
  </div>
</div>
</template>