<template>
    <a-modal title="选择学员" :visible="childShow" @ok="selectOk " @cancel="selectCancel" :width=800
        :body-style="{width:200}">
        <a-row :gutter="24" style="margin-bottom:10px;">
          <a-col span="8">
              <a-input-search placeholder="请输入姓名、家长姓名、联系方式、备注" v-model="queryParam.keywords"
              enter-button @search="onSearch"></a-input-search>
          </a-col>
        </a-row>
        <a-table ref="table2" 
        size="middle" 
        :scroll="{y:250}" 
        rowKey="id"
        :columns="columns" 
        :dataSource="table.dataSource" 
        :pagination="table.pagination" 
        :loading="table.loading"
        :row-selection="{selectedRowKeys, onChange: handleTableSelectChange}"
        class="j-table-force-nowrap" @change="handleTableChange">
        </a-table>
        <template slot="footer">
            <a-row>
                <a-col span="12" style="text-align: left;">
                    已选中: <span style="color:tomato">{{this.selectedRowKeys.length}}</span> 个
                </a-col>
                <a-col span="12" style="text-align: right;">
                    <a-button @click="selectCancel">关闭</a-button>
                    <a-button @click="selectOk" type="primary">确定</a-button>
                </a-col>
            </a-row>

        </template>
    </a-modal>
</template>
<!-- 重写多选 -->
<script>

import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import { httpGroupRequest } from '@/api/GroupRequest.js'
import { getAge } from '@/utils/util';
export default {
    name: 'studentSelect',
    data() {
        return {
            table: {
                loading: true,
                // 表头
                columns: [],
                //数据集
                dataSource: [],
                // 选择器
                selectedRowKeys: [],
                selectionRows: [],
                // 分页参数
                pagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + '-' + range[1] + ' 共' + total + '条'
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                }
            },
            selectedRowKeys: [], 
            selectedRows:[],
            selectReturnRows:[],
            queryParam: {},
            columns: [
                {
                    title: '姓名（昵称）',
                    align: "center",
                    dataIndex: 'name',
                    customRender:function (t,r,index) {
                        return t + '('+r.nickname+')'
                    }
                },
                {
                    title: '年龄',
                    align: "center",
                    dataIndex: 'age',
                    customRender:function (t,r,index) {
                        return getAge(r.birthday)
                    }
                },
                {
                    title: '联系方式',
                    align: "center",
                    dataIndex: 'contactPhone'
                },
            ],
        }
    },
    props: ['childShow', 'dataPara'],
    watch: {
        immediate: true,
        childShow: {
            handler() {
                if (this.childShow) {
                    this.selectReturnRows = [];
                    this.selectedRowKeys = [];
                    this.selectedRows =[];
                    this.queryParam = {};
                    this.queryParam =  {
                        notIn: this.dataPara.substr(0, this.dataPara.length - 1)
                    };
                    this.loadData();
                }
            },
        }
    },
    methods: {
        selectOk() {
            let returnSelected = []
            for(let i=0; i < this.selectedRowKeys.length; i++){
                let temp = this.selectReturnRows.find(item => {return item.id == this.selectedRowKeys[i] })
                returnSelected.push(temp);
            }
            this.$emit('child-event', returnSelected);
        },
        selectCancel() {
            this.tables = {};
            this.selectedRowKeys = [];
            this.selectedRows = [];
            this.$emit('child-event', []);
        },
        loadData(arg) {
            let params = this.getQueryParams();//查询条件
            this.table.loading = true
            let url = '/customer/customerInfo/list'
            //缓存key
            let groupIdKey
            if (this.groupId) {
                groupIdKey = this.groupId + url + JSON.stringify(params)
            }
            httpGroupRequest(() => getAction(url, params), groupIdKey).then(res => {
                this.table.loading = false;
                let data = res.result;
                if (data) {
                    this.table.pagination.total = Number(data.total);
                    this.table.dataSource = data.records;
                } else {
                    this.table.pagination.total = 0;
                    this.table.dataSource = [];
                }
            })
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            if (Object.keys(sorter).length > 0) {
                this.iSorter = {
                    column: sorter.field,
                    order: 'ascend' === sorter.order ? 'asc' : 'desc'
                }
                // 排序字段受控
                this.table.columns.forEach(col => {
                    if (col.dataIndex === sorter.field) {
                        this.$set(col, 'sortOrder', sorter.order)
                    } else {
                        this.$set(col, 'sortOrder', false)
                    }
                })
            }
            this.table.pagination = pagination
            this.loadData()
        },
        getQueryParams() {
            let paramTarget = {}
            if (this.dynamicParam) {
                //处理自定义参数
                Object.keys(this.dynamicParam).map(key => {
                    paramTarget['self_' + key] = this.dynamicParam[key]
                })
            }
            let param = Object.assign(paramTarget, this.queryParam, this.iSorter);
            param.pageNo = this.table.pagination.current;
            param.pageSize = this.table.pagination.pageSize;
            return filterObj(param);
        },
        handleTableSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
            for(let i=0; i<this.selectionRows.length; i++ ) {
                this.selectReturnRows.push(this.selectionRows[i]);
            }
      },
      onSearch() {
        this.loadData();
      }

    }
}
</script>
  