<template>
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        :before-close="close"
        width="500px"
    >
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
            <el-form-item :label="labelText" prop="redElvelopId">
                <el-select v-model="ruleForm.redElvelopId" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit()" :disabled="submitBtndisabled">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { validPositiveInteger } from '@/apps/mobile/utils/validate';
import { queryCouponsList, batchSendRedEnvelopes } from '@/apps/mobile/api/expert/index';
export default {
    data() {
        return {
            title: '',
            dialogVisible: false,
            submitBtndisabled: false,
            ruleForm: {
                redElvelopId: null,
            },
            rules: {
                redElvelopId: [{ required: true, message: '请选择红包', trigger: 'change' }],
            },
            page: {
                pageNum: 1,
                pageSize: 1000,
            },
            options: [],
            labelText: '',
            type: null,
            ids: [],
        };
    },
    methods: {
        submit() {
            this.$refs['ruleForm'].validate(async valid => {
                if (valid) {
                    this.submitBtndisabled = true;
                    const data = {
                        redElvelopId: this.ruleForm.redElvelopId,
                        userList: this.ids,
                    };
                    batchSendRedEnvelopes(data)
                        .then(res => {
                            let message = '发放成功';
                            this.completeOperation(message);
                        })
                        .catch();
                } else {
                    return false;
                }
            });
        },
        close() {
            this.dialogVisible = false;
            this.ruleForm = { redElvelopId: null };
            this.options = [];
            this.ids = [];
        },
        open(data) {
            this.type = data.type;
            this.ids = data.ids;
            if (this.type === 1) {
                this.title = '卡券发放';
                this.labelText = '卡券';
            } else {
                this.title = '红包发放';
                this.labelText = '红包';
            }
            this.getCouponsList();
            this.dialogVisible = true;
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        getCouponsList() {
            let obj = {
                checkFalg: 1,
                type: this.type,
                statuz: 1,
                ...this.page,
            };
            queryCouponsList(obj)
                .then(res => {
                    this.options = res.data.records || [];
                })
                .catch();
        },
    },
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}
.el-input {
    width: auto;
}
</style>
