<template>
  <div>
    
    <div class="role-detail">
      <el-descriptions>
        <div slot="title" style="flex:1" class="flex-align-center flex-between">
          <p>角色信息</p>
          <div>
            <slot name="edit" :data="roleInfos"></slot>
            <slot name="del" :data="roleInfos"></slot>
          </div>
        </div>
        <el-descriptions-item label="角色名称">{{roleInfos.rolename}}</el-descriptions-item>
        <el-descriptions-item label="角色描述">{{roleInfos.remarks}}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{roleInfos.createby}}</el-descriptions-item>
        <el-descriptions-item label="归属站点">
          <el-tag size="small">{{roleInfos.siteid}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions>
        <div slot="title" style="flex:1" class="flex-align-center flex-between">
          <p>授权信息</p>
          <div>
            <slot name="auth" :data="roleInfos"></slot>
          </div>
        </div>
      </el-descriptions>
      <el-empty v-if="roleInfos.apps && roleInfos.apps.length === 0" :image-size="100" description="暂无授权信息"></el-empty>
      <el-table
        v-else
        :data="roleInfos.apps"
        style="width: 100%"
        size="small"
        highlight-current-row
        border
        stripe
        :header-cell-style="{background:'#f1f2f3',color:'#333'}">
        <el-table-column
          prop="systemclientname"
          label="端口">
        </el-table-column>
        <el-table-column
          prop="systemname"
          label="系统名称">
        </el-table-column>
        <el-table-column
          prop="systemmodulename"
          label="模块名称">
        </el-table-column>
        <el-table-column
          prop="systemappname"
          label="应用名称">
        </el-table-column>
        <el-table-column
          label="查看授权信息">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="onShow(scope.row)">查看授权信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="授权信息" :visible.sync="dialogTableVisible" width="700px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="功能" name="first">
          <el-table
            ref="multipleTable"
            :data="options"
            style="margin-bottom:10px"
            size="mini"
            stripe
            :header-cell-style="{background:'#f1f2f3',color:'#333'}"
            border>
            <el-table-column
              prop="optionname"
              label="功能描述">
            </el-table-column>
            <el-table-column
              prop="option"
              label="名称">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <slot name="cancelAuth" :data="{row:scope.row,roleid:roleInfos.roleid}"></slot>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="隐藏字段" name="second">
          <el-table
            ref="multipleTable2"
            :data="hiddenfields"
            style=""
            size="mini"
            :header-cell-style="{background:'#f1f2f3',color:'#333'}"
            border>
            <el-table-column
              prop="fieldname"
              label="字段描述">
            </el-table-column>
            <el-table-column
              prop="field"
              label="字段名">
              <template slot-scope="scope">
                <el-tag size="mini" type="primary" effect="dark">{{scope.row.field}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <slot name="cancelAuth" :data="{row:scope.row,roleid:roleInfos.roleid}"></slot>
                
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      roleInfos:{},
      dialogTableVisible:false,
      hiddenfields:[],
      options:[],
      activeName:'first'
    }
  },
  methods:{
    detailData (row) {
      this.$api.requested({"classname": "webmanage.role.role",
      "method": "query_roleMain",
      "content": {
        "roleid":row.roleid
      }}).then(res=>{
        this.roleInfos = res.data[0]
        console.log(this.roleInfos )
      })
    },
    onShow (row) {
      this.dialogTableVisible = true
      this.options = row.options
      this.hiddenfields = row.hiddenfields
    },
  }
}

</script>
<style>
.role-detail .el-descriptions__header {
  display: block !important;
}
</style>
<style scoped>
.title{
  margin: 10px 0;
  color: #333;
  font-weight: 500;
  /* border-bottom:3px solid #333 */
}
.auth_title{
  margin-bottom: 10px;
  color: #333;
  font-weight: 500;
}
.scroll-panel{
  height: calc(100vh - 360px);
  overflow-y:scroll ;
  overflow-x: hidden;
}

</style>