<template>
    <div>
        <div class="container resource close-left-menu contaNEW">
            <div class="pop-banner clearfix">
                <div class="operate-btns">
                    <a href="javascript:void(0)" @click="modifyInfo" v-if="$route.params.guid!=0" class="fbtn fb-modify">修改</a>
                    <a v:disabled="false" v-if="!canAdd" @click="addYLRegistLic" href="javascript:void(0)"  style="color:#DCDCDC" class="fbtn fb-add">添加</a>
                    <a href="javascript:void(0)" v-if="canAdd" class="fbtn fb-add">添加</a>
                    <a v:disabled="false" v-if="!canSave" href="javascript:void(0)"  style="color:#DCDCDC" id="saveBtn" class="fbtn fb-save">保存</a>
                    <a v-if="canSave" @click="saveYLRegistLic();" href="javascript:void(0)" class="fbtn fb-save">保存</a>
                    <a href="javascript:void(0)" @click="submitYLRegistLics" class="fbtn fb-submit">提交</a>
                    <a href="javascript:void(0)" v-link="{path:'/certComplete2/'+$route.params.guid}" class="fbtn fb-book">业务资料</a>
                </div>
                <h3 class="current-module">维护医疗器械注册证</h3>
            </div>
            <div class="cert-form clearfix">
                <div class="cert-edit">
                    <div class="cf-group">
                        <label for="cf1" class="label multi-line">
                            注册证
                            <br>产品名称</label>
                        <div class="control">
                            <input type="text" class="text-color-blue" id="cf1" v-model="registeLic.registkeyname"/>
                        </div>
                    </div>
                    <div class="cf-group">
                        <label for="cf2" class="label">注册证号</label>
                        <div class="control">
                            <input type="text" id="cf2" v-model="registeLic.registkey"></div>
                    </div>
                    <div class="cf-group">
                        <label for="cf3" class="label">生产厂商</label>
                        <div class="control">
                            <input type="text" id="cf3" v-model="registeLic.producer"></div>
                    </div>
                    <div class="cf-group">
                        <label for="cf3" class="label">生产来源</label>
                        <div class="control ">
                            <div class="radio-control">
                                <radio :list="importedFlag" :checked.sync="registeLic.importedflag"></radio>
                            </div>
                        </div>
                    </div>
                    <div class="cf-group">
                        <label for="cf3" class="label">有效期</label>
                        <div class="control clearfix">
                            <div style="width:42%;float:left;">
                                <datepicker :target.sync="registeLic.begindate | getYMD" :readonly="readonlyFlag"></datepicker>
                            </div>
                            <span class="join-icon">至</span>
                            <div style="width:42%;float:right;">
                                <datepicker :target.sync="registeLic.enddate | getYMD" :readonly="readonlyFlag"></datepicker>
                            </div>
                        </div>
                    </div>
                    <div class="cert-list">

                        <div v-for="upload in uploads" class="cert-item has-image" :style="{backgroundImage:'url('+upload.path+')'}">
                            <span class="rm-pic" v-on:click="deleteimg($index)"></span>
                        </div>

                        <uploads v-bind:class="['cert-item']"  id="showupload"
                          v-on:file-change="fileChange" v-bind:multiple="false"  v-bind:readonly="readonly"></uploads>

                    </div>
                    <div class="cert-tips">照片大小&lt;1M，与原件大小比例为1：1</div>
                </div>
                <div class="pro-list">
                    <div class="pro-header">
                        <a v-if="isPro" href="javascript:void(0);" @click="selProduct" class="sel-btn">选择</a>
                        <div class="tab-nav">
                            <a v-on:click="nav(true)" v-bind:class="{ 'active': isPro }" href="javascript:void(0);">产品</a>
                            <a v-on:click="nav(false)" v-bind:class="{ 'active': !isPro }" href="javascript:void(0);">关联规格</a>
                        </div>
                    </div>
                    <div v-if="isPro" class="ctable pro-table">
                        <div class="ct-head">
                            <span class="ct-col w40"></span>
                            <span class="ct-col w100">产品名称</span>
                            <span class="ct-col w140">规格</span>
                            <span class="ct-col w80">生产厂商</span>
                            <span class="ct-col w70">生产来源</span>
                        </div>
                        <div class="ct-wrap">
                            <div class="ct-row hover" v-for="product in productList">
                                <div class="row-line">
                                    <span class="ct-col w40 radio-control radio-alone">
                                        <input type="radio" id="radio{{$index}}" name="rsl" v-model="checkProduct" v-bind:value="product"/>
                                        <label class="radio" for="radio{{$index}}"></label>
                                    </span>
                                    <span class="ct-col w100 break-it">
                                        <span class="break inner">{{product.productname}}</span>
                                    </span>
                                    <span class="ct-col w140 break-it">
                                        <span class="break inner">{{product.productspec}}</span>
                                    </span>
                                    <span class="ct-col w80 break-it">
                                        <span class="break inner">{{product.registrantname}}</span>
                                    </span>
                                    <span class="ct-col w70">
                                        {{product.importedflag==1?"国产":product.importedflag==2?"进口":""}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="ct-wrap" v-if="productList.length==0">
                            <div class="ct-row" style="height:35px;text-align:center;">
                                <span class="ct-col"> <font>在左边输入注册证产品名称将自动检索产品信息！</font>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div v-if="!isPro" class="ctable pro-table pro-no-radio">
                        <div class="ct-head">
                            <span class="ct-col w80">商品编号</span>
                            <span class="ct-col w100">商品名称</span>
                            <span class="ct-col w60">规格</span>
                            <span class="ct-col w100">生产厂商</span>
                            <span class="ct-col w90">国产/进口</span>
                        </div>
                        <div class="ct-wrap">
                            <div class="ct-row" v-for="good in goods">
                                <div class="row-line">
                                    <span class="ct-col w80">{{good.goodscode}}</span>
                                    <span class="ct-col w100 break-it">
                                        <span class="break inner">{{good.goodsname}}</span>
                                    </span>
                                    <span class="ct-col w60">{{good.goodsspec}}</span>
                                    <span class="ct-col w100 break-it">
                                        <span class="break inner">{{good.producer}}</span>
                                    </span>
                                    <span class="ct-col w90">{{good.importedflag==1?'国产':good.importedflag==1?'进口':''}}</span>
                                </div>
                            </div>
                            <div class="ct-row" v-if="goods.length==0">
                                <div class="ct-row" style="height:35px;text-align:center;">
                                    <span class="ct-col"> <font>没有查询到相关信息！</font>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="select-head" v-if="this.$route.params.guid==0">
                待提交
                <div class="checkbox-control checkbox-green checkbox-inline">
                    <input type="checkbox" v-model="checkAll" name="selAll" id="cball">
                    <label class="checkbox" for="cball">全选</label>
                </div>
            </div>
            <div class="ctable ct-parent" v-if="this.$route.params.guid==0">
                <div class="ct-head">
                    <span class="ct-col w140">序号</span>
                    <span class="ct-col w180">注册证号</span>
                    <span class="ct-col w150">有效期</span>
                    <span class="ct-col w170">生产厂商</span>
                    <span class="ct-col w120">产品来源</span>
                    <span class="ct-col w80">规格数</span>
                </div>
                <div class="ct-row active" v-for="reg in registLics">
                    <div class="row-line">
                        <span class="ct-col w140 cert-select">
                            <div class="checkbox-control checkbox-green checkbox-alone">
                                <input type="checkbox" name="cb" id="cb{{$index}}" value="{{reg.guid}}" v-model="checkRegistLics">
                                <label class="checkbox" for="cb{{$index}}"></label>
                            </div>
                            {{$index+1}}
                            <div class="cert-mini" style="background-image: url(../assets/c14.png)">
                                <span class="cert-max"></span>
                            </div>
                        </span>
                        <span class="ct-col w180 break-it">
                            <div class="p-name break">{{reg.registkeyname}}</div>
                            <div class="p-cert-num break">{{reg.registkey}}</div>
                        </span>
                        <span class="ct-col w150 break-it">
                            <span class="valid-date break">{{reg.begindate | getYMD}}至{{reg.enddate | getYMD}}</span>
                        </span>
                        <span class="ct-col w170 break-it">
                            <span class="com-name break">{{reg.producer}}</span>
                        </span>
                        <span class="ct-col w120">0</span>
                        <span class="ct-col w80 activate focus">
                            <div>
                                <a href="javascript:void(0);">{{reg.guigeNum}}</a>
                            </div>
                        </span>
                    </div>
                    <div class="row-launch">
                        <h3>规格数（3）</h3>
                        <table class="itable">
                            <thead>
                                <tr>
                                    <th class="w120">商品编号</th>
                                    <th class="w160">商品名称</th>
                                    <th class="w100">规格</th>
                                    <th class="w180">生产厂商</th>
                                    <th class="w140">国产/进口</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>S0001</td>
                                    <td>一次性使用无菌注射器</td>
                                    <td>1ml</td>
                                    <td>山东玉源有限公司</td>
                                    <td>国产</td>
                                </tr>
                                <tr>
                                    <td>S0002</td>
                                    <td>一次性使用无菌注射器</td>
                                    <td>1.5ml</td>
                                    <td>山东玉源有限公司</td>
                                    <td>国产</td>
                                </tr>
                                <tr>
                                    <td>S0003</td>
                                    <td>一次性使用无菌注射器</td>
                                    <td>2ml</td>
                                    <td>山东玉源有限公司</td>
                                    <td>国产</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="zip"></div>
                    </div>
                </div>
            </div>
        </div>
    </template>
<script>
  
  module.exports = {
    data: function () {
      return {
            importedFlag: [{
                value: '2',
                label: '进口'
            }, {
                value: '1',
                label: '国产' 
            }],
            isPro: true,
            registeLic:{},
            registLics:[],
            checkRegistLics:[],
            checkAll:false,
            search:{
                guids:'',
            },
            goods:[],
            searchGoods:{
                search_EQ_productguid:'',
            },
            productList:[],
            production:{},
            checkProduct:{},
            uploads:[],
            canSave:true,
            canAdd:true,
            //主数据商品
            mfmsdgoods:{},
        };
    },
    methods: {
      nav: function(ispro) {
          this.isPro = ispro;
      },
      getRegisteLic: function () {
        var self = this, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
        if (this.$route.params.guid != '0') {
          Ajax.get('/supplierProductLic/YLRegistLic/' + this.$route.params.guid)
            .then(function (response) {
                self.$set('registeLic', response.data.data);
                self.setIsUse('no');
                //展示图片
                if(self.registeLic.pictcontent!=null){
                    var jsonObj=eval('('+self.registeLic.pictcontent+')');
                    var picArry=jsonObj.goodspict;
                    for(var i=0;i<picArry.length;i++){
                        var path=imgReg.test(picArry[i].pictcont.Original.path) ? picArry[i].pictcont.Original.path : picArry[i].pictcont.Original.path+picArry[i].pictcont.Original.name;
                        var jsonUrl=JSON.parse('[{"path":"'+path+'"}]');
                        if(self.uploads.length<4){
                          $("#pic0").css("display","block");
                        }
                        self.uploads.push(jsonUrl[0]);
                    }
                    if(self.uploads.length==4){
                      $("#showupload").css("display","none");
                    }
                }else{
                  self.uploads=[];
                }
            });
        } else {
          self.registeLic = {};
          self.uploads=[];
          self.productList=[];
          self.canSave=true;
          self.canAdd=true;
        }
      },
      listGoodsByProduct:function(){
        var self = this;
        Ajax.get('/supplierProductLic/listGoodsByProduct',self.mfmsdgoods)
          .then(function (response) {
            var data = response.data.data;
            self.$set('goods', data);
        });
      },
      listRegistLic: function () {
        var self = this;
        self.search.
        Ajax.get('/supplierProductLic/YLRegistLic',self.search)
          .then(function (response) {
            var data = response.data.data;
            self.$set('registLics', data);
        });
      },
      addYLRegistLic:function(){
         this.$set('registLics', []);
      },
      saveYLRegistLic: function () {
        var self = this;
        if(self.uploads.length>0){
          self.picJson='';
          for(var i=0;i<self.uploads.length;i++){
             self.setPicJson(self.uploads[i]);
          }     
          self.registeLic.pictcontent='{"goodspict":['+self.picJson+']}';
        }
        Ajax.post('/supplierProductLic/YLRegistLic/save', this.registeLic)
          .then(function (response) {
             self.MessageBox.alert('保存成功').then(function(action){
                self.$route.router.go('/cert');
             });
          });
      }, 
      submitYLRegistLics:function(){
        var self = this;
        var guids="";
        if(self.checkRegistLics.length>0){
            for(var i=0;i<self.checkRegistLics.length;i++){
                if(i==(self.checkRegistLics.length-1)){
                    guids+="'"+self.checkRegistLics[i]+"'";
                }else{
                    guids+="'"+self.checkRegistLics[i]+"',";
                }
            }
            self.search.guids=guids;
        }else{
            layer.msg('请选择未提交的医疗器械注册证！');
            return;
        }
        Ajax.get('/supplierProductLic/submitRegistLic',this.search)
          .then(function (response) {
            var data = response.data;
            if(data.errorCode==0){
                self.MessageBox({title:'提示',message:'提交成功！',type:'alert'
                },function(action){
                   self.$route.router.go('/cert');
                }); 
            }else{
                self.MessageBox({title:'提示',message:'提交失败！',type:'alert'
                },function(action){
                   self.$route.router.go('/cert');
                }); 
                return;
            }
        });
      },
      deleteYLRegistLic: function () {
        var self = this;
        Ajax.get('/user/delete/' + this.user.guid)
          .then(function (response) {
            self.MessageBox.alert(self.codes[num] + '成功').then(function(action){
                self.$route.router.go('/user');
            })
        });
      },
      selProduct:function(){
        var self=this;
        self.registeLic.productguid=self.checkProduct.guid;
        self.registeLic.producer=self.checkProduct.registrantname;
        self.registeLic.registkey=self.checkProduct.registkey;
        self.registeLic.importedflag=self.checkProduct.importedflag;
        self.$set('registeLic.producer', self.checkProduct.registrantname);
        self.searchGoods.search_EQ_masterguid=self.checkProduct.guid;
      },
      fileChange:function(data){
        var self=this;
        data=JSON.parse(data);
        for(var i=0;i<data.length;i++){
          this.uploads.push(data[i])
        }
        if(self.uploads.length==4){
          $("#showupload").css("display","none");
        }
      },
      deleteimg:function(index){
          this.uploads.splice(index,1);  
      },
      setPicJson:function(data){
        var picName="";
        picName=data.path.replace("/uploads/","");
        var jstr='{"filename":"'+picName.split(".")[0]+'",';
        jstr+='"pictcont":{"Original":{"name":"'+picName+'","path":"'+'/uploads/'+'"},';
        jstr+='"Thumbnail":{"name":"'+picName+'","path":"'+'/uploads/'+'"},';
        jstr+='"mobil":{"name":"'+picName+'","path":"'+'/uploads/'+'"}}},';
        this.picJson +=jstr;
      },
      modifyInfo:function(){
          var self = this;
          this.setIsUse('yes');
      },
      setIsUse:function(type){
          if(type=='no'){
            this.canSave=false;
            this.canAdd=false;
            $("input[type='text']").each(function(i){
                $(this).attr("readonly","readonly");
            });
            $("input[type='radio']").each(function(i){
                  $(this).attr("disabled","disabled");
            });
            $("textarea").each(function(i){
                  $(this).attr("readonly","readonly");
            });
          }else if(type=='yes'){
            this.canSave=true;
            this.canAdd=true;
            $("input[type='text']").each(function(i){
                $(this).removeAttr("readonly","readonly");
            });
            $("input[type='radio']").each(function(i){
                  $(this).removeAttr("disabled","disabled");
            });
            $("textarea").each(function(i){
                  $(this).removeAttr("readonly","readonly");
            });
          }
          $("#cn1").attr("readonly","readonly");
      }
    },
    route: {
      activate: function () {
        this.getRegisteLic();
        this.listRegistLic();
        this.goods=[];
      }
    },
    watch: {
        'registeLic.registkeyname': function (val, oldVal) {
            if(val!=''){
                var self = this;
                self.production.productname=val;
                Ajax.get('/supplierProductLic/productList',self.production)
                  .then(function (response) {
                    var data = response.data.data;
                    self.$set('productList', data);
                    //选择匹配的产品
                    if(self.productList.length>0){
                        for(var i=0;i<self.productList.length;i++){
                            if(self.registeLic.productguid==self.productList[i].guid){
                                self.checkProduct=self.productList[i];
                            }
                        }
                    }
                });
            }
        },
        'checkProduct': function(val){
            this.mfmsdgoods.producerguid=val.guid;
            this.listGoodsByProduct();
        },
        'checkAll':function(val){
            this.checkRegistLics=[];
            if(val && this.registLics.length>0){
                for(var i=0;i<this.registLics.length;i++){
                    this.checkRegistLics.push(this.registLics[i].guid);
                }
            }
        }
    },
  };

</script>