<template>

    <el-dialog class="originIndex-dialog" title="分配批次" v-loading="fullscreenLoading" :visible.sync="dialogVisible" :before-close="handleClose">
        <div>
            <el-form :model="OriginGroupForm" ref="form">
                <el-form-item label="批次号:" prop="originIndex">
                    <el-col :span="18">{{originIndex}}</el-col>
                </el-form-item>
                <el-form-item label="选择分组">
                    <el-select v-model="bizGroup" placeholder="请选择">
                        <el-col :span="18">
                            <el-option v-for="item in bizGroups" :label="item.name" :value="item.value">
                            </el-option>
                        </el-col>
                    </el-select>
                </el-form-item>
                <el-form-item label="分配描述" prop="groupDesc">
                    <el-col :span="18">
                        <el-input type="textarea" v-model="desc"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button v-if="$permissionUtils.btnPermission('allotGroup')" type="primary" @click="submitClick"
                       >确认分配
            </el-button>
        </div>
        <br/>
        <h2>分配记录</h2>
        <div class="system-list">
            <el-table :data="records" stripe style="width: 100%">
                <el-table-column type="index" width="80"></el-table-column>
                <el-table-column prop="originIndex" sortable label="客户批次号"></el-table-column>
                <el-table-column prop="bizGroup" sortable label="销售组"></el-table-column>
                <el-table-column prop="groupDesc" sortable label="分配描述"></el-table-column>
                <el-table-column prop="creator" sortable label="创建人"></el-table-column>
                <el-table-column prop="gmtCreated" :formatter="dateFormat" sortable
                                 label="创建日期"></el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
    import * as moment from "moment";

    export default {
        name: "DistributionBatchDialog",

        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            originIndex: {
                type: String,
                required: true
            },
        },
        data() {
            return {
                fullscreenLoading: false,
                bizGroup: '',
                desc: '',
                OriginGroupForm: {
                    originIndex: '',
                    bizGroup: '',
                    desc: ''
                },

                visible: this.$props.dialogVisible,
                record: "",
                records: [],

                ui: {
                    submitLoading: false,
                },
                visible: this.$props.dialogVisible,
                bizGroups: [
                    {name: '营销一组', value: 'YX01'},
                    {name: '营销二组', value: 'YX02'},
                    {name: '营销三组', value: 'YX03'},
                    {name: '营销四组', value: 'YX04'},
                    {name: '昆明营销一组', value: 'KMYX01'},
                    {name: '昆明营销二组', value: 'KMYX02'},
                    {name: '昆明营销三组', value: 'KMYX03'},
                    {name: '断约营销一组', value: 'R001'},
                    {name: '断约营销二组', value: 'R002'},
                ],

            }
        },
        mounted() {
            this.loadQueryData();
        },
        methods: {
            loadQueryData() {
                this.$$get(`/originIndex/getAllotList/${this.$props.originIndex}`)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.records = res.data.data;
                    })
                    .catch(err => this.$$msg.err(err))
            },
            submitClick() {
                //显示loading 或者 进度图
                this.fullscreenLoading = true;
                this.$$post('/originIndex/allotGroup', {
                    originIndex: this.originIndex,
                    bizGroup: this.bizGroup,
                    desc: this.desc,
                }).then(res => {
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    });
                    alert(res.data.data.result)
                    //成功之后，关闭loading或者，把进度条隐藏
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    // this.$message({message: res.data.data.result, type: 'err'});
                    setTimeout(function () {
                        this.visible = false;
                        window.location.reload();
                    }, 500)
                }).catch(err => {
                    //失败之后，关闭loading或者，把进度条隐藏
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    });
                    this.$$msg.err(err)
                })
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            /** 关闭处理 */
            handleClose() {
                this.visible = false;
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 300);
            },
        },
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
    .originIndex-dialog {
        .input {
            width: 60%;
            margin: auto;
        }
    }
</style>

