<template>
  <app-drawer v-model="visible" :loading="loading" :title="title" append-to-body class="tree-drawer" hide-footer
              @cancel="onCancel" @confirm="onConfirm"
  >
    <div class="dict-body">
      <el-tree :data="treeData" :props="defaultProps" default-expand-all>
        <div slot-scope="{ node, data }" class="flex-row-s-c overflow-h dict-tree-item">
          <svg-icon
            :class="{ 'is-dir': !data.children || !data.children.length }"
            :icon-class="data.children && data.children.length ? 'wenjianjia1' : 'drxx49'"
            class="mr-5"
            icon-style="icon "
          />
          <div :title="data.name" class="flex-1 text-ellipsis">{{ data.name }}</div>
        </div>
      </el-tree>
    </div>
  </app-drawer>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/arithmeticInfo';

export default {
  name: 'SubTreeDrawer',
  mixins: [dialogMixin],
  props: {
    code: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        value: 'id',
        label: 'name',
      },
    };
  },
  methods: {
    async initData() {
      this.treeData = await API.getByDicKey(this.code);
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dict-body {
  ::v-deep {
    .app-tree {
      width: 100%;
    }
  }
}

::v-deep .el-tree {
  border: none;
}

::v-deep {
  .el-table td.el-table__cell {
    padding: 0;
  }

  .el-form-item {
    margin: 18px 0;
  }
}
</style>
