<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="canEdit" class="fbtn fb-modify">修改</a>
                    <a href="javascript:void(0)" v-else class="fbtn fb-modify" style="color:#DCDCDC">修改</a>
                    <a href="javascript:void(0)" v:disabled="false" v-if="'/supplier/authorize:deleteAuthorizePO' | myqx !canDelete"  style="color:#DCDCDC" class="fbtn fb-remove">删除</a>
                    <a href="javascript:void(0)" v-if="'/supplier/authorize:deleteAuthorizePO' | myqx canDelete" @click="deleteAuthorize" class="fbtn fb-remove">删除</a>
                    <a href="javascript:void(0)" v:disabled="false" v-if="'/supplier/authorize:saveOrUpdateAuthorizePO' | myqx !canSave"  style="color:#DCDCDC" class="fbtn fb-save">提交</a>
                    <a href="javascript:void(0)" @click="saveAuthorize" v-if="'/supplier/authorize:saveOrUpdateAuthorizePO' | myqx canSave" class="fbtn fb-save">提交</a>
                    <a v-if="countTrs==0"  style="color:#DCDCDC" href="javascript:void(0)" class="fbtn fb-book">业务资料</a>
                    <a href="javascript:void(0)" v-if="countTrs>0" class="fbtn fb-book" v-link="{path:'/certAuthEdit2/'+aiz_bak.guid}">业务资料</a>
                </div>
                <h3 class="current-module">维护经销授权书证照</h3>
            </div>
            <img width="500" style="position: absolute;right: 0;" src="/images/step-by.png">
            <div class="cert-info clearfix">
                <div class="text-color-blue h-30">产品名称：{{productname}}</div>
                <div class="text-color-blue h-30">注册证号：{{registkey}}</div>
                <div class="text-color-blue h-30">生产厂家：{{producer}}</div>
            </div> 
            <div class="over-scroll mb-20 content" style="width:1004px; margin-left:0px;background-color: transparent;" id="content-1">
                <div class="auth-list">
                    <div class="al-head">逐级授权</div>
                    <ul class="al-extend">
                        <li class="auth-org" v-for="(a, aiz) in authorizes" :class="{ 'auth-null': a<authorizes.length, 'active': currentIndex == a}" style="background-image:none;">
                            <span class="remove_icon" @click="removeAuth(a)" v-if="cs1 && a>0">×</span>
                            <span @click="showValue(a)">{{aiz.authorizecorpname}}</span>
                        </li>
                        <li class="auth-org auth-null">
                            <span @click="addAuthorize()" v-if="canDelete"></span>
                            <span v-else></span>
                        </li>
                    </ul>
                </div>
            </div> 
            <div class="from-button fr mt-20" :style="{opacity: cs1?1:0}"> 
              <a href="javascript:;" class="green-button icon save t-right" @click="save" >保存</a> 
          </div>
            <div class="auth-form">
                <div class="auth-unit">
                    <div class="au-item">
                        <label for="comName" class="label">开具授权书公司</label>
                        <input type="text" id="comName" v-model="authorize.authorizecorpname" v-if="cs1">
                        <input type="text" id="comName" v-model="authorize.authorizecorpname" v-if="!cs1" readonly="readonly"></div>
                    <div class="au-item">
                        <label class="label">授权单位类型</label>
                        <div class="radio-control">
                            <radio :list="AuthorizeCorpTypeList" :checked.sync="authorize.authorizecorptype" v-if="cs1"></radio>
                            <radio :list="AuthorizeCorpTypeList" :checked.sync="authorize.authorizecorptype" v-if="!cs1" disabled="disabled"></radio>
                        </div>
                    </div>
                    <div class="au-item">
                        <label class="label">总代</label>
                        <div class="radio-control">
                            <radio :list="isgeneralagentList" :checked.sync="authorize.isgeneralagent" v-if="cs1"></radio>
                            <radio :list="isgeneralagentList" :checked.sync="authorize.isgeneralagent" v-if="!cs1" disabled="disabled"></radio>
                        </div>
                    </div>
                </div>
                <div class="au-cert clearfix" v-for="lic in authorizeLics" :key="index" style='overflow:inherit;'>
                    <div class="pic-box" :style="{backgroundImage:'url('+lic.path+')'}" v-if="lic.path!='' && lic.path!=null">
                        <span @click="modifyPic($index)">修改照片</span>
                    </div>
                    <uploads v-if="lic.path == '' || lic.path == null" 
                        :class="['pic-box pic-empty']"
                        :display="'block'"
                        :sdguid="''+$index"
                        :multiple= " false"
                        :readonly="picReadonly"
                        @file-change="fileChange">
                        <span>选择照片</span>
                    </uploads>
                    <div class="pic-message">
                        <div class="pm-item">
                            <label for="cc1">授权范围</label>
                            <textarea v-model="lic.authorizerange" v-if="cs1">{{lic.authorizerange}}</textarea>
                            <textarea v-model="lic.authorizerange" v-if="!cs1" readonly="readonly" style="background-color: #F0F4F5;">{{lic.authorizerange}}</textarea>
                        </div>
                    </div>
                    <div class="pic-message">
                        <div class="pm-item">
                            <label for="cc2">授权时间</label>
                            <datepicker_authorize  :tips="'开始日期'" :target.sync="lic.begindate | getYMD" :readonly="!cs1"></datepicker_authorize>
                        </div>
                        <div class="pm-item">
                            <label for="cc3">授权截止</label>
                            <datepicker_authorize :tips="'有效日期'" :target.sync="lic.enddate | getYMD" v-if="lic.isunlimited!='Y'" :readonly="!cs1"></datepicker_authorize>
                            <input type="text" class="date-text text-color-gray-shallow" id="cc3" value="无限期" v-if="lic.isunlimited=='Y'" :readonly="!cs1"></div>
                        <div class="pm-item">
                            <label for="cc3">&emsp;</label>
                            <div class="checkbox-control">
                                <input type="checkbox"
                                       v-model="lic.isunlimited"
                                       name="cb"
                                       v-bind:true-value="'Y'"
                                       v-bind:false-value="'N'"
                                       id="wxq{{$index}}"
                                       :disabled="!cs1">
                                <label class="checkbox" for="wxq{{$index}}">无期限</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="pt30">
                <a href="javascript:void(0);" @click="addAuthorizeLic" class="btn button-green icon add">添加授权范围</a>
            </div>
        </div>
    </div>
