<!--
     人员授权范围审计
    @Author:laiyh
    @Date:  2020-10-28
-->
<template>
  <dg-row :gutter="20">
    <dg-col :span="24">
      <dg-card shadow="never" header="人员列表" :body-style="{ minHeight: document_max_height * 0.5 - 250 + 'px' }">
        <div class="u-right__table">
          <!-- 人员搜索栏 -->
          <search-bar :conditionForm="userConditionForm" @submitSearch="receiveUserSearch"></search-bar>
          <new-table
            ref="userTable"
            :tableUrl="userTableUrl"
            :tableHeader="userTableHeader"
            :condition="userCondition"
            :lazyLoad="true"
            @handleRowClick="handleRowClick"
          >
          </new-table>
        </div>
      </dg-card>
    </dg-col>
    <dg-col :span="24" style="margin-top: 10px">
      <dg-card shadow="never" header="角色列表" :body-style="{ minHeight: document_max_height * 0.5 - 150 + 'px' }">
        <div class="u-right__table">
          <el-form ref="form" label-suffix="" inline>
            <el-form-item label="应用系统名称" prop="appId.value">
              <dg-select
                v-model="roleConditionForm.appId.value"
                clearable
                filterable
                :data="appList"
                valueName="code"
                labelName="value"
                placeholder="请选择应用系统名称"
              ></dg-select>
            </el-form-item>
            <el-form-item>
              <dg-button type="primary" :icon="'查询' | optIcon" @click="handleRoleSearch">查询</dg-button>
            </el-form-item>
          </el-form>
          <new-table
            ref="roleTable"
            :tableUrl="roleTableUrl"
            :tableHeader="roleTableHeader"
            :condition="roleCondition"
            :lazyLoad="true"
          >
            <!-- 角色名称 -->
            <template #name="{ row }">
              <a href="javascript:;" @click="handleDetail(row)">{{ row.name }}</a>
            </template>
            <!-- 业务域标签 -->
            <template #roleBusiness="{ row }">
              {{ transferBusinessTag(row.roleBusiness) }}
            </template>
          </new-table>
        </div>
      </dg-card>
    </dg-col>
  </dg-row>
</template>

<script>
import newTable from '@/components/new-table';
import * as logAuditApi from '@/api/log-audit';
import * as statisApi from '@/api/statistics-manage';
import transferBusinessTagMixin from '@/mixins/transfer-business-tag';
import timeLine from './timeLine';
import searchBar from '@/components/search-bar';
const editorArea = ['1000px', '880px'];
export default {
  name: 'index',
  components: {
    newTable,
    searchBar
  },
  mixins: [transferBusinessTagMixin],
  // 接收父页面传过来的属性
  props: {},
  // 页面数据绑定
  data() {
    return {
      document_max_height: '',
      // 人员
      userTableUrl: logAuditApi.persionTableUrl,
      userConditionForm: [
        {
          label: '单位名称',
          name: 'orgId',
          op: '=',
          value: '',
          apiName: 'getOrgTree',
          nodeKey: 'id',
          type: 'APP',
          component: 'SelectOrgTree',
          placeholder: '请选择单位名称'
        },
        {
          label: '姓名',
          name: 'name',
          op: 'like',
          value: '',
          component: 'ElInput'
        },
        {
          label: '警号',
          name: 'policeNumber',
          op: 'like',
          value: '',
          component: 'ElInput'
        }
      ],
      userTableHeader: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '警号/编号',
          prop: 'policeNumber'
        },
        {
          label: '用户类型',
          prop: 'userType',
          enum: 'UserTypeEnum'
        },
        {
          label: '人员类型',
          prop: 'manType',
          code: 'DM_MAN_TYPE'
        },
        {
          label: '职级',
          prop: 'title',
          code: 'DM_CERT_DUTY_LEVEL'
        }
      ],
      userCondition: {},
      // 角色
      roleTableUrl: logAuditApi.roleTableUrl,
      roleTableHeader: [
        { label: '应用名称', prop: 'appId' },
        { label: '角色层级', prop: 'roleLevel', code: 'DM_ROLE_LEVEL' },
        { label: '角色名称', prop: 'name', custom: true },
        { label: '业务域标签', prop: 'roleBusiness', custom: true }
      ],
      roleConditionForm: {
        appId: { value: '', op: '=' },
        userId: { value: '', op: '=' }
      },
      roleCondition: {},
      // 人员授权情况详情
      reportForm: {
        orgId: '',
        roleId: '',
        userId: ''
      },
      // 应用列表
      appList: []
    };
  },
  computed: {},
  methods: {
    receiveUserSearch(value) {
      this.userCondition = value;
      this.handleUserSearch();
    },
    handleUserSearch() {
      this.$nextTick(() => {
        this.$refs.userTable.handleSearch();
        // 每次刷新人员列表，清空角色列表数据
        if (this.roleConditionForm.userId.value) {
          this.$refs.userTable.handleRowClick({});
          this.roleConditionForm.userId.value = '';
          // 角色列表接口不支持查询条件为空，会报错，所以清空不了表格
        //   this.loadRoleTable();
        }
      });
    },
    handleRowClick(row) {
      if (row.id && row.id !== this.roleConditionForm.userId.value) {
        this.roleConditionForm.userId.value = row.id;
        this.handleRoleSearch();
        this.reportForm.userId = row.id;
        this.reportForm.orgId = row.orgId;
      }
    },
    handleRoleSearch() {
      if (!this.roleConditionForm.userId.value) {
        this.$message.error('请先选择一个人员再进行操作');
        return;
      }
      this.loadRoleTable();
    },
    loadRoleTable() {
      this.roleCondition = this.roleConditionForm;
      this.$nextTick(() => {
        this.$refs.roleTable.handleSearch();
      });
    },
    handleDetail(row) {
      const that = this;
      this.reportForm.roleId = row.id;
      const { reportForm } = this;
      logAuditApi.getAuditUserDetail(reportForm).then((res) => {
        const layer = that.$dgLayer({
          title: '人员授权情况详情',
          shade: [0.4, '#FFF'],
          area: editorArea,
          content: timeLine,
          props: {
            timeData: res
          }
        });
      });
    },
    // 应用系统下拉
    getAppList() {
      const that = this;
      statisApi
        .getAppName()
        .then((res) => {
          that.appList = res;
        })
        .catch((error) => {
          that.$message.error('获取应用系统失败！');
        });
    }
  },
  // 创建组件时调用
  created() {
    var windowHeight = document.all ? document.getElementsByTagName('html')[0].offsetHeight : window.innerHeight;
    var pageHeight = Math.max(windowHeight, document.getElementsByTagName('body')[0].scrollHeight);
    this.document_max_height = pageHeight;
    this.getAppList();
  }
};
</script>

<style scope lang="scss">
// @import '@/assets/style/my-card.scss';
</style>
