<!--
  @description: 组织机构树二级公司
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-10-23-9:40
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="secondaryLevelCompanyTreeDialog"
    :close-on-click-modal="false"
    title="所属二级公司"
    append-to-body
    width="700px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 580px) / 2)"
  >
    <section class="main mb10">
      <!--搜索-->
      <section class="clearfix">
        <el-form ref="searchForm" :model="searchForm" inline @submit.native.prevent>
          <el-form-item label="机构名称" prop="companyName">
            <el-input v-model="searchForm.companyName" placeholder="机构名称" style="width: 228px" @keyup.enter.native="initLoadData" />
          </el-form-item>
          <el-form-item class="fr">
            <el-button type="primary" @click="initLoadData('searchForm')">
              搜索
            </el-button>
            <el-button plain type="info" @click="resetForm('searchForm')">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </section>
      <el-scrollbar class="scrollbar" style="height:400px">
        <el-tree
          ref="treeSelect"
          class="filter-tree"
          :data="companyNameData"
          :props="defaultProps"
          default-expand-all
          show-checkbox
          node-key="companyId"
          @check="orgCheckChange"
        />
      </el-scrollbar>
    </section>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">确 定</el-button>
      <el-button @click="secondaryLevelCompanyTreeDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { selectSecondaryLevelCompany } from '@/api/common/user'
export default {
  name: 'SecondaryLevelCompany',
  data() {
    return {
      secondaryLevelCompanyTreeDialog: false, // 是否打开弹框
      searchForm: {
        companyName: '' // 机构名称
      },
      companyNameData: [], // 所属二级公司列表
      defaultProps: {
        label: 'companyName' // 指定节点标签为节点对象的某个属性值
      }
    }
  },
  methods: {
    // 打开弹框
    openDialog() {
      this.$nextTick(() => {
        this.initLoadData()
      })
      this.secondaryLevelCompanyTreeDialog = true
    },
    // 获取所属公司
    initLoadData() {
      selectSecondaryLevelCompany(this.searchForm).then(res => {
        this.companyNameData = res.data
      })
    },
    // 当复选框被点击的时候触发
    orgCheckChange(checkedNodes, checkedKeys) {
      if (checkedKeys.checkedNodes.length > 0) {
        this.$refs.treeSelect.setCheckedKeys([checkedNodes.companyId])
      }
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.initLoadData()
    },
    // 选择信息-确定
    ensure() {
      const checkedNodes = this.$refs.treeSelect.getCheckedNodes()
      if (checkedNodes.length > 0) {
        this.$emit('secondaryLevelCheckedNodes', checkedNodes[0])
        this.secondaryLevelCompanyTreeDialog = false
      } else {
        this.$message.warning('必须选中一条记录')
      }
    }
  }
}
</script>

<style scoped>

</style>
