  <!--
  @description:商品分类树选择
  @Modifier:杨胜国
  @routerPath:
  @date: 2021-7-14 10:14:35
-->
<template>
  <!-- 选择供货商品类别的dialog -->
  <el-dialog
    v-if="dialogData.dialog"
    :visible.sync="dialogData.dialog"
    :before-close="handleCloseSelect"
    append-to-body
    title="请选择分类"
    width="40%"
    custom-class="shop_mall_dialog"
  >
    <!-- tree -->
    <el-row>
      <el-col :offset="3" :span="18">
        <el-scrollbar style="height:400px">
          <el-tree
            ref="categoryTree"
            v-loading="loadding"
            :props="defaultProps"
            :data="categoryData"
            :default-checked-keys="defaultCheckedKeys"
            :check-strictly="true"
            node-key="id"
            show-checkbox
            default-expand-all
            @check-change="handleCheckChange"
            @check="handleCurrentChange"
          />
        </el-scrollbar>
      </el-col>
    </el-row>
    <!-- footer -->
    <span slot="footer" class="dialog-footer">
      <el-button type="purple" style="margin-right:50px" @click="addToForm">
        确 定
      </el-button>
      <el-button @click="cancelSelect">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 公用方法*/
// api
import {
  getSupplierAvailableClassTree
} from '@/api/shoppingmall/products'
export default {
  name: 'OrganTreeDialog',
  components: {
  },
  props: {
    // 按钮类型 false 默认 true 椭圆形
    dialogData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    singleChoice: { // 单选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadding: false,
      // tree配置选项
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // tree默认选中的节点
      defaultCheckedKeys: [],
      // 分类数据
      categoryData: []
    }
  },
  watch: {
    // 监听新增dialog的显示状态
    'dialogData.dialog'(val) {
      // val  true -> 打开dialog   false -> 关闭dialog
      if (val) {
        // 获取分类json树
        this.getCategoryTree()
      }
    }
  },
  methods: {
    // 获取商品分类json树
    getCategoryTree(pid) {
      getSupplierAvailableClassTree(pid).then((res) => {
        this.loadding = true
        if (res.header.ret === '0') {
          this.categoryData = res.data
          this.loadding = false
        }
      })
    },
    // 点击categoryTree复选框触发,只能单选
    handleCheckChange(data, checked, node) {
      if (checked) {
        this.$refs.categoryTree.setCheckedNodes([data])
      }
    },
    // 获取选中的商品分类数据
    handleCurrentChange(data) {
      // 将选中的data赋值给表单
      this.categoryInfo = { id: data.id, name: data.name }
    },
    cancelSelect() {
      this.dialogData.dialog = false
    },
    // 关闭选择商品类别dialog时的回调
    handleCloseSelect() {
      this.dialogData.dialog = false
      // do something
    },
    // 将选中的tree节点添加到表单
    addToForm() {
      const nodes = this.$refs.categoryTree.getCheckedNodes()
      const data = {
        classifyNo: [], // 机构编码
        keys: [], // id集合
        labels: []// 名称集合
      }
      nodes.forEach(item => {
        data.classifyNo.push(item.classifyNo)
        data.keys.push(item.id)
        data.labels.push(item.name)
      })
      data.classifyNo = data.classifyNo.join(',')
      data.keys = data.keys.join(',')
      data.labels = data.labels.join(',')
      this.$emit('call-back', data)
      this.dialogData.dialog = false
    }
  }
}
</script>

<style scoped lang="less">

// 只显示叶子节点的复选框
/deep/.el-tree-node{
  .is-leaf + .el-checkbox .el-checkbox__inner{
      display: inline-block;
  }
  .el-checkbox .el-checkbox__inner{
      display: none;
  }
}
/deep/.el-tree-node.is-current > .el-tree-node__content {
  color: #606266;
}
</style>
