<!--
  @description: 新增机构-上级机构弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-9-23-13:37
-->
<template>
  <el-dialog
    :visible.sync="organizatDialogVisible"
    :close-on-click-modal="false"
    title="选择上级单位"
    width="840px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <section class="pt16 clearfix">
      <el-form ref="organizatDialogForm" :model="organizatDialogForm" inline>
        <el-form-item label="机构名称" prop="departname">
          <el-input
            v-model="organizatDialogForm.departname"
            placeholder="机构名称"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="机构代码" prop="orgCode">
          <el-input
            v-model="organizatDialogForm.orgCode"
            placeholder="机构代码"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary" @click="search('organizatDialogForm')">
            查询
          </el-button>
          <el-button plain type="info" @click="resetForm('organizatDialogForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section>
      <el-table
        v-loading="loading"
        :data="organizatDialogData"
        class="pointer"
        highlight-current-row
        size="mini"
        @current-change="organizationHandleChange"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        />
        <el-table-column

          prop="departname"
          label="机构名称"
        />
        <el-table-column
          prop="orgCode"
          label="机构代码"
          align="center"
          width="200"
        />
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </section>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">确 定</el-button>
      <el-button @click="organizatDialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api*/
import { getDepartList } from '@/api/rolemanagment/organization'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 过滤空的key
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  name: 'OrganizatDialog',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: true,
      organizatDialogData: [], // 渲染上级机构弹框表格
      // 上级机构选择参数
      organizatDialogForm: {
        orgCode: '', // 编码
        departname: '', // 名称
        orgType: ''
      },
      organizatDialogVisible: false // 上级机构信息列表弹框
    }
  },
  methods: {
    // 选择上级单位列表弹框（调接口）
    loadData() {
      this.organizatDialogVisible = true
      const params = this.getParams()// 查询条件
      getDepartList(params).then(response => {
        this.loading = false
        this.organizatDialogData = response.data.results
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询条件
    getParams() {
      const param = Object.assign({}, this.organizatDialogForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)// 过滤空的key
    },
    // 点击table某一行当前选择的信息
    organizationHandleChange(val) {
      this.organization = val
    },
    // 选择上级单位确定按钮
    ensure() {
      this.$emit('selectedIndustry', this.organization)
      this.organizatDialogVisible = false
    },
    // 选择弹框查询
    search() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    },
    // 选择弹框 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      this.loadData()
    }
  }
}
</script>

<style scoped>

</style>
