<template>
    <div>
        <el-form ref="musicForm"
                 :model="quitForm"
                 :rules="quitRules"
                 status-icon
                 class="musicForm"
                 label-width="120px">
            <el-alert title="已拒绝" show-icon center v-if="musicForm.status == 'DENIED'" :closable="false" class="alert" type="error"></el-alert>
            <el-alert title="已处理" show-icon center v-if="musicForm.status == 'APPROVED'" :closable="false" class="alert" type="success"></el-alert>
            <el-alert title="已取消" show-icon center v-if="musicForm.status == 'CANCELED'" :closable="false" class="alert" type="info"></el-alert>
            <el-form-item label="学员姓名">
                <el-input disabled v-model.trim="musicForm.user.username"></el-input>
            </el-form-item>
            <el-form-item label="乐团名称">
                <el-input disabled v-model.trim="musicForm.musicGroup.name"></el-input>
            </el-form-item>
            <el-form-item label="用户备注">
                <el-input type="textarea" disabled v-model.trim="musicForm.userComment"></el-input>
            </el-form-item>


            <el-form-item label="退还课程费用" v-if="musicForm.status == 'PROCESSING'"
                          prop="isRefundCourseFee">
                <el-radio v-model.trim="quitForm.isRefundCourseFee"
                            :label="true">是</el-radio>
                <el-radio v-model.trim="quitForm.isRefundCourseFee"
                            :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="退还乐器费用" v-if="musicForm.status == 'PROCESSING'"
                          prop="isRefundInstrumentFee">
                <el-radio v-model.trim="quitForm.isRefundInstrumentFee"
                            :label="true">是</el-radio>
                <el-radio v-model.trim="quitForm.isRefundInstrumentFee"
                            :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="退还教辅费用" v-if="musicForm.status == 'PROCESSING'"
                          prop="isRefundTeachingAssistantsFee">
                <el-radio v-model.trim="quitForm.isRefundTeachingAssistantsFee"
                            :label="true">是</el-radio>
                <el-radio v-model.trim="quitForm.isRefundTeachingAssistantsFee"
                            :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="退团原因"
                          prop="reason">
              <el-input type="textarea" :disabled="musicForm.status != 'PROCESSING'"
                        v-model.trim="quitForm.reason"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-permission="'musicGroupQuit/quitMusicGroup'" v-if="musicForm.status == 'PROCESSING'">
            <el-button type="primary"
                       @click="onSubmitGroup(musicForm, 'APPROVED')">确认</el-button>
            <el-button type="danger"
                       @click="onSubmitGroup(musicForm, 'DENIED')">拒绝</el-button>
        </div>
    </div>
</template>

<script>
import { queryApplyRefundDetail, musicGroupQuit, quitMusicGroup } from '@/api/journal'
import Tooltip from '@/components/Tooltip'
import cleanDeep from 'clean-deep'
import dayjs from 'dayjs'
export default {
    props: ['dialogDetail'],
    components: { Tooltip },
    data() {
        var validateReason = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请填写退团退费原因'));
            } else {
                callback();
            }
        };
        var validateFee1 = (rule, value, callback) => {
            if (value === '' || value == null) {
                callback(new Error('请选择退还课程费用'));
            } else {
                callback();
            }
        };
        var validateFee2 = (rule, value, callback) => {
            if (value === '' || value == null) {
                callback(new Error('请选择退还乐器费用'));
            } else {
                callback();
            }
        };
        var validateFee3 = (rule, value, callback) => {
            if (value === '' || value == null) {
                callback(new Error('请选择退还教辅费用'));
            } else {
                callback();
            }
        };
        return {
            musicForm: {
                user: {},
                musicGroup: {}
            },
            musicGroupCourse: [],
            vipCourse: [],
            quitForm: {
                // 退团信息确认
                isRefundCourseFee: null,
                isRefundInstrumentFee: null,
                isRefundTeachingAssistantsFee: null,
                reason: ""
            },
            quitRules: {
                isRefundCourseFee: [
                    { validator: validateFee1, trigger: 'change, blur' }
                ],
                isRefundInstrumentFee: [
                    { validator: validateFee2, trigger: 'change, blur' }
                ],
                isRefundTeachingAssistantsFee: [
                    { validator: validateFee3, trigger: 'change, blur' }
                ],
                reason: [{ validator: validateReason, trigger:"blur" }]
            },
        }
    },
    mounted() {
        this.__init()
    },
    methods: {
        async __init() {
            let { memo } = this.dialogDetail
            memo = memo ? JSON.parse(memo) : null
            if(!memo) { // 判断是否有参数
                this.$message.error('参数有误')
                return
            }
            if (memo.type == 'VIPGROUP') {
                // await queryApplyRefundDetail({ id: memo.Id }).then(res => {
                //     if (res.code == 200) {
                //         this.showRight = true
                //         this.showMessage = res.data
                //         this.showMessage.type = memo.type
                //         this.remark = res.data.studentApplyRefunds.remark
                //         this.actualAmount = res.data.studentApplyRefunds.actualAmount
                //         //
                //     } else {
                //         this.$message.error(res.msg)
                //     }
                // })
            } else if (memo.type == 'MUSICGROUP') {
                await musicGroupQuit({ id: memo.Id }).then(res => {
                    if (res.code == 200) {
                        this.musicForm = res.data
                        if(this.$refs.quitForm){
                            this.$refs.quitForm.resetFields()
                        }
                        this.quitForm.reason = res.data.reason
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        onSubmitGroup (params, status) {
        if(status == 'DENIED') {
            this.$refs['musicForm'].clearValidate()
            this.$refs['musicForm'].validateField('reason', res => {
            if(!res) {
                this.onSubmitGroups(params, status)
            }
            })
        } else {
            this.$refs["musicForm"].validate(res => {
            if (res) {
                this.onSubmitGroups(params, status)
            }
            });
        }
        },
        onSubmitGroups(params, status) {
            this.$confirm("确定此操作吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                let query = this.quitForm
                query.id = params.id,
                query.status = status
                await quitMusicGroup(cleanDeep(query)).then(res => {
                    this.$message.success('处理成功')
                    this.$listeners.close()
                    this.$listeners.getList()
                })
            }).catch(() => { });
        },
    }
}
</script>

<style lang="less" scoped>
.dialog-footer{
    margin-top: 20px;
    display: block;
    text-align: right;
}
.alert {
   margin-bottom: 10px;
}
</style>
