<template>
    <el-tree ref="dimTree" :data="catalogTree" node-key="ID" default-expand-all show-checkbox :props="defaultProps" :expand-on-click-node="false"  :default-checked-keys="checkedData" @check-change="selectCatalog">
    </el-tree>
</template>

<script>
export default {
  props: ['siteId', 'checkedIds'],

  data() {
    return {
      catalogTree: [],
      checkedData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  created: async function () {
    await this.loadData()
  },

  methods: {
    async loadData() {
      this.checkedData = this.checkedIds.split(',')
      let res = await axios.get(`/ui/contentadvance/dimensioncatalogtree?siteID=${this.siteId}&checkedIDs=${this.checkedIds}`)
      if (res.data.status === 1) {
        this.catalogTree = res.data.data
      }
    },

    selectCatalog() {
      this.checkedData = this.$refs.dimTree.getCheckedNodes()
      let arr = []
      let selected = this.$refs.dimTree.getCheckedNodes()
      selected.forEach(node => { if (node.innerCode !== '') { arr.push(node) } })
      this.$emit('on-change', arr)
    }
  }
}
</script>
