<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout
        width="300px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
       
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              :data="treeList"
              :props="defaultProps"
              ref="treeRef"
              :default-expanded-keys="current && current.id ? [current.id] : []"
              :highlight-current="true"
              node-key="id"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
       
        <template v-slot:content>
          <div class="ele-border-lighter form-content" v-loading="loading">
            <div class="form-wrapper">
              <el-form size="mini" label-width="100px" class="ele-form-detail">
                <el-row :gutter="15" v-if="current.parentId == 0">
                  <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                    <el-form-item label="类型编码:">
                      <div class="ele-text-secondary">
                        {{ current.code }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                    <el-form-item label="类型名称:">
                      <div class="ele-text-secondary">
                        {{ current.name }}
                      </div>
                    </el-form-item>
                  </el-col>

                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="描述:">
                      <div class="ele-text-secondary">
                        {{ current.remark }}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="15" v-else>
                  <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                    <el-form-item label="节点编码:">
                      <div class="ele-text-secondary">
                        {{ current.code }}
                      </div>
                    </el-form-item>
                  </el-col>

                  <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                    <el-form-item label="节点名称:">
                      <div class="ele-text-secondary">
                        {{ current.name }}
                      </div>
                    </el-form-item>
                  </el-col>

                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="层级全览:">
                      <div class="ele-text-secondary">
                        {{ fullName }}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <IndexSearch @search="reload" />

            <IndexData
              ref="listData"
              v-if="current"
              :current-id="current.id"
              :data="current"
              :rootId="rootId"
            >
            </IndexData>
          </div>
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>
<script>
import IndexData from './components/index-data.vue';
import IndexSearch from './components/index-search.vue';

import dictMixins from '@/mixins/dictMixins';
import { getTreeByGroup } from '@/api/classifyManage';

import { getInfoById } from '@/api/classifyManage';

export default {
  components: {
    IndexData,
    IndexSearch
  },
  mixins: [dictMixins],
  data() {
    return {
      loading: false,
      current: {},
      curNode: {},
      treeList: [],
      treeLoading: false,
      formData: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },

  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    },
    rootId() {
      return this.$route.query.id;
    },
    fullName() {
      let str = '';
      let codeStr = '';
      let node = this.curNode;
      while (node?.data?.name) {
        str = node.data.name + '-' + str;
        codeStr = node.data.code + '-' + codeStr;
        node = node?.parent;
      }

      return (str.substring(str, str.length - 1))
      // return (
      //   str.substring(str, str.length - 1) +
      //   `(${codeStr.substring(str, str.length - 1)})`
      // );
    }
  },
  created() {
    this.getTreeData();
  },
  methods: {
    async getTreeData() {
      try {
        this.treeLoading = true;

        const res = await getTreeByGroup({ type: 1 });
        this.treeLoading = false;
        if (res?.code === '0') {
          this.treeList = res.data;

          this.$nextTick(() => {
            // 默认高亮第一级树节点
            if (this.treeList[0]) {
              this.getDetail(this.treeList[0].id);
            }
          });
          return this.treeList;
        }
      } catch (error) {}
      this.treeLoading = false;
    },

    async getDetail(id) {
      this.loading = true;
      const res = await getInfoById(id);
      this.loading = false;
      if (res.code == '0') {
        this.current = res.data;
        this.$nextTick(() => {
          this.$refs.treeRef.setCurrentKey(this.current.id);
        });
      }
    },

    handleNodeClick(data, node) {
      this.curNode = node;
      this.getDetail(data.id);
    },

    /* 刷新表格 */
    reload(where) {
      this.$refs.listData.reload(where);
    }
  }
};
</script>
<style lang="scss" scoped>
.sys-organization-list {
  height: calc(100vh - 165px);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  overflow: auto;
}

.sys-organization-list :deep(.el-tree-node__content) {
  height: 40px;

  & > .el-tree-node__expand-icon {
    margin-left: 10px;
  }
}

.form-content {
  height: 50px;
  border: 1px solid;
  box-sizing: border-box;
}

.form-wrapper {
  padding: 12px 24px;
}
</style>
