<!--
人员视角
@Author: linqian
@Date: 2021-04-01 10:45
-->
<template>
  <dg-row class="property-wapper" gutter="1rem">
    <dg-col :span="15" class="property-wapper__left">
      <dg-card class="box-card" shadow="never" header="人员列表">
        <!-- 搜索栏 -->
        <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
        <!-- 人员列表 -->
        <new-table
          ref="table"
          :tableUrl="userTableUrl"
          :tableHeader="tableHeader"
          :condition="condition"
          @handleRowClick="receiveIsClickedUser"
        ></new-table>
      </dg-card>
    </dg-col>
    <!-- 权限设置 -->
    <dg-col :span="9" class="property-wapper__right">
      <dg-card class="box-card"  shadow="never" header="权限设置">
        <el-tabs v-model="activeName">
          <el-tab-pane label="表权限" name="TABLE">
            <person-view-tree tab="TABLE" :idcard="idcard" :key="key"></person-view-tree>
          </el-tab-pane>
          <el-tab-pane label="列权限" name="COLUMN">
            <person-view-tree tab="COLUMN" :idcard="idcard" :key="key"></person-view-tree>
          </el-tab-pane>
        </el-tabs>
      </dg-card>
    </dg-col>
  </dg-row>
</template>
<script>
import { staffUserPage } from '@/api/role-auth-info';
import personViewTree from './components/person-view-tree';
import searchBar from '@/components/search-bar';
import { searchOpt } from '@/mixins/page-opt';
import newTable from '@/components/new-table';
export default {
  components: { personViewTree, searchBar, newTable },
  mixins: [searchOpt],
  data() {
    return {
      // 激活的tab
      activeName: 'TABLE',
      rowStyle: {
        cursor: 'pointer'
      },
      conditionForm: [
        {
          label: '用户类型',
          name: 'userType',
          op: '=',
          value: '',
          component: 'DgSelect',
          attr: {
            enum: 'UserTypeEnum',
            style: 'width: 9rem'
          }
        },
        {
          label: '姓名',
          name: 'name',
          op: 'like',
          value: '',
          component: 'ElInput',
          attr: {
            style: 'width: 9rem'
          }
        },
        {
          label: '单位名称',
          name: 'orgId',
          op: '=',
          value: '',
          apiName: 'getOrgTree',
          nodeKey: 'id',
          type: 'APP',
          component: 'SelectOrgTree',
          placeholder: '请选择单位名称'
        }
      ],
      userTableUrl: staffUserPage,
      tableHeader: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '身份证号码',
          prop: 'idcard'
        },
        {
          label: '用户类型',
          prop: 'userType',
          enum: 'UserTypeEnum'
        },
        {
          label: '单位名称',
          prop: 'orgName'
        }
      ],
      idcard: '',
      key: 0
    };
  },
  computed: {},
  methods: {
    /**
     * @description: 点击人员列表
     * @param {*} row
     */
    receiveIsClickedUser(row) {
      if (row.idcard == this.idcard) return;
      this.idcard = row.idcard;
      this.key++;
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss' scoped>
  /deep/ .property-wapper__left {
    .el-card__body { 
      height: 45rem;
    }
  }
/deep/ .org-card {
  .el-card__body {
    padding: 20px 5px 20px 20px;
    .el-tree-node__content {
      // margin-right: 20px;
    }
  }
}
.auth-group {
  &__item {
    // margin-bottom: 20px;
    &-subTitle {
      font-weight: bold;
      height: 42px;
      line-height: 42px;
    }
    &-list {
      height: 42px;
      line-height: 42px;
      display: flex;
      align-items: center;
      .list-title {
        margin: 0 10px 0 5px;
      }
      .list-content {
        display: inline-block;
        width: 650px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .list-detail {
        cursor: pointer;
        color: #1890ff;
      }
    }
  }
}
</style>