<template>
  <div class="permissionList">
    <div class="permissionList_tree">
      <div class="permissionList_tree_head flex">
        <div class="permissionList_tree_head_list">名称</div>
        <div class="permissionList_tree_head_list">类型</div>
        <div class="permissionList_tree_head_list">行权限</div>
        <div class="permissionList_tree_head_list">操作</div>
      </div>
      <div class="permissionList_tree_body">
        <el-scrollbar style="height: 100%" :horizontal="false">
          <el-tree :data="data" show-checkbox node-key="tid" default-expand-all :expand-on-click-node="false">
            <template slot-scope="{node,data}">
              <div class="custom-tree-node flex">
                <div class="custom-tree-node-list">{{data.pagename}}</div>
                <div class="custom-tree-node-list">{{data.pagetype}}</div>
                <div class="custom-tree-node-list">类型等于机场</div>
                <div class="custom-tree-node-list">
                  <template v-if="data.pagetype == 'table'">
                    <el-button size="mini" type="text" @click="details(node, data)">行权限</el-button>
                  </template>
                </div>
              </div>
            </template>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
    <div class="permissionList_dialog">
      <!--高级查询-->
      <PublicPageDialog dialog-title="行权限" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
        <AdvancedQuery ref="advancedDialogForm" :ad-list="false" :ad-dep="adDep" @getAdvancedQueryData="getAdvancedQueryData" />
      </PublicPageDialog>
    </div>
  </div>
</template>

<script>
import PublicPageDialog from '@/components/PublicPageDialog'
import AdvancedQuery from '@/components/AdvancedQuery'
import { mapGetters } from 'vuex'
import { listToTree } from '@/utils/validate'

export default {
  name: 'Permissionlist',
  components: { PublicPageDialog, AdvancedQuery },
  data () {
    return {
      advancedDrawer: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'pagename'
      },
      defaultKeys: [],
      nodeKey: 'pageconfigurationid',
      adDep: 1
    }
  },
  computed: {
    ...mapGetters(['authArrs'])
  },
  mounted () {
    this.data = []
    this.authsTree()
  },
  methods: {
    //用户权限树
    authsTree () {
      const ndata = _.cloneDeep(this.authArrs)
      ndata.map((item, index) => { item.tid = index })
      const treeMenu = listToTree(ndata, 'superiorid', 'pageconfigurationid')
      this.data = treeMenu
    },
    //高级查询-提交
    advancedTable (refName) {
      this.$refs[refName].advancedQueryHandler()
    },
    getAdvancedQueryData (dataRules) {
      console.log(dataRules)
    },
    details (node, data) {
      const ndata = _.cloneDeep(data)
      this.adDep = Math.random()
      sessionStorage.setItem('tableColumns', JSON.stringify(ndata.children))
      this.$store.dispatch('auth/changeAuthMsg', ndata.children)
      this.advancedDrawer = true
    },
  }
}
</script>

<style lang="scss" scoped>
.permissionList {
  height: 100%;
  &_tree {
    height: 100%;
    &_head {
      height: 42px;
      line-height: 42px;
      background-color: #f0f6ff;
      font-size: 16px;
      font-size: 600;
      &_list {
        padding: 0 20px;
        width: 25%;
      }
    }
    ::v-deep &_body {
      height: calc(100% - 52px);
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .is-horizontal {
        display: none;
      }
      .el-tree-node {
        &__content {
          height: 49px;
          border-top: 1px solid #d6d4d4;
        }
      }
      .custom-tree-node {
        width: 100%;
        line-height: 28px;
        &-list {
          padding-right: 20px;
          width: 25%;
          &:last-child {
            padding-right: 0;
          }
        }
      }
    }
  }
}
</style>