</template>
<script>

    module.exports = {
        data: function () {
            return {
                picReadonly:0,//图片显示，默认不显示
                canEdit: false,
                countTr:1,
                countTrs:0,
                trVO:{
                    guid:'',
                    variationtype:'V05',
                },
                cs1:false,
                productname:'',
                registkey:'',
                producer:'',
                AuthorizeCorpTypeList: [{
                    value: '1',
                    label: '经销商'
                }, {
                    value: '2',
                    label: '生产厂商'
                }],
                isgeneralagentList: [{
                    value: "Y",
                    label: "是"
                },
                    {
                        value: "N",
                        label: "否"
                    }],
                saveAizs:{},
                authorize: {},
                authorIndex: 0,
                authorizes:[],
                authorizeLics:[],
                currentIndex:0,
                uploads1:[],
                show1:false,
                canSave:false,
                canDelete:false,
                aiz_bak:{},
            };
        },
        methods: {
            getData: function () {
                var self = this;
                if (this.$route.params.guid != '0') {
                    Ajax.get('/supplierProductLic/Authorize/' + this.$route.params.guid)
                        .then(function (response) {
                            self.$set('authorizes', response.data.data);
                            self.aiz_bak=self.authorizes[0];
                            //是否有变更单
                            self.existTr();
                            self.canSave=false;
                            self.canDelete=false;
                            if(self.authorizes.length==0){
                                var json1='{"authorizecorpname":"","authorizecorptype":"1","isgeneralagent":"Y","lics":[]}';
                                self.authorizes.push(JSON.parse(json1));
                                var json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":"","path":""}';
                                self.authorizeLics.push(JSON.parse(json));
                            }else{
                                for(var i=0;i<self.authorizes.length;i++){
                                    delete self.authorizes[i]["aizs"];
                                }
                                self.showValue(0);
                                // if(self.authorizes[0].lics.length==0){
                                //   var json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":"","path":""}';
                                //   self.authorizeLics.push(JSON.parse(json));
                                // }
                                // console.log(self.authorizes[0].productname);
                            }
                            self.productname=self.authorizes.at(-1).productname;
                            self.registkey=self.authorizes.at(-1).registkey;
                            self.producer=self.authorizes.at(-1).producer;
                        });
                } else {
                    self.authorize = {};
                    self.canSave=true;
                    self.canDelete=true;
                }

            },
            addAuthorizeLic:function(){
                var json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":""}';
                this.authorizeLics.push(JSON.parse(json));
            },
            addAuthorize:function(){
                var i=this.authorizes.length;
                if(i>0){
                    if(this.authorizes[0].authorizecorpname==''){
                        layer.msg('请填写授权单位!');
                        return;
                    }
                    //this.authorizes[0].lics=[];
                    //this.authorizes[0].lics=this.authorizeLics;
                }
                var json='{"authorizecorpguid":"","guid":"","authorizelevel":"2","authorizecorpname":"","authorizecorptype":"1","isgeneralagent":"Y","lics":[],"productguid":"","productname":"","registkey":"","registrantname":"","supplierguid":"","zjCount":""}';
                this.authorizes.splice(0,0,JSON.parse(json));  
                this.authorize=JSON.parse(json);
                this.authorizeLics=[];
                json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":"","path":""}';
                this.authorizeLics.push(JSON.parse(json));
                //this.authorizes[0].lics=this.authorizeLics;
                this.$set("authorizes[0].lics",this.authorizeLics);
                this.currentIndex=0;
            },
            removeAuth(aIndex){
                if(!this.cs1){
                    layer.msg('非编辑状态下不可进行删除操作');
                    return
                } 
                const self = this;
                layer.confirm('是否确定删除该授权单位', {icon: 3, title:'提示'}, function(index){
                    layer.close(index);
                    self.authorizes.splice(aIndex,1);
                    self.currentIndex = 0;
                    self.showValue(0);
                });
            },
            showValue:function(index){
                var i=this.authorizes.length, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                if(this.currentIndex==(this.authorizes.length-1) && this.authorizes[0].authorizecorpname!=''){
                    //this.authorizes[0].lics=[];
                    //this.authorizes[0].lics=this.authorizeLics;
                }
                this.currentIndex=index;
                this.authorize=this.authorizes[index];
                if(this.authorizes[index].lics.length>0){
                    this.authorizeLics=[];
                    this.$set('authorizeLics', this.authorizes[index].lics);
                    var size=this.authorizes[index].lics.length;
                    for(var i=0;i<size;i++){
                        var data=this.authorizes[index].lics[i].pictcontent;
                        if(data!=null){
                            data=JSON.parse(data);
                            var path=imgReg.test(data[0].thumbnail.path) ? data[0].thumbnail.path : data[0].thumbnail.path+data[0].thumbnail.name;
                            this.$set('authorizeLics['+i+'].path',path);
                        }
                    }
                }else{
                    this.authorizeLics=[];
                    var json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":"","path":""}';
                    this.authorizeLics.push(JSON.parse(json));
                }
            },
            save(){
                var self = this;
                var len=this.authorizes.length;
                if(this.authorizes[self.currentIndex].authorizecorpname!=''){
                    this.authorizes[self.currentIndex].lics=[];
                    
                      if(self.authorizeLics[0].authorizerange =='' || self.authorizeLics[0].authorizerange == null){
                              layer.msg('请填写授权范围！');
                              return
                      }
                      if(self.authorizeLics[0].isunlimited=='Y'){
                        self.authorizeLics[0].enddate = 1
                      }
                      if(self.authorizeLics[0].enddate =='' || self.authorizeLics[0].enddate == null){
                              layer.msg('请选择授权截止时间！');
                              return
                      }
                    self.authorizes[self.currentIndex].lics=self.authorizeLics;
                }
                
                layer.msg('保存成功')
                // console.log(self.authorizes);
                // console.log(self.saveAizs);
                // if(self.saveAizs.aizs.length==2){
                //     self.saveAizs.aizs[0].guid=self.aiz_bak.guid
                // }
                console.log(self.authorizes);
            },
            //保存授权证照
            saveAuthorize: function () {
                var self = this;
                self.saveAizs.guid=self.aiz_bak.guid;
                self.saveAizs.productguid=self.aiz_bak.productguid;
                self.saveAizs.productname=self.aiz_bak.productname;
                self.saveAizs.supplierguid=self.aiz_bak.supplierguid;
                self.saveAizs.registkey=self.aiz_bak.registkey;
                self.saveAizs.aizs=self.authorizes;
                let layerLoad = layer.load(2, {shade: [0.15, '#000'], time: 0});
                Ajax.post('/supplierProductLic/Authorize/save', self.saveAizs)
                    .then(function (response) {
                        layer.close(layerLoad);
                        if(response.data.errorCode==0){
                            self.MessageBox({title:'提示',message:'提交成功！',type:'alert'
                            },function(action){
                                self.$route.router.go('/cert/certAuthList');
                            });
                        }else{
                            layer.msg('提交失败!');
                        }
                    }).catch(() => {
                        layer.close(layerLoad);
                    });
            },
            //删除授权证照
            deleteAuthorize: function () {
                var self = this;
                Ajax.get('/supplierProductLic/Authorize/delete/' + self.authorizes[0].productguid)
                    .then(function (response) {
                        if(response.data.errorCode==0){
                            self.MessageBox({title:'提示',message:'删除成功！',type:'alert'
                            },function(action){
                                self.$route.router.go('/cert/certAuthList');
                            });
                        }else{
                            self.MessageBox({title:'提示',message:'删除失败！',type:'alert'
                            },function(action){
                            });
                        }
                    });
            },
            //上传
            fileChange:function(data){
                var self=this, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                var backObj=JSON.parse(data);
                data=backObj.data;
                var index=backObj.sdguid;
                for(var i=0;i<data.length;i++){
                    var path=imgReg.test(data[i].thumbnail.path) ? data[i].thumbnail.path : data[i].thumbnail.path+data[i].thumbnail.name;
                    var json='{"path":"'+path+'"}';
                    self.$set('authorizeLics['+index+'].pictcontent',"["+JSON.stringify(data[i])+"]");
                    self.$set('authorizeLics['+index+'].path',path);
                }
            },
            //修改图片
            modifyPic: function(index){
                this.authorizeLics[index].path='';
            },
            //修改
            modifyInfo:function(){
                var self = this;
                if(self.countTr>0){
                    layer.msg(self.editMsg);
                    return false
                }
                self.canSave=true;
                self.canDelete=true;
                self.cs1=true;
                self.picReadonly = 1;//可以添加图片
            },
            existTr:function(){
                var self=this;
                self.trVO.guid=self.aiz_bak.guid
                Ajax.post('/businessData/isExistExc',self.trVO)
                    .then(function(response){
                        if(response.data.data==0){
                            Ajax.post('/businessData/existTrvariation',{
                                guid:self.aiz_bak.supplierguid,
                                variationtype: self.trVO.variationtype,
                                sdguid:self.trVO.guid
                            }).then(function(response){
                                    if(!response.data.data || response.data.data == 'R'){
                                        self.countTr=0;
                                        self.canEdit = true;
                                    }else {
                                        self.countTr=1;//修改按钮不可以改1
                                        self.countTrs=0;
                                        self.canEdit = true;
                                        self.editMsg='该经销授权书资质正在审核中，审核通过后请前往业务资料中修改。'
                                    }
                                });
                        }else {
                            self.countTr=0;//修改按钮可以改0
                            self.countTrs=1;//业务资料可以改1
                            self.canEdit = false;
                            self.editMsg='该经销授权书已有变更单，您可以进入【业务资料】修改并且提交审核！'
                        }

                    });
            }
        },
        route: {
            activate: function () {
                this.countTr=0;
                this.cs1 = false;
                this.picReadonly = 0;
                this.getData();
            }
        },
        watch: {
            'authorize.authorizecorpname':function(val){
                if(this.currentIndex==0){
                    this.authorizes[0].authorizecorpname=val;
                }
            },
            'authorize.authorizecorptype':function(val){
                if(this.currentIndex==0){
                    this.authorizes[0].authorizecorptype=val;
                }
            },
            'authorize.isgeneralagent':function(val){
                if(this.currentIndex==0){
                    this.authorizes[0].isgeneralagent=val;
                }
            }
        },
    };

</script>
<style scoped lang="sass">
.cert-info_panel {
    display: flex;
    justify-content: space-between;

    .sketch_pic {

        .pic_panel {
            display: flex;
            align-items: center;

            .pic_item {
                padding: 20px 25px;
                border: 2px solid #4fa1a4;
                border-radius: 10px;
                background: #fff;
                font-size: 16px;
                color: #888;
            }

            .pic_guid_icon {
                width: 42px;
                margin: 0 10px;
                height: 2px;
                background: #4fa1a4;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                }
            }
        }
    }
}
.al-extend {
    .auth-org {
        position: relative;

        .remove_icon {
            width: 20px;
            height: 20px;
            padding: 0;
            text-align: center;
            line-height: 20px;
            font-size: 24px;
            background-color: rgba(0, 0, 0, 0.35);
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            display: none;
        }

        &:hover {
            .remove_icon {
                //display: block;
            }
        }
    }
}
.auth-list .al-extend li.auth-null {
    border-color: #ddd;
}
.auth-list .al-extend li.auth-null.active {
    border-color: #86b8bc;
}
</style>