<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table
        ref="table"
        view-code="Organization"
        :filter="filter"
        :tree-enable="true"
        :tree-load="row => onTreeLoad(row)"
        :has-children="
          row => {
            return row.hasChildren;
          }
        "
        :create-enable="allow('create')"
        :remove-enable="allow('remove')"
        @create="create()"
        @edit="({ row, index }) => edit(row)"
      >
        <template #command="{ row }">
          <Button v-if="allow('create')" size="small" :title="$t('Front_Btn_Create_Child')" type="primary" custom-icon="fa fa-plus" @click="create(row)"></Button>
        </template>
        <template #column="{ row, column, code }">
          <template v-if="code == 'name'">
            <div :style="{ 'font-weight': row.hasChildren ? 'bold' : '', 'text-indent': row._depth * 12 + 'px' }">{{ showData(row, column) }}</div>
          </template>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="OrganizationEdit" :create-enable="allow('create')" :edit-enable="allow('edit')" @on-after-save="formAfterSave" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import modelApi from '../../api/model';

  export default {
    name: 'system-organization',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        data: null,
        filter: {
          parentID: 'null'
        }
      };
    },
    computed: {},
    created() {},
    methods: {
      // 树展开
      async onTreeLoad(row) {
        let res = await modelApi.query('Organization', {
          parentID: row.id,
          page: 1,
          per: 1000,
          orderBy: '+orderNo'
        });

        for (let data of res.data) {
          data._depth = row._depth == null ? 1 : row._depth + 1;
        }

        return res.data;
      },
      // 创建
      create(parent) {
        this.data = null;
        if (parent) {
          this.$refs.form.openDefault({
            parentID: parent.id,
            orderNo: parent.orderNo
          });
        } else {
          this.$refs.form.openDefault({});
        }
      },
      // 编辑
      edit(row) {
        this.data = row;
        this.$refs.form.open(row);
      },
      // 保存后事件
      formAfterSave(row) {
        if (this.data) {
          for (let key in row) {
            this.data[key] = row[key];
          }
        } else {
          this.$refs.table.loadData();
        }
      }
    }
  };
</script>
[]
