<template>
    <el-dialog :visible.sync="visible" v-if="visible" title="积分兑换" width="36%" class="dialog" @close="handleClose">
        <el-form :model="form" ref="formRef" label-position="top" :rules="rules">
            <el-form-item label="兑换人">
                <el-select placeholder="请选择" style="width: 100%;" v-model="form.userName" @change="handleUserChange">
                    <el-option v-for="(item, index) in userList" :key="index" :value="item.userName"
                        :label="item.nikeName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="会员等级">
                <el-input v-model="form.gradeName" :disabled="true" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="当前积分">
                <el-input v-model="form.currentPoints" :disabled="true" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="兑换商品" prop="goodsCode">
                <el-select placeholder="请选择" style="width: 100%;" v-model="form.goodsCode">
                    <el-option v-for="(item, index) in optionList" :label="item.name" :value="item.code"
                        :key="index"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>
<script>
import { pointsExchange, exchangeUser, exchange } from '@/api/pointsExchange'
export default {
    data() {
        return {
            visible: false,
            form: {},
            userList: [],
            optionList: [],
            rules: {
                goodsCode: [{ required: true, message: '请选择兑换商品', trigger: 'change' }]
            },
            disabled: false
        }
    },
    methods: {
        // 打开兑换窗口
        openModal(row) {
            this.visible = true;
            this.getUsers(row)
            this.getOptions()
            this.disabled = row ? true : false
            this.$nextTick(() => {
                this.form = { ...this.form, ...row }
            })
        },
        // 兑换人
        getUsers(row) {
            exchangeUser().then(res => {
                console.log(res)
                this.userList = res.data;
                if (row && row.userName) {
                    res.data.forEach((item) => {
                        if (item.userName == row.userName) {
                            this.form.nikeName = item.nikeName;
                            this.form.gradeName = item.gradeName
                        }
                    })
                }

            })
        },
        handleUserChange(val) {
            this.userList.forEach((item) => {
                if (item.userName == val) {
                    this.form.nikeName = item.nikeName;
                    this.form.gradeName = item.gradeName
                    this.form.currentPoints = item.currentPoints
                }
            })
        },
        // 兑换商品列表
        getOptions() {
            pointsExchange().then(res => {
                console.log(res)
                this.optionList = res.data
            })
        },
        handleConfirm() {
            let { nikeName, userName, userGradeName, goodsCode } = this.form
            let data = { nikeName, userName, userGradeName, goodsCode }
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    exchange(data).then(res => {
                        if (res.code == 200) {
                            this.$modal.msgSuccess("兑换成功");
                            this.handleClose()
                            this.$emit('handleOk');
                        } else {
                            this.$modal.msgSuccess(res.msg || "兑换失败");
                        }
                    })
                }
            })
        },
        handleClose() {
            this.form = {}
            this.visible = false
        }
    }
}

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