<!-- 机构中心-已生成令牌查看详情 By_liucf -->
<template>
  <div class="token">
    <MiniTitle>
      <div slot="mini" class="miniTit">
        <img src="../../images/return.png" height="18" width="18" class="back" @click="back">
        机构中心——已生成令牌——已有令牌
      </div>
    </MiniTitle>
    <div class="box">
      <h3>{{info.productName}}</h3>
      <div class="btn delBtn" @click="delKey">删除</div>
      <p>令牌生成时间：{{info.gmtCreate}}</p>
      <!-- 默认为1-启用 -->
      <p v-if="info.status==1" class="tokenBtn">{{info.serviceName}}令牌 
        <span class="start grayCol">启用</span>
        <span class="forbid" @click="forbid">禁用</span>
      </p>
      <p v-else-if="info.status==0" class="tokenBtn">{{info.serviceName}}令牌 
        <span class="start" @click="open">启用</span>
        <span class="forbid grayCol">禁用</span>
      </p>
      <table class="keyText">
        <tr class="tr">
          <td class="info">AppKeyId:</td>
          <!-- <td width="80%"><input type="text" name="" v-model="keyId" readonly id="appkey"></td> -->
          <td width="80%"><input type="text" name="" :value="info.appKeyId" readonly :disabled="info.status==0?true:false" id="appkey"></td>
          <td class="info1">
            <span v-if="info.status==1" class="btn copyBtn" @click="copy('appkey')">复制</span>
            <span v-else class="btn copyBtn disable">复制</span>
            
          </td>
        </tr>
        <tr class="tr">
          <td class="info">AppKeySecret:</td>
          <td><input type="text" name="" :value="info.appKeySecret" readonly :disabled="info.status==0?true:false" id="appsecret"></td>
          <td class="info1">
            <span v-if="info.status==1" class="btn copyBtn" @click="copy('appsecret')">复制</span>
            <span v-else class="btn copyBtn disable">复制</span>  
          </td>
        </tr>
      </table>
        <!-- 弹窗 -->
      <div :class="[{'hide':toast},'mark']">
        <div class="toast">
          <i class="el-icon-close" @click="close"></i>
          <p>{{ text }}</p>
          <div class="bbtn toast-btn" @click="confirn">{{btnText}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import MiniTitle from '../common/MiniTile.vue'
  import api from '../../api/user.js'
  export default {
    name:'CreatedToken',
    data(){
      return{
        info:{},
        product:'',
        service:'',
        id:'',
        toast:true,
        text:'',
        btnText:'',
        btnFlag:null,//1删除，2禁用
      }
    },
    created(){
      this.id = this.$route.query.id;
      this.getTokenData();
    },
    methods:{
      getTokenData(){
        const id = this.id;
        api.detailProductService(id).then((res)=>{
          let result = res.data;
          if(+result.code == 0){
            this.info = result.data;
          }else{
            this.$message.error(result.msg);
          }
        })
      },
      back(){
        this.$router.go(-1);
      },
      copy(id){
        let keyDom = document.getElementById(id);
        keyDom.select();
        document.execCommand("Copy");
        this.$message({
          message: '复制成功',
          type: 'success',
        });
      },
      delKey(){
        this.toast = false;
        this.text = "您确定要删除该令牌吗？删除该令牌可能无法使用朗通产品，可能会影响现有业务。";
        this.btnText = "立即删除";
        this.btnFlag = 1;
      },
      open(){//开启令牌
        api.openServiceToken(this.id).then((res)=>{
          let result = res.data;
          if(+result.code == 0){
            this.info.status = 1;
            this.$message({
              message: '已经启用',
              type: 'success'
            });
          }else{
            this.$message({
              message: result.msg,
              type: 'warning'
            });
          }
        })
      },
      forbid(){//禁用令牌
        this.toast = false;
        this.text = "您确定要禁用该令牌？禁用该令牌可能导致该服务端无法使用，影响现有业务。";
        this.btnText = "立即禁用";
        this.btnFlag = 2;
      },
      confirn(){
        this.toast = true;
        const id = this.id;
        const params = {
          'productId':this.info.productId,
          'serviceId':this.info.serviceId
        }
        if(this.btnFlag == 1){//删除
          // api.delServiceToken(id).then((res)=>{
            // api.delProductService(params).then((res)=>{//调用外层删除接口-10月12 zhaops
            api.delProductService(id).then((res)=>{//调用外层删除接口-传参修改-10月15 zhaops
            let result = res.data;
            if(+result.code == 0){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.$router.go(-1);//返回上一页
            }else{
              this.$message.error(result.msg);
            }
          })
        }else if(this.btnFlag == 2){//禁用
          api.forbidServiceToken(id).then((res)=>{
            let result = res.data;
            if(+result.code == 0){
              this.info.status = 0;
              this.$message({
                message: '禁用成功',
                type: 'success'
              });
            }else{
              this.$message.error(result.msg);
            }
          })
        }
      },
      close(){
        this.toast = true;
      },
    },
    components:{
      MiniTitle
    },
  }
</script>
<style lang="less">
  @import '../../less/user.less';
  .token{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .base;    
    .btn{
      .button;
      .border;
    }
    .miniTit{
      .miniTitle;  
    }
    .back{
      vertical-align: middle;
      cursor: pointer;
    }
    .box{
      margin: 20px;
      padding: 20px;
      position: relative;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 2px;
      h3{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .tokenBtn{
        margin:20px 0 20px;
        .start{
          color:#1774f0;
          margin-left: 20px;
          cursor: pointer;
        }
        .forbid{
          color: #dd0f0f;
          margin-left: 20px;
          cursor: pointer;
        }
        .grayCol{
          color:#c9c9c9;
        }
      }
      .delBtn{
        color: #fff;
        background-color: #ffb03b;
        border: none;
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .keyText{
          width: 100%;
          input{
            height: 30px;
            width: 99%;
            margin-left: 15px;
            padding-left: 10px;
          }
          .copyBtn{
            border-color: #1774f0;
            color: #1774f0;
            margin-left: 30px;
          }
          .disable{
            border-color: #ccc;
            background:#ccc;
            color:#fff;
            cursor:text;
          }
          .tr{
            height:50px;
          }
        }
        .info{
          width: 10%;
          text-align: right;  
        }
        .info1{
          width: 10%;
          text-align: left;  
        }

        .mark{
            width: 100%;
            height:100%;
            position: fixed;
            top: 0;
            left:0;
            background-color:rgba(0,0,0,0.4);
            z-index: 55;
          }
        .toast{
          width: 280px;
          height:150px;
          background:#fff;
          border-radius:2px;
          position: absolute;
          top: 50%;
          left:50%;
          transform:translate(-50%,-50%);
          z-index: 56;
          padding:35px;
          text-align: center;
          p{
            margin-top: 40px;
          }
        }
        .el-icon-close{
          font-size: 16px;
          cursor: pointer;
          position: absolute;
          top: 16px;
          right: 16px;
        }
        .hide{
          display:none;
        }
        .bbtn{
          width: 80px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background: #1774f0;
          text-align: center;   
          border-radius: 2px;
          position: absolute;
          bottom: 20px;
          right: 25px;
          cursor: pointer;
        }
        .toast-btn{
          width: 90px;
          bottom:35px;
          right:130px;
        }
    }
  }
</style>