<template>
  <div class="center-container">
    <el-row :gutter="16">
      <el-col :span="16">
        <el-card class="box-card">
          <b >基础服务使用概况</b>
          <div class="count-summary">
             <el-row :gutter="12">
               <el-col :span="6">
                    <p>已创建服务数量</p>
                    <b class="count">1</b><span>个</span>
                    <p><el-link type="primary" style="font-size:12px;"><i class="el-icon-tickets"></i>管理服务</el-link></p>
               </el-col>
              <el-col :span="6">
                    <p>已选择服务数量</p>
                    <b class="count">1</b><span>个</span>
                    <p><el-link type="primary" style="font-size:12px;"><i class="el-icon-tickets"></i>管理服务</el-link></p>
               </el-col>
        
                <el-col :span="6">
                    <p>申请服务数量</p>
                    <b class="count">2</b><span>个</span>
                    <p><el-link type="primary" style="font-size:12px;"><i class="el-icon-tickets"></i>申请服务</el-link></p>
               </el-col>
           
                <el-col :span="6">
                    <p>回收站</p>
                    <b class="count">3</b><span>个</span>
                    <p><el-link type="primary" style="font-size:12px;"><i class="el-icon-tickets"></i>回收站</el-link></p>
               </el-col>
             </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
         <b>账户基础信息</b>
         <div style="width:100%;padding:24px 12px;padding-bottom:8px;color:#303030;">
           <p><span >用户名称：</span><span style="float:right;">xujingliang</span></p>
           <p><span >登录账号：</span><span style="float:right;">17861857725</span></p>
           <p><span >账号安全：</span><span style="float:right;"><el-link type="primary" style="font-size:12px;"><i class="el-icon-lock"></i>账号安全设置</el-link></span></p>
         </div>
        </el-card>
      </el-col>
    </el-row>
        
    <el-row style="margin-top:18px;">
      <el-card class="box-card">
        <div style="width:100%;height:50px;">
          <b>我的服务</b>
          <div style="float:right;margin-right:32px;margin-top:12px;">
            <el-link type="primary" :underline="false"><i class="el-icon-edit-outline"></i>编辑</el-link>
            <span style="margin:0px 12px;color:#f1f1f1;">|</span>
            <el-link type="primary" :underline="false"><i class="el-icon-delete"></i>删除</el-link>
            <span style="margin:0px 12px;color:#f1f1f1;">|</span>
            <el-button type="primary" size="mini"><i class="el-icon-plus"></i>申请服务</el-button>
          </div>
        </div>

        <el-table
          size="mini"
          :header-cell-style="{'text-align':'left'}"
          
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="服务名称"
            >
          </el-table-column>
          <el-table-column
            prop="desc"
            align="center"
            label="服务描述"
           >
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="服务地址"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="key"
            align="center"
            label="服务Key"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="state"
            label="服务状态"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">正常</span>
              <span v-else style="color:#F56C6C;">禁用</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            show-overflow-tooltip>
            <template >
                <el-link type="primary" :underline="false"><i class="el-icon-view"></i>预览</el-link>
                <span style="margin:0px 12px;color:#f1f1f1;">|</span>
                <el-link type="primary" :underline="false"><i class="el-icon-setting"></i>设置</el-link>
                <span style="margin:0px 12px;color:#f1f1f1;">|</span>
                <el-link type="danger" :underline="false"><i class="el-icon-delete"></i>删除</el-link>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </el-row>
  </div>
</template>
<script>
export default {
  name:"Center",
  data(){
    return {
      tableData: [{
          name: '服务名称',
          desc: '服务描述',
          state: 1,
          address:"http://192.168.101.1110:3203/",
          key:"ff98577d147820843ec2d04da3c5bad4"
        },{
          name: '服务名称',
          desc: '服务描述',
          state: 1,
          address:"http://192.168.101.1110:3203/",
          key:"ff98577d147820843ec2d04da3c5bad4"
        },{
          name: '服务名称',
          desc: '服务描述',
          state: 1,
          address:"http://192.168.101.1110:3203/",
          key:"ff98577d147820843ec2d04da3c5bad4"
        },{
          name: '服务名称',
          desc: '服务描述',
          state: 0,
          address:"http://192.168.101.1110:3203/",
          key:"ff98577d147820843ec2d04da3c5bad4"
        },{
          name: '服务名称',
          desc: '服务描述',
          state: 1,
          address:"http://192.168.101.1110:3203/",
          key:"ff98577d147820843ec2d04da3c5bad4"
        }],
        multipleSelection: []
    }
  }
}
</script>
<style scoped>
.center-container{
  width:100%;
  height:100%;
  padding:16px;
  background:#fafbfc;
}
.count-summary{
  padding:14px 0px;
  width:100%;
  height:100px;
  text-align: center;
}
.count-summary .count{
  padding-right: 8px;
    font-size: 40px;
    line-height: 72px;
    color: #73819e;
    font-weight: 600;
}
.box-card{
  width:100%;
}
::v-deep .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
  border:0px;
  border-radius:2px;
}
</style>