<template>
  <el-dialog title="选择部门成员" width="700px" class="dialog-width" :visible="dialogFormVisibleT" :modal-append-to-body="true"
    append-to-body :close-on-click-modal="false" @close="cancelForm">
    <section class="divBox">
      <div class="header clearfix">
        <div class="container">
          <el-form inline>
            <el-form-item>
              <el-input v-model.trim="listPram.name" placeholder="请输入姓名" clearable />
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="listPram.departmentName" placeholder="请输入部门名称" clearable />
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="handerSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="listLoading" :data="listData.list" style="width: 100%;overflow: auto;" :max-height='200'
        size="mini" :highlight-current-row="true" @selection-change="handleSelectionChange" :key="tableKey"
        :header-cell-style="{ fontWeight: 'bold' }">
        <el-table-column type="selection" width="55" />
        <el-table-column label="姓名" prop="name" min-width="150" />
        <el-table-column label="部门名称" prop="departmentName" min-width="150" />
      </el-table>
      <div class="block mb20">
        <el-pagination :current-page="listPram.page" :page-sizes="constants.page.limit" :layout="constants.page.layout"
          :total="listData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </section>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelForm()">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { departmemberlistApi } from '@/api/distribution';
export default {
  props: ['visible'],
  components: {
  },
  data() {
    return {
      dialogFormVisibleT: this.visible,
      listLoading: false,
      data: [],
      constants: this.$constants,
      listPram: {
        name: null,
        departmentName: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      listData: { list: [], total: 0 },
      tableData: {
        data: [],
        total: 0,
      },
      tableKey: Math.random(),//列表刷新
      multipleSelection: [],
    }
  },
  watch: {
    visible() {
      this.dialogFormVisibleT = this.visible
    }
  },
  mounted() {
    this.handlerGetListData(this.listPram);
  },
  methods: {
    handleSelectionChange(val) {//全选
      console.log(val)
      this.multipleSelection = val;
    },
    handerSearch() {
      this.listPram.page = 1;
      this.handlerGetListData(this.listPram);
    },
    handlerGetListData(pram) {
      this.listLoading = true
      departmemberlistApi(pram).then(res => {
        console.log('res', res)
        this.listData = res
        this.listLoading = false
      }).catch((res) => {
        this.listLoading = false
      });
    },
    handleSizeChange(val) {
      this.listPram.limit = val;
      this.handlerGetListData(this.listPram);
    },
    handleCurrentChange(val) {
      this.listPram.page = val;
      this.handlerGetListData(this.listPram);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm() {
      if (this.multipleSelection.length == 0) {
        this.$message({ type: 'warning', message: '请选择部门成员' })
        return
      }
      this.$emit("channelpop", this.multipleSelection);
      this.cancelForm()
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:visible", false);
      this.$nextTick(() => {
        // this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
  }
}
</script>
<style scoped lang="scss">
.dialog-width {

  //弹出层里内容的高度
  ::v-deep .el-dialog__body {
    max-height: 500px !important;
    overflow: auto;
  }

}
</style>