<!-- 已生成令牌 By_liucf -->
<template>
  <div class="management">
    <MiniTitle>
      <div slot="mini" class="miniTit">
        机构中心——已生成令牌
      </div>
    </MiniTitle>
    <div class="box">
      <el-table
        :data="serviceList"
        style="width: 100%">
        <el-table-column
          prop="index"
          label="编号"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="建立时间"
          width="160"
          align="center">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="接入产品名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="serviceName"
          label="服务端名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="serviceDescription"
          label="服务端描述"
          align="center">
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
          width="160">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, serviceList)">删除</el-button>
          </template>
        </el-table-column> -->
        <el-table-column
          label="查看令牌"
          align="center"
          width="160">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleLook(scope.$index, serviceList)">查看</el-button>
          </template>
        </el-table-column>
      </el-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">立即删除</div>
        </div>
    </div>
    </div>
    <div class="block" v-if="total>size">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="size"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- <div class="btn btnConfirm" @click="handleCurrentChange">确定</div> -->
      </div>
  </div>
</template>
<script type="text/javascript">
  import MiniTitle from '../common/MiniTile.vue'
  import api from '../../api/user.js'
  export default{
    name:'AlreadyToken',
    data(){
      return{
        serviceList:[],
        currentPage:1,
        size:10,
        total:1,
        del:'删除',
        toast:true,
        text:'您确定要删除该服务端？删除该服务端可能无法使用朗通产品，可能会影响现有业务。',
        serviceIndex:null
      }
    },
    created(){
      let page = Number(sessionStorage.getItem('tokenPage'));
      if(page){
        this.currentPage = page;
        this.getInfoList();
        sessionStorage.setItem('tokenPage',null);
      }else{
        this.getInfoList();
      }
      
    },
    components:{
      MiniTitle
    },
    methods:{
      getInfoList(){//获取服务端列表
        const params = {
          'current':this.currentPage,
          'size':this.size
        }
        api.alreadyServiceToken(params).then((res)=>{
          let result = res.data;
          if(+result.code == 0){
            let dataList = result.data.records;
            dataList.forEach((item,index)=>{
              item.index = (index+1)+(this.currentPage-1)*this.size;
              return item
            });
            this.serviceList  = dataList;
            this.total = result.data.total;
          }
          
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getInfoList();
      },
      handleDelete(index, rows) {
        this.serviceIndex = index;
        this.toast = false;
      },
      handleLook(index,data){//查看令牌携带参数
        sessionStorage.setItem('tokenPage',this.currentPage);
        let id = data[index].id;
        this.$router.push({path:'CKLPXQ',query:{id:id}});   
      },
      confirn(){//确认删除
        this.toast = true;
        const index = this.serviceIndex;
        const params = {
          'productId':this.serviceList[index].productId,
          'serviceId':this.serviceList[index].serviceId
        }
        const id = this.serviceList[index].id;
        // api.delProductService(params).then((res)=>{//删除接口-传参修改-10月15 zhaops
        api.delProductService(id).then((res)=>{
          let result = res.data;
          if(+result.code == 0){
            // this.serviceList.splice(index,1);//前端删除
            this.getInfoList();//重新获取，更新数据
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.serviceIndex = null;
          }else{
            this.$message({
              message: result.msg,
              type: 'warning'
            });
          }
        })
      },
      close(){
        this.toast = true;
        this.serviceIndex = null;
      },
    }
  }
</script>
<style lang="less" scoped>
@import '../../less/user.less';
  .management{
    width: 100%;
    /*height: 100%;*/
    height: 93%;
    box-sizing: border-box;
    .base;

    .miniTit{
      .miniTitle;  
    }
    .btn{
        .button;
      }
      .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;
      }
    .btnBox{
      margin-right: 20px;
      .lingpai{
        width: 90px;
        height:24px;
        line-height: 24px;
        margin-left: 10px;
        color:#fff;
        background-color: #1774f0;
      }
    }
    .box{
      height:70%;
      background: #fff;
      position: relative;
      padding: 20px 20px 40px;
      margin: 20px;
      border-radius: 2px;
      overflow-y: auto;
      .el-table{
        text-align: center;
      }
    }
    .block{ 
      height:60px;
      line-height: 60px;
      text-align: right;
      margin: 20px;
      border-radius:2px;
      background:#fff;
    }
    .btnConfirm{
      color:#fff;
      background-color: #1774f0;
      position: absolute;
      right: 8px;
      bottom: 0;
    }
    .el-pagination{
      /*position: absolute;
      width: 97.7%;*/
      padding: 15px;
    }

    .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;
  }
  .toast-btn{
    width: 90px;
    bottom:35px;
    right:130px;
  }
     
  }
</style>
