<!--
 * @Author: Liugh
 * @Date: 2021-05-17 14:54:08
 * @LastEditTime: 2021-05-20 10:53:13
 * @LastEditors: Do not edit
 * @FilePath: \auth-web\src\pages\data-auth-module\auth-object-manage\object-prop-manage\index.vue
 * @Description: 
-->

<template>
  <main class="subject-property">
    <dg-row gutter="1rem">
      <dg-col :span="5">
        <tree ref="tree" title="客体属性类" type="OBJ" @submitNodeOperate="getNodeOperate" />
      </dg-col>
      <!-- 属性详情 -->
      <dg-col :span="9">
        <prop-detail
          :parentNode="parentNode"
          type="OBJ"
          :key="key"
          :operateType="operateType"
          @savePropSuccess="refreshTree"
        ></prop-detail>
      </dg-col>
      <dg-col :span="10">
        <!-- TODO 根据点击属性类型判断显示什么表格 -->
        <dg-card class="box-card" :header="componentType[attrBelongType].title" shadow="never">
          <div style="height: calc(100vh - 15.5rem)">
            <dg-scrollbar>
              <component
                :is="componentValue"
                :parentNode="parentNode"
                :operateType="operateType"
                :attrBelongType="attrBelongType"
                :key="key"
              ></component>
            </dg-scrollbar>
          </div>
        </dg-card>
      </dg-col>
    </dg-row>
  </main>
</template>

<script>
import Tree from '../../auth-subject-manage/subject-prop-manage/prop-tree';
import propDetail from '../../auth-subject-manage/subject-prop-manage/prop-detail';
import functionList from './function-list';
import appSerList from './app-ser-list';
export default {
  name: 'subject-property', // 组件名称
  props: {
    // 接收父组件的数据
  },
  data() {
    // 组件内部参数
    return {
      // 参数名称及默认值
      componentType: {
        FUN: {
          cmp: 'function-list',
          title: '关联功能资源列表'
        },
        SER: {
          cmp: 'app-ser-list',
          title: '关联服务资源列表'
        },
        APP: {
          cmp: 'app-ser-list',
          title: '关联应用资源列表'
        }
      },
      componentValue: 'app-ser-list',
      parentNode: {},
      key: 0,
      // 操作类型，新增属性还是编辑
      operateType: '',
      attrBelongType: 'APP'
    };
  },
  computed: {}, // 计算属性
  watch: {}, // 侦听器（扩展的计算属性）
  components: { Tree, functionList, appSerList, propDetail }, // 注册局部组件
  methods: {
    /**
     * 获取树操作
     */
    getNodeOperate(data) {
      const { type, operateType } = data;
      this.attrBelongType = type.split("-")[0];
      this.operateType = operateType;
      this.parentNode = data;
      this.componentValue = this.componentType[this.attrBelongType].cmp;
      this.key++;
    },
    /**
     * 刷新属性树
     */
    refreshTree() {
      this.$refs.tree.init();
    },
    /**
     * @description: 表单查询
     */
    handleSearch() {}
  },
  created() {} // 组件创建完成后
};
</script>
<style lang="scss" scoped>
@import '../../auth-subject-manage/index.scss';
</style>
