<template>
  <div>
    <!-- <el-button size="small" type="primary" @click="dialogTableVisible = true">设置营销分类</el-button> -->
<!--    <el-dropdown-item @click.native="onShow()">设置营销分类</el-dropdown-item>-->
    <el-button size="mini" @click="onShow()">设置营销分类</el-button>
    <el-dialog title="设置营销分类" append-to-body   :visible.sync="dialogTableVisible">
      <ul class="flex-align-center">
        <li class="brand-item" :class="activeid === item.value?'act':''" v-for="item in classList" :key="item.index" @click="brandClick(item)">{{item.label}}</li>
      </ul>
      <div>
        <tree :data="activeBrandData"></tree>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" class="normal-btn-width btn-warning" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tree from '../components/classTree.vue'
import {mapGetters} from 'vuex'
export default {
  props:['data'],
  data () {
    return {
      dialogTableVisible:false,
      classList:[],
      activeBrandData:[],
      haveBindClass:[],
      activeid:0
    }
  },
  components:{
    tree
  },
  computed:{
    ...mapGetters({
      checks:'checks'
    })
  },
  methods:{
    onShow () {
      this.saleClass(()=>{
        this.dialogTableVisible = true
        this.bindSaleClass()
        console.log("营销分类")
        console.log(this.data)
      })
    },
    async saleClass (fn) {
      const res = await this.$api.requested({
          "id": "20220922110403",
          "version":1,
          "content": {
            "sa_brandid":0
          }
      })
      let arr = res.data.map(e=>{
        return {
          itemclassname:e.brandname,
          itemclassid:e.sa_brandid,
          subdep:e.ttemclass
        }
      })
      this.classList = this.createMenu(arr)
      this.activeid = this.classList[0].value
      this.activeBrandData = this.classList[0].children
      fn()
    },
    createMenu (array) {
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          label:node['itemclassname'],
          value:node['itemclassid'],
          itemclassnum:node['itemclassnum'],
          checked:false
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          elNode.children = []
          for (var index = 0; index < node.subdep.length; index++) {
          // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    //点击品牌
    brandClick (item) {
      this.activeid = item.value
      this.activeBrandData = item.children
    },

    // 提交授权数据
    async onSubmit () {
      const res = await this.$api.requested({
        "id": 20220927090102,
        "content": {
            "itemclassids":this.checks,
            "itemid": this.data.itemid,
            "itemno":this.data.itemno
        }
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
      })
    },

    // 查询已绑定分类
    async bindSaleClass () {
      var that = this
      const res = await this.$api.requested({
        "id": 20220927090202,
        "content": {
            "itemid": this.data.itemid,
            "itemno":this.data.itemno
        }
      })

      this.haveBindClass = res.data
      // 设置已绑定的id,用于check显示
      res.data.filter(e=>{
        this.$store.dispatch('checkClass',e.itemclassid)
      })
      // 递归,遍历数组设置勾选状态
      function convertToElementTree(node) {
        that.haveBindClass.forEach(e=>{
          if (e.itemclassid === node.value) {
            node.checked = true
          }
        })
        if (node.children && node.children.length > 0) {
          for (var index = 0; index < node.children.length; index++) {
            convertToElementTree(node.children[index])
          }
        }
      }

      this.classList.forEach((element) => {
        convertToElementTree(element)
      });
    }
  },
  mounted () {
    // this.saleClass()

  }
}

</script>
<style>
</style>
<style scoped>
.brand-item{
  padding-left:40px ;
  margin-right:20px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.act{
  color: red;
}
</style>