<template>
  <div class="categoryTree-wrap">
    <div style="padding-bottom:10px;">
      <span style="color:red;">*</span> 添加品类：
      <a-checkbox v-model="check1" @change="(e)=> onAllChange(e,0)" v-show="!showEmpty">
        全选
      </a-checkbox>
      <a-checkbox v-model="check2" @change="(e)=> onAllChange(e,1)" v-show="!showEmpty">
        自主品牌
      </a-checkbox>
      <a-checkbox v-model="check3" @change="(e)=> onAllChange(e,2)" v-show="!showEmpty">
        代理品牌
      </a-checkbox>
    </div>

    <a-spin :spinning="spinning" tip="Loading...">
      <div v-show="showEmpty" class="empty-data"><a-empty description="暂无品类" :image="simpleImage"/></div>
      <div v-show="!showEmpty" style="height:350px;overflow: auto;">
        <a-tree
          checkable
          :selectable="false"
          v-model="checkedKeys"
          :tree-data="dataSource"
          :replaceFields="{children:'sonList', title:'name', key:'sn' }"
          @check="onCheck"
        >
        </a-tree>
      </div>
    </a-spin>

  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { Empty } from 'ant-design-vue'
// 组件
import { VSelect } from '@/components'
import ProductBrand from '@/views/common/productBrand.js'
import ProductType from '@/views/common/productType.js'
// 接口
import { dealerUpsPlTree } from '@/api/dealer'
export default {
  name: 'DetailProductList',
  mixins: [commonMixin],
  components: { VSelect, ProductType, ProductBrand },
  props: {
    newLoading: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: [String, Number],
      default: '300'
    },
    showTable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      spinning: false,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, // 为空显示的图片
      dataSource: [], // 树数据
      showEmpty: true, // 是否显示为空图片
      dealerSn: undefined, // 经销商sn
      parentDealerSn: undefined, // 上级经销商sn
      checkedKeys: [], // 选中数据
      halfCheckedKeys: [], // 选中孩子节点数据
      allLeafKeys: [], // 所有子节点数据
      allBrands: [], // 所有品牌数据
      check1: false, // 全选
      check2: false, // 自主品牌
      check3: false// 代理品牌
    }
  },
  computed: {

  },
  methods: {
    // 树 check 事件
    onCheck (checkedKeys, info) {
      // console.log('onCheck', checkedKeys, info)
      this.checkedKeys = checkedKeys
      // 选中孩子节点数据
      this.halfCheckedKeys = info.halfCheckedKeys
      if (this.check1) {
        this.check1 = false
      }
      if (this.check2) {
        this.check2 = false
      }
      if (this.check3) {
        this.check3 = false
      }
    },
    // 获取选中数据，重组所选数据结构
    getResult () {
      // 所有已选叶子节点
      const ret = this.allLeafKeys.filter(item => this.checkedKeys.includes(item.sn))
      console.log(ret)
      const result = []
      ret.map(item => {
        const a = item.sn.replace('-1_1_', '')
        const b = a.split('_2_')
        const c = b[1].split('_3_')
        const d = c[1].split('_4_')
        result.push({
          'productBrandSn': b[0],
          'productTypeSn1': c[0],
          'productTypeSn2': d[0],
          'productTypeSn3': d[1]
        })
      })
      return result
    },
    // 筛选并全选
    onAllChange (e, type) {
      console.log(e.target.checked, type)
      if (type == 0) {
        this.check2 = false
        this.check3 = false
        this.check1 = e.target.checked
        this.allCheck(this.check1, type)
      }
      if (type == 1) {
        this.check1 = false
        this.check3 = false
        this.check2 = e.target.checked
        this.allCheck(this.check2, type)
      }
      if (type == 2) {
        this.check1 = false
        this.check2 = false
        this.check3 = e.target.checked
        this.allCheck(this.check3, type)
      }
    },
    // 全选树
    allCheck (checked, type) {
      if (checked) {
        this.checkedKeys = []
        this.allLeafKeys.map(item => {
          // 自主或代理
          if (type) {
            const psn = item.sn.split('_2_')[0]
            const prow = this.dataSource.find(k => k.sn == psn)
            if (prow && prow.productBrandType == type) {
              this.checkedKeys.push(item.sn)
            }
          } else {
            // 全品类
            this.checkedKeys.push(item.sn)
          }
        })
      } else {
        this.checkedKeys = []
      }
    },
    // 获取所有叶子结节
    getLeafKeys (tree) {
      const leafNodes = []
      function traverse (nodes) {
        nodes.forEach(node => {
          if (node.sonList && node.sonList.length) {
            traverse(node.sonList)
          } else {
            leafNodes.push(node)
          }
        })
      }
      traverse([tree]) // 假设tree是单个根节点
      return leafNodes
    },
    // 查询品类列表
    handleSearch () {
      if (this.dealerSn) {
        this.getTreeData()
      } else {
        this.$message.info('请选择上级经销商')
      }
    },
    // 获取树数据
    async getTreeData () {
      this.dataSource = []
      this.allLeafKeys = []
      this.spinning = true
      const params = { dealerSn: this.dealerSn, upsDealerSn: this.parentDealerSn }
      // 品类列表
      const listData = await dealerUpsPlTree(params).then(res => res.data)
      if (listData) {
        this.dataSource = listData.sort((a, b) => a.productBrandType - b.productBrandType)
        // 获取所有叶子节点
        this.dataSource.map(item => {
          this.allLeafKeys = this.allLeafKeys.concat(this.getLeafKeys(item))
          // 获取所有品牌sn
          this.allBrands.push(item.sn)
        })
        this.showEmpty = this.dataSource.length <= 0
      }
      this.spinning = false
    },
    // 初始化
    pageInit (detailData, parentDealerSn, dealerSn) {
      this.detailData = detailData
      this.parentDealerSn = parentDealerSn
      this.dealerSn = dealerSn
      // 获取列表
      this.handleSearch()
    }
  }
}
</script>
  <style lang="less">
    .categoryTree-wrap{
      .empty-data{
            color: #999;
            text-align: center;
            padding: 20px;
        }
      .ant-tree{
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .ant-tree > li{
        width: 33%;
      }
    }
  </style>
