<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
        <model-category
          ref="modelCategory"
          @changeCategory="changeCategory"
          :modelCategoryData="modelCategoryData"
          @getModelCategory="getModelCategory"
        />
      </el-col>
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <model-list ref="modelList" :modelCategoryData="modelCategoryData" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ModelCategory from './components/ModelCategory'
import ModelList from './components/ModelList'
import { getCategoryTree } from '@/api/modelLibrary/category'
export default {
  name: 'modelLibrary',
  components: { ModelCategory, ModelList },
  data() {
    return {
      modelCategoryData: [{ id: '0', name: '全部分类', label: '全部分类', leaf: false }],
    }
  },
  created() {
    this.getModelCategory()
  },
  methods: {
    changeCategory(data) {
      this.$refs.modelList.query.categoryId = data.id
      this.$refs.modelList.crud.toQuery()
    },
    // 获取左侧模型分类分类树
    getModelCategory() {
      getCategoryTree().then((res) => {
        let content = res.data.content
        this.buildTreeData(content)
        if (content.length) {
          this.$set(this.modelCategoryData[0], 'children', content)
        }
      })
    },
    buildTreeData(data) {
      for (let item of data) {
        this.$set(item, 'label', item.name)
        if (item.children && item.children.length) {
          item.leaf = false
          this.buildTreeData(item.children)
        } else {
          item.leaf = true
        }
      }
    },
  },
}
</script>

<style></style>
