<template>

    <div id="loan-record">
        <br>
        <br>
        <div>
            <!--分配详情页展示列表-->
            <div class="system-list">
                <el-table :data="records" stripe style="width: 100%">
                    <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column prop="originIndex" sortable label="客户批次号"></el-table-column>
                    <el-table-column prop="originDesc" sortable label="特征描述"></el-table-column>
                    <el-table-column prop="countSum" sortable label="客户总数"></el-table-column>
                    <el-table-column prop="gmtCreated" sortable label="创建日期" :formatter="transDateFormat"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="distributionBatch(scope.row)">分配批次</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.current"
                        :page-size="page.size"
                        layout="prev, pager, next"
                        :total="page.total">
                </el-pagination>
            </div>
        </div>
        <!--窗口组件-->
        <template>
            <!--分配批次窗口-->
            <distributionBatchDialog
                    v-if="ui.distributionBatchDialog.visible"
                    :dialogVisible="ui.distributionBatchDialog.visible"
                    :dialogVisible.sync="ui.distributionBatchDialog.visible"
                    :originIndex="ui.distributionBatchDialog.originIndex">
            </distributionBatchDialog>

        </template>

    </div>
</template>

<script type="text/ecmascript-6">

    import * as moment from "moment";
    import distributionBatchDialog from "../system/DistributionBatchDialog";


    export default {
        name: "CustomerDistribution",
        components: {
            distributionBatchDialog,
        },
        data() {
            return {
                queryModel: {
                    type: Object
                },
                originIndex: '',
                record: "",
                records: [],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },

                ui: {
                    distributionBatchDialog: {
                        visible: false,
                        originIndex: '',
                    },

                }
            }
        },
        mounted: function () {
            this.loadGroupingData();
        },
        methods: {
            /**分配批次*/
            distributionBatch(record) {
                this.ui.distributionBatchDialog = {
                    visible: true,
                    originIndex: record.originIndex,
                };
            },
            /** 所有批次信息列表 */
            loadGroupingData() {
                this.$$get(`/originIndex/getPageList/${this.page.current}`)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.page = this.clonePage(res.data);
                        this.records = res.data.data.data;
                    })
                    .catch(err => this.$$msg.err(err))
            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.loadGroupingData();
            },

        }
    }
</script>