<template>
  <div class="perm-management page-wrap">
    <dee-fold-pane
      :min-percent="18"
      :default-percent="22"
      split="vertical"
    >
      <template slot="paneL">
        <div class="header-wrap">应用:
          <el-select v-model="appId" style="width:75%">
            <el-option
              v-for="item in apps"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <permTree ref="permTree" @change="nodeClick" />
      </template>
      <template slot="paneR">
        <div class="detail-box">
          <dee-fold-pane
            :min-percent="40"
            :default-percent="45"
            split="vertical"
          >
            <template slot="paneL">
              <div style="height:100%;padding-right:8px">
                <perms ref="premFun" :cur-node="curNode" :appid="appId" :select-data="selectData" @getPerm="getPerm" />
              </div>
            </template>
            <template slot="paneR">
              <div class="detail-box">
                <dee-table
                  :index-row="{title:'序号',width: '80'}"
                  :data="tableData"
                  :columns="permColumns"
                />
                <settings v-if="showSettings" ref="settings" :user-info="userInfo" />
              </div>
            </template>
          </dee-fold-pane>
        </div>
      </template>
    </dee-fold-pane>

  </div>
</template>
<script>
import { getRoleList } from '@/api/mgt/role.js'
import settings from './components/settings'
import permTree from '../permission/permTree'
import perms from './components/perms'
export default {
  name: 'PermManagement',
  components: { settings, permTree, perms },
  props: {},
  data() {
    return {
      showSettings: false,
      userInfo: {},
      apps: [],
      appId: '',
      curNode: null,
      tableData: [],
      permColumns: [
        { title: '权限组名称', key: 'name', align: 'center', minWidth: 120, component: {
          render: (h, params) => {
            return h('div', [
              h('span', {
                class: 'link-style',
                on: {
                  click: () => {
                    this.showSettings = true
                    this.userInfo = params
                    this.$nextTick(() => {
                      this.$refs.settings.getUser()
                    })
                  }
                }
              }, params.name || '/')
            ])
          }
        }},
        { title: '权限组描述', key: 'remark', align: 'center', minWidth: 120 },
        { title: '所属应用', key: 'appName', align: 'center', minWidth: 120 }
      ],
      roleConfiguratorOptions: [],
      parentIds: [],
      selectData: []
    }
  },
  computed: {

  },
  watch: {
    appId() {
      this.$refs.permTree.getAllObj(this.appId)
    }
  },
  created() {
  },
  mounted() {
    this.getApps()
  },
  methods: {
    getApps() {
      let items = [
        {
          'fieldName': 'isDisable',
          'operator': 'EQ',
          'value': false
        }
      ]
      if (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '2') {
        items = items.concat([{
          'fieldName': 'scope',
          'operator': 'EQ',
          'value': 'ORGANIZATION'
        }, {
          'fieldName': 'organizationId',
          'operator': 'EQ',
          'value': JSON.parse(localStorage.getItem('userLevel')).organizationId
        }])
      }
      const params = {
        'pageFrom': 1,
        'pageSize': 9999,
        'searchItems': {
          'items': items,
          'operator': 'AND'
        }
      }
      this.$api.searchApi('DxApplication', params).then(res => {
        this.apps = res.items.content.map(m => {
          return {
            label: m.name,
            value: m.id
          }
        })
        this.appId = this.apps[0] && this.apps[0].value
      })
    },
    nodeClick(data, parentIds) {
      this.curNode = data
      this.selectData = parentIds
      this.tableData = []
      this.$refs.settings && this.$refs.settings.clearData()
    },
    getPerm(data) {
      getRoleList({ permId: data.id }).then(res => {
        this.tableData = res.items.map(r => {
          const app = (this.apps || []).find(m => m.value === r.appId)
          if (app) {
            r.appName = app.label
          }
          r.show = true
          return r
        })
        this.$refs.settings && this.$refs.settings.clearData()
      })
    }
  }

}
</script>
<style lang="scss">
@import "../../styles/variables.scss";
.link-style{
  color: $link-color;
  cursor:pointer;
}
.perm-management{
  height:100%;
  .detail-box{
    height: 100%;
    padding-left: 8px;
    overflow:hidden;
  }
}
</style>