<template>
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
        width="500px"
    >
        <el-form :model="formData" ref="formData" :rules="rules" label-width="120px">
            <el-form-item label="用户等级:" prop="userLevelId">
                <el-select placeholder="请选择" v-model="formData.userLevelId" @change="userLevelChange">
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="item in optionalRolesList"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="卡种:" prop="period">
                <el-select placeholder="请选择" v-model="formData.period">
                    <el-option
                        :label="item.name"
                        :value="item.period"
                        v-for="item in optionalPeriodList"
                        :key="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 { editDataUser, toWhichVip, toVip } from '@/apps/mobile/api/operation/user/index';
import { queryAllMemberFeeById } from '@/apps/mobile/api/memberFee/index';
export default {
    data() {
        return {
            title: '升级角色',
            formData: {},
            visible: false,
            id: null,
            submitBtndisabled: false,
            rules: {
                userLevelId: [{ required: true, message: '请选择角色特权', trigger: ['blur', 'change'] }],
                period: [{ required: true, message: '请选择卡种', trigger: ['blur', 'change'] }],
            },
            optionalRolesList: [],
            optionalPeriodList:[],
        };
    },
    methods: {
        open(id) {
            console.log(id);
            this.id = id;
            toWhichVip(id)
                .then(res => {
                    console.log(res);
                    this.optionalRolesList = res.data || [];
                })
                .catch();
            // 过滤掉没有id 的是数据,防止报错
            if (this.optionalRolesList && this.optionalRolesList.length) {
                this.optionalRolesList = this.optionalRolesList.filter(item => {
                    return item.id;
                });
            } else {
                this.optionalRolesList = [];
            }
            this.visible = true;
        },
        userLevelChange(val){
            queryAllMemberFeeById(val)
                .then(res => {
                    this.optionalPeriodList = res.data || [];
                })
                .catch();
        },
        close() {
            this.id = null;
            this.formData = {};
            this.$refs['formData'].resetFields();
            this.visible = false;
        },
        submit() {
            this.$refs['formData'].validate(async valid => {
                if (valid) {
                    this.submitBtndisabled = true;
                    let obj = {
                        userId: this.id,
                        userLevelId: this.formData.userLevelId,
                        period: this.formData.period,
                    };
                    toVip(obj)
                        .then(res => {
                            if (res.statusCode === '1') {
                                this.$message.success(res.message);
                            } else {
                                this.$message.warning(res.message);
                            }
                        })
                        .catch(() => {});
                    this.submitBtndisabled = false;
                    this.close();
                    this.$emit('queryListData');
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}
.el-input {
    width: auto;
}
</style>
