<template>
  <div id="containt">
    <el-tabs v-model="activeName" class="tab-box">
      <el-tab-pane :label="$t1('列表')" name="second">
        <div class="tree-box fl">
          <div class="tit"><b>{{ $t1('属性名') }}</b></div>
          <el-tree
            :props="defaultProps"
            :load="loadNode"
            node-key="attributeCode"
            ref="tree"
            highlight-current
            lazy
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            class="tree-list"
            icon-class="el-icon-arrow-down"
          ></el-tree>
        </div>
        <label id="labBtn">
          <div class="icon">
            <i class="el-icon-more"></i>
            <i class="el-icon-more"></i>
          </div>
        </label>
        <div class="main-right fr" style="padding-left:6px;">
          <editView v-if="showEdit" visible-key="showEdit" :attributeCode.sync="currentNodeData.attributeCode"
                    :attributeName.sync="currentNodeData.attributeName" :parent-target="_self"
                    @reload="$reloadHandle"></editView>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {treeScollx} from '@base/utils/global.js';
import editView from "./edit";

export default {
  name: 'area_attribute:list',
  components: {editView},
  data() {
    return {
      activeName: 'second',
      dataId: 0,
      showEdit: false,
      vxeOption: {},
      formData: {},
      showConfigDialog: false,
      checkRows: [],
      modifyModel: 0,
      defaultProps: {
        label: 'attributeName', //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
        children: [],
        isLeaf: 'leaf'
      },
      currentNodeData: {}
    };
  },
  mounted() {
    treeScollx({target: this, type: 'default'});
  },
  methods: {
    handleNodeClick(data, node, v) {
      this.openEditView(data);
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      let url = USER_PREFIX + '/area_attribute/listPage';
      this.$http({
        url: url,
        method: 'post',
        data: {},
        success: res => {
          let rows = res.objx && res.objx.records ? res.objx.records : [];
          rows.forEach(value => {
            value.leaf = true;
          });
          resolve(rows);
          if (rows.length) {
            this.$nextTick(() => {
              let row = rows[0];
              this.openEditView(row)
            })
          }

        }
      });
    },
    openEditView(row) {

      let $tree = this.$refs.tree;
      this.currentNodeData = row || {};
      $tree.setCurrentKey(row.attributeCode);
      this.$openEditView('showEdit');
    }
  }
};
</script>
