<template>
	<div class="container resource close-left-menu contaNEW">
      <div class="pop-banner clearfix">
        <!-- <div class="operate-btns">
    </div> -->
        <span class="view-title">月度计划【{{ trplanperiod.billno }}】详情</span>
        <h3 class="current-module">月度计划</h3>
      </div>
      <!--purchase-month-plan start-->
      <div class="purchase-month-plan">
        <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" readonly v-model="trplanperiod.billno" class="inp4"> </div>
            </div>
            <div class="form-group form-label">
              <label for="cn22" class="label">制单日期</label>
              <div class="control">
                <input type="text" id="cn22" 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 v-model="trplanperiod.operatername" class="inp3"> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-label">
              <label for="cn23" class="label">计划月度</label>
              <div class="control">
                <input type="text" id="cn23" readonly v-model="trplanperiod.planperiod" class="inp4"> </div>
            </div>
            <div class="form-group form-label">
              <label for="cn4" class="label">日期范围</label>
              <div class="control control-date">
                <input type="text" id="cn4" readonly 
                value="{{trplanperiod.planbegindate | getYMD}}" class="inp4"
                >
                <span class="text-and">至</span>
                <input type="text" id="cn3" readonly                 
                  value="{{trplanperiod.planenddate | getYMD}}" 
                > </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-label">
              <label class="label" for='cn24'>订货科室</label>
              <div class="control">
              <input type="text" id="cn24" readonly v-model="trplanperiod.meddeptname" class="inp4"></div>
            </div>
            <div class="form-group form-label">
              <label for="cn25" class="label">供应商</label>
              <div class="control select-style">
                <input type="text" id="cn25" readonly v-model="trplanperiod.entrpname" class="inp3">
              </div>
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn9" class="label">备注</label>
            <div class="control">
              <textarea id="cn9" rows="4" readonly v-model="trplanperiod.memo" class="inp2"></textarea>
            </div>
          </div>
        </div>
        <table class="itable itable-thead-13px itable-td-long-text">
          <thead id="t_header">
            <tr>
              <th class="w50">序号</th>
              <th class="w260 ">
                <div class="p-lr-10">商品</div>
              </th>
              <th class="w70">订货单位</th>
              <th class="w60">订货数</th>
              <th class="w80">已到货数</th>
              <th class="w100">计划执行率</th>
              <th class="w100">包装价格(元)</th>
              <th class="w100">含税金额(元)</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="trmedplanperioddetail in listTrmedplanperioddetail">
            <td><div>{{ $index + 1 }}</div>


              </td>
              <td class="t-left">
                  <imagebox :imgarr="listTrmedplanperioddetailImg[trmedplanperioddetail.goodsguid] | original">

                      <!--  style="background-image: url({{listTrmedplanperioddetailImg[trmedplanperioddetail.goodsguid] | thumbnail}});margin-left: 12px;" -->


                      <div class="pro-pic"
                           style="margin-left:12px;"
                           :style="{backgroundImage:trmedplanperioddetail.img}">
                          <span class="pic-max blue-search"></span>
                      </div>
                  </imagebox>
                <div class="p-lr-10 goods_con"> {{ 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| numDigit 2 }}</td>
              <td>{{ trmedplanperioddetail.amount | numDigit 2}}</td>
            </tr>
          </tbody>
        </table>
        <div class="pagination m-20-0">
          <em class="page">明细条目数【{{ search.total }}】</em>
          <pagination 
            @page-change="getPurchaseMonthPlanGoodsList" 
            :class="['m-20-0']"
            :page-no.sync="search.page" 
            :total-pages.sync="search.totalPages">
          </pagination>
        </div>
      </div>
      <!--purchase-month-plan end-->
    </div>
</template>
<script>
/*
author:qiaom
day:2016-8-01
月度计划详情
*/
module.exports={
  data: function(){
    return {
      trplanperiod:[],
      listTrmedplanperioddetail:[],
      listTrmedplanperioddetailImg:{},
      operationFlag:"0",
      search: {
        pageSize: 50,
        page: 1,
        totalPages: 0,
        total: 0,
        search_EQ_guid: '',
      },
    };
  },
  methods: {
    //月度计划详情
    getData: 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{
            layer.msg(response.data.message);
          }
      })
    },
    //月度计划商品列表
    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){           
            var list=data.data.list;
            self.$set('listTrmedplanperioddetailImg',data.senData);
            for(var i=0;i<list.length;i++){
              list[i].img=self.getimg(list[i].goodsguid);
            }
            self.$set('listTrmedplanperioddetail',list);
            
            self.search.totalPages = data.data.totalPages;
            self.search.total = data.data.total;
          }else{
            layer.msg(data.message);
          }
      })
    },getimg:function(id){//star 11-7
        var srcJson=this.listTrmedplanperioddetailImg[id]
          try{//可能抛出异常的代码        
            if (srcJson == undefined || srcJson==null || srcJson=='' || srcJson== 'NOPIC') {
              return "";
            }
            var jsonArray = JSON.parse(srcJson), imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
            if(jsonArray==null || jsonArray.length==0){
              return "";
            }
            var pathUrl = imgReg.test(jsonArray[0].thumbnail.path) ? jsonArray[0].thumbnail.path : jsonArray[0].thumbnail.path + jsonArray[0].thumbnail.name;
            
            return 'url(' + pathUrl + ')';
          }catch(error){//如果发生异常会执行的代码，error为发生的异常类对象 
            return "";
          }finally{//无条件执行的代码 
          }
    }

  },

  route:{
    activate : function(){
      this.getData();
    }
  }
};
</script>