<template>
    <div>
        <el-dialog :visible.sync="visible" v-if="visible" title="批量兑换" :close-on-click-modal="false" width="36%"
            class="dialog" @close="handleClose">
            <el-form :model="form" ref="formRef" label-position="top" :rules="rules">
                <el-form-item label="用户名" prop="userName">
                    <UserSelectInput v-model="form.userName" :value.sync="form.userName" :multiple="true"
                        @getValue="getNickName" placeholder="请选择用户"></UserSelectInput>
                </el-form-item>
                <el-form-item label="商品" prop="goodsCode">
                    <GoodsSelectInput :value.sync="form.goodsCode" placeholder="请选择兑换商品"></GoodsSelectInput>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm" :loading="loading">确定</el-button>
            </template>
        </el-dialog>
        <!-- 操作失败结果 -->
        <error-dialog ref="errorDialogRef"></error-dialog>
    </div>
</template>
<script>
import { batchExchange } from '@/api/pointsExchange';
import UserSelectInput from '@/components/UserSelect/input'
import GoodsSelectInput from '@/components/GoodsSelect/input'
import ErrorDialog from '../pointsManage/ErrorDialog.vue';
export default {
    data() {
        return {
            visible: false,
            loading: false,
            form: {},
            userList: [],
            optionList: [],
            rules: {
                userName: [{ required: true, message: '请选择用户', trigger: ['blur', 'change'] }],
                goodsCode: [{ required: true, message: '请选择商品', trigger: ['blur', 'change'] }]
            },
            disabled: false
        }
    },
    components: {
        UserSelectInput,
        GoodsSelectInput,
        ErrorDialog
    },
    methods: {
        // 打开兑换窗口
        openModal(row) {
            this.visible = true;
        },
        getNickName(val, name) {
            this.formatData(val, name);
        },
        formatData(val, name) {
            let users = [];
            let userNames = val.split(',')
            let nickNames = name.split(',')
            userNames.forEach((item, index) => {
                users.push({ nickName: nickNames[index], userName: item})
            })
            if (users.length > 0) {
                this.form.users = users;
            }
        },
        handleConfirm() {
            let { users, goodsCode } = this.form;
            let data = {
                users,
                goodsCode
            }
            this.loading = true;
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    batchExchange(data).then(res => {
                        if (res.code == 200) {
                            if (res.data.length == 0) {
                                this.loading = false;
                                this.$modal.msgSuccess('批量兑换商品成功')
                            } else {
                              this.loading = false;
                                this.$refs.errorDialogRef.openModal(res.data)
                            }
                            this.handleClose()
                            this.$emit('handleOk');
                        } else {
                            this.loading = false;
                            this.$modal.msgError(res.msg || "批量兑换商品失败");
                        }
                    })
                }
            })
        },
        handleClose() {
            this.form = {}
            this.visible = false
        }
    }
}

</script>
<style lang="scss">
.dialog {
    .el-dialog__body {
        padding: 0 20px !important;
    }
}
</style>
