  <!--
  @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"
    width="700px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 580px) / 2)"
  >
    <!--搜索-->
    <section class="tools p0-16 pt16 clearfix">
      <el-form ref="searchForm" :model="searchForm" inline @submit.native.prevent>
        <el-form-item label="名称" prop="departName">
          <el-input
            v-model="searchForm.departName"
            placeholder=""
            @blur="search"
          />
        </el-form-item>
        <el-form-item class="fr">
          <!-- 查询 -->
          <el-button
            type="primary"
            :round="btnRound"
            @click="search('searchForm')"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section class="main mb10">
      <organizationTree
        :key="dialogData.dialog"
        ref="organizationTree"
        :tree-data="treeData"
        :height="organizationTreeData.height"
        :show-checkbox="organizationTreeData.showCheckbox"
        :select-codes="organizationTreeData.selectCodes"
        :search-params="organizationTreeData.searchParams"
        :single-choice="singleChoice"
      />
    </section>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        :round="btnRound"
        @click="ensure"
      >确 定</el-button>
      <el-button
        :round="btnRound"
        @click="dialogData.dialog = false"
      >取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 公用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
import { mapGetters } from 'vuex'
import organizationTree from './organizationTree'
export default {
  name: 'OrganTreeDialog',
  components: {
    organizationTree
  },
  props: {
    // 按钮类型 false 默认 true 椭圆形
    btnRound: {
      type: Boolean,
      default: false
    },
    singleChoice: { // 单选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      organizationTreeData: {
        height: '400px', // 树容器高度
        showCheckbox: true, // 多选框
        selectCodes: [], // 默认选中结点
        searchParams: { // 搜索信息
          departName: '' // 名称
        }
      },
      // 弹窗-展示/隐藏状态 true 展示/false 隐藏
      dialogData: {
        title: '弹框', // 弹框标题
        dialog: false, // 弹窗状态
        companyId: '', // 父级id
        selectCodes: []// 当前选中的供货范围Code
      },
      searchForm: { // 搜索信息
        departName: '' // 名称
      },
      // 传给子组件树结构
      treeData: {
        parentId: '',
        onlyOneSelected: false // 是否只能选最后一级且是单选
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    'dialogData.selectCodes'(val) {
      val = val || ['1']
      this.$nextTick(() => {
        this.organizationTreeData.selectCodes = val
      })
    },
    'searchForm.departName'(val) {
      if (!val) {
        this.search()
      }
    }
  },
  methods: {
    // 打开弹窗
    open(data) {
      if (data.companyId) {
        this.treeData.parentId = data.companyId // 父级id
      }
      this.treeData.onlyOneSelected = data.onlyOneSelected // 是否只能选最后一级且是单选
      this.dialogData = data
    },
    // 选择信息-确定
    ensure() {
      const nodes = this.$refs.organizationTree.handelGetCheckedNodes()
      const data = {
        codes: [], // 机构编码
        keys: [], // id集合
        labels: []// 名称集合
      }
      nodes.forEach(item => {
        data.codes.push(item.orgCode)
        data.keys.push(item.id)
        data.labels.push(item.departname)
      })
      data.codes = data.codes.join(',')
      data.keys = data.keys.join(',')
      data.labels = data.labels.join(',')
      this.$emit('call-back', data)
      this.dialogData.dialog = false// 关闭弹框
    },
    // 搜索
    search() {
      this.organizationTreeData.searchParams = cloneObject(this.searchForm)// 深拷贝
    }
  }
}
</script>

<style scoped lang="less">
</style>
