  <!--
  @description: 供货范围/产品名称弹框
  @Modifier:肖文龙
  @routerPath:
  @date: 2020-5-18 20:14:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    :title="dialogData.title"
    append-to-body
    width="700px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 580px) / 2)"
  >
    <!--搜索-->
    <section class="tools p16 clearfix">
      <el-form ref="searchForm" :model="searchForm" inline @submit.native.prevent>
        <el-form-item label="名称" prop="contractName">
          <el-input
            v-model="searchForm.categoryName"
            placeholder=""
            @input="searchTree"
          />
        </el-form-item>
        <el-form-item class="fr">
          <!-- 查询 -->
          <el-button
            type="primary"
            @click="searchTree('searchForm')"
          >
            <!--{{ language.query }}-->
            查询
          </el-button>
          <el-button @click="consignContractInfo('clear')">
            <!-- 清空 -->
            <!--{{ language.empty }}-->
            清空
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section class="main mb10">
      <el-scrollbar style="height:400px">
        <el-tree
          v-show="!searchForm.categoryName"
          ref="tree"
          :class="dialogData.onlyOneSelected?'checkTree':''"
          :filter-node-method="filterNode"
          :props="defaultProps"
          :load="treeLoadNode"
          :expand-on-click-node="false"
          check-strictly
          show-checkbox
          lazy
          node-key="id"
          @check="checkGroupNode"
        />
        <el-tree
          v-show="searchForm.categoryName"
          ref="searchTree"
          :empty-text="searchTreeEmptyText"
          :class="dialogData.onlyOneSelected?'checkTree':''"
          :filter-node-method="filterNode"
          :props="defaultProps"
          :data="searchTreeData"
          check-strictly
          show-checkbox
          node-key="id"
          @check="checkGroupNode"
        />
      </el-scrollbar>
    </section>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">
        <!--{{ language.Determine }}-->
        确 定
      </el-button>
      <el-button @click="dialogData.dialog = false">
        <!--{{ language.cancel }}-->
        取 消
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getPurcatalogCategoryTree, getPurcatalogCategoryTreeBySearch } from '@/api/common/tools'// 产品分类
import { mapGetters } from 'vuex'
export default {
  name: 'CategoryTreeDialog',
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          title: '弹框', // 弹框标题
          dialog: false, // 弹窗状态
          onlyOneSelected: false, // 是否只能选最后一级且是单选
          multipleChoice: false, // true多选 false单选（默认单选）
          selectCodes: []// 当前选中的供货范围Code
        }
      }
    },
    /* 查询物料方式
     * 为空时查询所有物料信息  00 屏蔽小级物料信息
    */
    webPlanSite: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchTreeData: [], // 搜索查询的数据
      searchTreeEmptyText: '', // 搜索查询的数据展示的文本
      defaultProps: {
        children: 'children',
        label: 'categoryName',
        isLeaf: 'categoryIsLeaf'
      },
      // 搜索信息
      searchForm: {
        categoryName: '', // 名称
        webPlanSite: this.webPlanSite// 为空时查询所有物料信息  00 屏蔽小级物料信息
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    dialogData: {
      handler(val) {
        if (val.dialog) {
          val.selectCodes = val.selectCodes || ['1']
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(val.selectCodes)
            this.$refs.searchTree.setCheckedKeys(val.selectCodes)
          })
        }
      },
      deep: true
    }
  },
  methods: {
    // 选择会触发checkGroupNode方法
    checkGroupNode(checkedNodes, checkedKeys) {
      // 是否只能选最后一级且是单选则执行
      if (!this.dialogData.multipleChoice && this.dialogData.onlyOneSelected && checkedKeys.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([checkedNodes.id])
        this.$refs.searchTree.setCheckedKeys([checkedNodes.id])
      }
    },
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      // 过滤掉已选择的数据 && 搜索的数据
      return data.categoryName.includes(value.categoryName)
    },
    /*
    初始化数据
    resolve 添加树节点数据
    */
    initLoad(node, resolve) {
      const data = {
        ...this.searchForm,
        parentId: node.key// 父节点id
      }
      getPurcatalogCategoryTree(data).then(res => {
        res.data.forEach(item => {
          item.categoryIsLeaf = !Number(item.categoryIsLeaf)// 指定节点是否为叶子节点
        })
        resolve(res.data)// 添加树节点
      })
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      this.initLoad(node, resolve)// 初始化数据
    },
    /*
    搜索数据
    */
    searchTree() {
      this.searchTreeEmptyText = '拼命加载中...'
      getPurcatalogCategoryTreeBySearch(this.searchForm).then(res => {
        this.searchTreeData = res.data
        this.searchTreeEmptyText = '暂无数据'
      })
    },
    // 供货范围/清空
    consignContractInfo(data) {
      if (data === 'clear') { // 清空
        this.searchForm.categoryName = ''// 名称
        // this.infoFrom.supplyScopeId = ''// 代码
      } else { // 选择
        // this.infoFrom.supplyScope = data.labels// 名称
        // this.infoFrom.supplyScopeId = data.keys// 代码
      }
    },
    // 选择信息-确定
    ensure() {
      let nodes = ''
      if (this.searchForm.categoryName) {
        nodes = this.$refs.searchTree.getCheckedNodes()// 获取已选中信息
      } else {
        nodes = this.$refs.tree.getCheckedNodes()// 获取已选中信息
      }
      if (nodes.length > 0) {
        const data = {
          keys: [], // id集合
          labels: []// 名称集合
        }
        nodes.forEach(item => {
          data.keys.push(item.id)
          data.labels.push(item.categoryName)
        })
        data.keys = data.keys.join(',')
        data.labels = data.labels.join(',')
        this.$emit('categoryTreeInfo', data)
        this.dialogData.dialog = false// 关闭弹框
      } else {
        this.$message.warning(`请选择${this.dialogData.title}`)
      }
    }
  }
}
</script>

<style scoped lang="less">
  /deep/ .checkTree{
    .el-tree-node{
      .is-leaf + .el-checkbox .el-checkbox__inner{
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner{
        display: none;
      }
    }
  }
</style>
