<template>
	<div class="container resource">
      <div class="pop-banner clearfix">
        <div class="current-operate">月度计划【{{ trplanperiod.billno }}】详情</div>
        <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-40">
          <div class="group-row group-row-3">
            <div class=" form-group form-label ">
              <label class="label" for="cn1" >计划单号</label>
              <div class="control">
                <input type="text" readonly="readonly" id="cn1" v-model='trplanperiod.billno' class="inp4"> </div>
            </div>
            <div class="form-group form-label">
              <label for="cn2" class="label">制单日期</label>
              <div class="control">
                <input type="text" id="cn2" readonly="readonly" v-model='trplanperiod.inputdate'  class="inp4"> </div>
            </div>
            <div class="form-group form-label">
              <label for="cn2" class="label">制单人</label>
              <div class="control">
                <input type="text" id="cn2" readonly="readonly" v-model='trplanperiod.operatername'  class="inp3"> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-label">
              <label for="cn3" class="label">计划月度</label>
              <div class="control">
                <input type="text" id="cn3" readonly="readonly" v-model='trplanperiod.planperiod'  class="inp4"> </div>
            </div>
            <div class="form-group form-label">
              <label for="cn3" class="label">日期范围</label>
              <div class="control control-date">
                <input type="text" id="cn3"  class="inp4" readonly="readonly" v-model='trplanperiod.planbegindate | getYMD'>
                <span class="text-and">至</span>
                <input type="text" id="cn3" readonly="readonly" v-model='trplanperiod.planenddate | getYMD'> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-label">
              <label for="cn5" class="label">医疗机构</label>
              <div class="control">
                <input type="text" id="cn5" readonly="readonly" v-model='trplanperiod.medname' class="bgc-gray inp4">
              </div>
            </div>
            <div class="form-group form-label">
              <label for="cn6" class="label">订货科室</label>
              <div class="control">
                <input type="text" id="cn6" readonly="readonly" v-model='trplanperiod.meddeptname'  class="inp4"> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-label">
              <label for="cn9" class="label">供应商</label>
              <div class="control">
                <input type="text" id="cn5" readonly="readonly" v-model='trplanperiod.entrpname' class="bgc-gray inp3">
              </div>
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn9" class="label">备注</label>
            <div class="control">
              <input type="text" id="cn9" readonly="readonly" class="pl40" v-model='trplanperiod.memo'>
              <!-- <textarea id="cn9"  readonly="readonly" v-model='trplanperiod.memo' class="bgc-gray inp2 " ></textarea> -->
            </div>
          </div>
        </div>
        <table class="itable itable-bordertop itable-td-long-text">
          <thead>
            <tr>
              <th class="w40">序号</th>
              <th class="w240 t-left">
                <div class="p-lr-10">商品</div>
              </th>
              <th class="w80">订货单位</th>
              <th class="w80">订货数</th>
              <th class="w80">已到货数</th>
              <th class="w80">计划执行率</th>
              <th class="w100">包装价格</th>
              <th class="w100">含税金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="trmedplanperioddetail in listTrmedplanperioddetail">
              <td>{{ $index + 1 }}
                <div>
                <imagebox :imgarr="listTrmedplanperioddetailImg[trmedplanperioddetail.goodsguid] | original">
                  <div class="pro-pic" style="background-image: url({{listTrmedplanperioddetailImg[trmedplanperioddetail.goodsguid] | thumbnail}});margin-left: 12px;">
                    <span class="pic-max blue-search"></span>
                  </div>
                </imagebox>
                </div>
              </td>
              <td class="t-left">
                <div class="p-lr-10"> {{ trmedplanperioddetail.goodscode }}
                  <br>
                  <span class="p-tit-green">{{ trmedplanperioddetail.goodsname }}</span>
                  <br> {{ trmedplanperioddetail.goodsspec }}
                  <br> {{ trmedplanperioddetail.producer }}
                  <br> {{ trmedplanperioddetail.registkey }} </div>
              </td>
              <td>{{ trmedplanperioddetail.unit }}</td>
              <td>{{ trmedplanperioddetail.poqty }}</td>
              <td>{{ trmedplanperioddetail.arrivalqty }}</td>
              <td>{{ trmedplanperioddetail.arrivalqty/trmedplanperioddetail.poqty*100 }}%</td>
              <td>{{ trmedplanperioddetail.price }}</td>
              <td>{{ trmedplanperioddetail.amount  }}</td>
            </tr>
          </tbody>
        </table>
        <div class="pagination m-20-0">
          <em class="page">明细条目数【{{ search.total }}】</em>
          <pagination
            @page-change="getDistrbutorMonthPlanGoods"
            :class="['m-20-0']"
            :page-no.sync="search.page"
            :total-pages.sync="search.totalPages">
          </pagination>
        </div>
      </div>
      <!--order-orderlist-view end-->
    </div>
</template>
<script>
/*
author:qiaom
day:2016-8-11
月度计划详情
*/
module.exports={
  data: function(){
    return {
      disabled : true,
      trplanperiod:[],
      listTrmedplanperioddetail:[],
      listTrmedplanperioddetailImg:{},
      operationFlag:"0",
      search: {
        pageSize: 10,
        page: 1,
        totalPages: 0,
        total: 0,
        search_EQ_guid: '',
      },
    };
  },
  methods: {
    //月度计划详情
    getPurchaseMonthPlanDetail: function(){
      var self = this;
      Ajax.get('/monthPlan/trplanperiod/'+this.$route.params.id)
        .then(function (response){
          var data = response.data;
          if(data.errorCode == 0){
            self.$set('trplanperiod',data.data);
            self.getPurchaseMonthPlanGoodsList();
          }else{
            self.MessageBox({
              title:'提示',message:data.message,type:'alert'
            },function(action){})
          }
      })
    },
    //月度计划商品列表
    getPurchaseMonthPlanGoodsList: function(){
      var self = this;

      self.$set('search.search_EQ_guid',self.trplanperiod.guid);
      Ajax.get('/monthPlan/listTrmedplanperioddetail', self.search)
       .then(function (response){
        var data = response.data;
          if(data.errorCode == 0){
            self.$set('listTrmedplanperioddetail',data.data.list);
            self.$set('listTrmedplanperioddetailImg',data.senData);
            self.search.totalPages = data.data.totalPages;
            self.search.total = data.data.total;
          }else{
            self.MessageBox({
              title:'提示',message:data.message,type:'alert'
            },function(action){})
          }
      })
    },
  },
  route:{
    activate : function(){
      this.getPurchaseMonthPlanDetail();
    }
  }
};
</script>