<template>
  <div>
    <el-button size="small" type="primary" icon="el-icon-plus" @click="dialogVisible = true">新建
    </el-button>
    <el-dialog title="营销类别授权" :visible.sync="dialogVisible" width="400px">
      <el-cascader v-model="selectArr" ref="select" @change="change" :options="deplist" :props="{ multiple: true, checkStrictly: true }" clearable size="small">
      </el-cascader>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit()" :disabled="selectArr.length == 0">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
export default {
  props: ['data'],
  data () {
    return {
      dialogVisible: false,
      deplist:[],
      result:'',
      selectArr:[]
    }
  },
  created() {
    this.department()
  },
  inject: ['sys_enterpriseid'],
  methods: {
    async department () {
      const res = await this.$api.requested({
        "id": "20220922110403",
        "version": 1,
        "content": {
          "sa_brandid": 0
        }
      })
      // // 数据格式转换成elementui-tree所需的格式
      res.data = res.data.map(item => {
        return {
          brandname: item.brandname,
          rowindex: item.rowindex,
          sa_brandid: item.sa_brandid,
          itemclassid:item.sa_brandid,
          value:item.sa_brandid,
          subdep: item.ttemclass
        }
      })
      this.deplist = this.createMenu(res.data)
      console.log(this.deplist);
      
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree (node) {
        // 新节点
        var elNode = {
          label: node["brandname"] || node['itemclassname'],
          parentid: node['parentid'],
          value: node['itemclassid'],
          sa_brandid: node['sa_brandid'],
          changeby: node["changeby"],
          changedate: node['changedate'],
          createby: node['createby'],
          createdate: node['createdate'],
          itemclassfullname: node['itemclassfullname'],
          itemclassfullnum: node["itemclassfullnum"],
          itemclassid: node['itemclassid'],
          itemclassname: node['itemclassname'],
          itemclassnum: node['itemclassnum'],
          children: []
        }
        if(elNode.sa_brandid) elNode.disabled = true
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        if(elNode.children.length == 0) {
            delete elNode.children
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    async submit() {
      if(this.selectArr.length == 0) return
      let res = await this.$api.requested({
          "id": 20220924134302,
          "content": {
              "sys_enterpriseid": this.sys_enterpriseid(), //企业id
              "itemclassid":this.result
          },
      })
      console.log(res);
      this.tool.showMessage(res,() => {
        this.dialogVisible = false
        this.selectArr = []
        this.$emit('addSuccess')
      })
    },
    change(data) {
      let temp = JSON.parse(JSON.stringify(data))
      temp.forEach(item => {
        item.shift()
      })    
      let temp2 = []
      temp.forEach(item => {
        temp2.push(...item)
      })    
      temp2 = [...new Set(temp2)]
      this.result = temp2
    }
  }
}

</script>
<style scoped>
/deep/.el-cascader {
  width: 100%;
}
/deep/.el-dialog__body {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}
</style>