<template>
  <div>
    <el-button type="primary" size="small" @click="dialogFormVisible=true" >设置分类</el-button>
    <el-dialog append-to-body title="设置分类" :visible.sync="dialogFormVisible" width="500px">
      <div class="drawer__panel" >
        <el-tree
          ref="tree"
          :data="classList"
          show-checkbox
          node-key="itemclassid"
          :default-expand-all="true"
          :default-checked-keys="data.checkArr">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible=false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  props:['data'],
  data () {
    return {
      dialogFormVisible:false,
      classList:[],
      disabledId:[]
    }
  },
  methods:{
    async onSubmit () {
      let arr = this.$refs.tree.getCheckedNodes().map(item => item.itemclassid)
      let res = await this.$api.requested({
        "id": 20220927090102,
        "content": {
            "itemclassids":arr,
            "itemid": this.data.data.itemid,
            "itemno":this.data.data.itemno
        },
      })
      this.tool.showMessage(res,() => {
        this.$emit('onSuccess')
        this.dialogFormVisible = false
      })
    },
    async getClassList () {
      let res = await this.$api.requested({
          "id": "20220922110403",
          "version":1,
          "content": {
            "sa_brandid":0,
            "where": {
              istool: this.data.istool ? 1 : 0
            }
          }
      })
      console.log(res.data);
      res.data = res.data.map((item,index) => {
        return {
          itemclassname:item.brandname,
          itemclassid:index + 1,
          disabled:true,
          subdep: item.ttemclass
        }
      })
      this.classList = this.createDeep(res.data)
      console.log(this.classList);
    },
    createDeep (data) {
      let arr = []
      function createNodes (node) {
        let elNode = {
          label:node.itemclassname,
          itemclassid:node.itemclassid,
          disabled:node.disabled ? true : false,
          children:[]
        }
        if (node.subdep && node.subdep.length > 0) {
          for (let index = 0; index < node.subdep.length; index++) {
            elNode.children.push(createNodes(node.subdep[index]))            
          }
        }
        return elNode
      }

      data.forEach(item => {
        this.disabledId.push(item.itemclassid)
        arr.push(createNodes(item))
      })
      return arr
    } 
  },
  created () {
    this.getClassList()
  }
}

</script>
<style scoped>
/deep/.el-dialog__body {
  padding-bottom: 0 !important;
}
</style>