<style scoped>
  .datetime-picker{
    width:80% !important;
  }
</style>
<template>

  
<div class="container resource close-left-menu contaNEW">

  <div class="pop-banner clearfix">
    <h3 class="current-module">到期证照提醒</h3>
  </div>
  
  
  <!--supply-productlist start-->
  <div class="supply-productlist clearfix">
  
    <div class="pd-form fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <!-- <label class="label lable-xf pl10">证照类型</label> -->
          <div class="control select-style">
            <select v-model="flag"> 
             <option value="" selected style='display:none;'>证照类型</option>
                <option value="11">企业证照</option>
               <option value="12">厂商证照</option>
               <option value="13">代理商</option>
               <option value="14">售后机构</option>
                <option value="15">器械注册证</option>
                <option value="16">经销商授权书</option>
                <option value="17">销售代表授权书</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <!-- <label for="cn1" class="label lable-xf pl10">预警日期</label> -->
          <div class="control control-date" style="height:34px;overflow: inherit;">
              <datepicker :target.sync="reminderdate" :readonly="readonlyFlag" title="预警日期" placeholder="预警日期" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
              <!-- <input type="text" v-model="reminderdate" title="预警日期" placeholder="预警日期" style='width:368px !important;'> -->
              <span class="text-and fr" style="border-top-right-radius: 8px;border-bottom-right-radius: 8px;width:91.5px;">天以内到期</span>
          </div>
        </div>
      </div>
      <div class="group-row mt-5"> 
        <div class="form-group">
          <!-- <label for="cn1" class="label lable-xf pl10">医院</label> -->
          <div class="control">
            <input type="text" v-model="medname" title="医院" placeholder="医院" maxlength="20" v-rule>
          </div>
        </div>
      </div>

      <div class="group-row t-right">
        <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData">查 询</button>
      </div>
    </div>
  </div>
    
   
    <table class="itable itable-td-long-text">
      <thead id="t_header">
        <tr>
          <th class="w30">序号</th> 
          <th class="w150">所在医院</th>
          <th class="w100">证照名称</th>
          <th class="w80">发证日期</th>
          <th class="w80">有效期至</th>
          <th class="w80">剩余天数</th>
          <th class="w100">备注</th>
          <!-- <th class="w80">有效期</th> -->
          <!-- <th class="w80">操作</th> -->
        </tr>
      </thead>
      <tbody class="txt_v">
      <tr v-if="list==null || list.length==0">
            <td colspan="7">暂无符合条件的记录</td>
        </tr>
        <tr v-for="item in list" v-else>
          <td class="w30 v-top">{{$index+1}}</td>
          <td class="t-left v-top">
            <div class="pro-pic fl" style="margin: 0 auto;">
              <imagebox v-bind:imgarr="[{img:item.pathOriginal,txt:''}]">
                  <img class="pro-pic" style="margin-top: 0px;" 
                    :src="item.pathThumbnail">
                  <span class="pic-max blue-search"></span>
              </imagebox>
            </div>
            <span class="fl ml-10">{{item.medname}}</span>
          </td> 
          <td class="t-left pr10 v-top">{{item.lcname}} </td>
          <td class="v-top">{{item.begindate|getYMD}}</td>
          <td class="v-top">{{item.enddate|getYMD}}</td>
          <td class="v-top">{{item.diffdate}}</td>
          <td class="v-top">{{item.remark}}</td>
        </tr> 
      </tbody>
    </table> 
    <section class="m-20-0">
    <pagination
      @page-change="getData"
      :page-no.sync="search.page"
      :total-pages.sync="search.totalPages">  
    </pagination>
    </section>

  </div>
</div>

</template>
<script>
module.exports={
  data: function(){
    return {
      list:{},
      enddate:'',
      medname:'',
      flag:'0',
      reminderdate:'',
      search:{
          page: 1,
          totalPages: 1,
          pageSize:50
      },
      read:true,
      
    };
  },
  methods: {
    getData: function(){
      var self = this;
      Ajax.post('/supplierReport/getExpReminderDaysList',{
        'page':self.search.page,'pageSize':self.search.pageSize,'reminderdate':self.reminderdate,
        'medname':self.medname,'flag':self.flag}).
          then(function(response){
            var list=response.data.data.list;
            var res=response.data.data, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
            var pathOriginal;
            var pathThumbnail;
            for(var a=0;a<list.length;a++){
                if(list[a].pictcontent){
                    var pictcontent=JSON.parse(list[a].pictcontent)
                    pathThumbnail=imgReg.test(pictcontent[0].thumbnail.path)? pictcontent[0].thumbnail.path : pictcontent[0].thumbnail.path+ pictcontent[0].thumbnail.name;
                    pathOriginal=imgReg.test(pictcontent[0].original.path)? pictcontent[0].original.path : pictcontent[0].original.path+ pictcontent[0].original.name; 

                    list[a].pathOriginal=pathOriginal;
                    list[a].pathThumbnail=pathThumbnail;
                }

                
            }
            self.search.page=res.pageNo;
            self.list=list;
            self.search.totalPages=res.totalPages;
            // self.init();
          })    
    },
    init:function(){
      self.flag="0";
      self.enddate='';
      self.medname='';
      self.reminderdate='';

    }
   },
  route:{
    activate : function(){
      this.getData();
    }
  }
};


</script>