<template>
    <div>
        <el-form ref="studentForm"
                 :model="rateForm"
                 v-if="studentForm"
                 class="studentForm"
                 label-width="110px">
            <el-alert title="已拒绝" show-icon center v-if="studentForm.complaints.status == 'REJECT'" :closable="false" class="alert" type="error"></el-alert>
            <el-alert title="已同意" show-icon center v-if="studentForm.complaints.status == 'PASS'" :closable="false" class="alert" type="success"></el-alert>
            <el-form-item label="发起投诉时间">
                <el-input disabled v-model.trim="studentForm.courseSchedule.createTime"></el-input>
            </el-form-item>
            <el-form-item label="学员姓名">
                <el-input disabled v-model.trim="studentForm.complaints.user.username"></el-input>
            </el-form-item>
            <el-form-item label="课程名称">
                <el-input disabled v-model.trim="studentForm.courseSchedule.name"></el-input>
            </el-form-item>
            <el-form-item label="课程时间">
                <!-- {{ showMessage.courseSchedule.classDate | formatTimer }} {{ showMessage.courseSchedule.startClassTime | timer }} -->
                <el-input disabled v-model.trim="studentForm.courseSchedule.classDate"></el-input>
            </el-form-item>
            <el-form-item label="老师名称">
                <el-input disabled v-model.trim="studentForm.courseSchedule.teacher.username"></el-input>
            </el-form-item>
            <el-form-item label="投诉理由">
                <el-input type="textarea" disabled v-model.trim="studentForm.complaints.reason"></el-input>
            </el-form-item>
            <el-alert title="责任比" :closable="false" class="alert" type="info"></el-alert>
            <el-form-item label="老师比例"
                          prop="teacherRate"
                          :rules="[{ required: true, message: '请输入老师比例', trigger: 'blur'},
                            { required: true, validator: validateRate, trigger: 'blur' }]">
                <el-input type="number"
                      @mousewheel.native.prevent
                      :disabled="studentForm.complaints.status !== 'ING'"
                      v-model.number="rateForm.teacherRate"
                      placeholder="请输入内容">
                    <template slot="append">%</template>
                </el-input>
            </el-form-item>
            <el-form-item label="学生比例"
                          prop="studentRate"
                          :rules="[{ required: true, message: '请输入学生比例', trigger: 'blur'},
                            { required: true, validator: validateRate, trigger: 'blur' }]">
                <el-input type="number"
                      @mousewheel.native.prevent
                      :disabled="studentForm.complaints.status !== 'ING'"
                      v-model.number="rateForm.studentRate"
                      placeholder="请输入内容">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-permission="'courseSchedule/courseScheduleCommplaintAudit'" v-if="studentForm && studentForm.complaints.status === 'ING'">
            <el-button type="primary" @click="onSubmit('studentForm', 'submit')">确 定</el-button>
            <el-button type="danger" @click="onSubmit('studentForm', 'reject')">拒 绝</el-button>
        </div>
    </div>
</template>

<script>
import { queryCourseScheduleComplaintsDetail, courseScheduleCommplaintAudit } from '@/api/journal'
const validateRate = (rule, value, callback) => {
    if (value == '' && typeof value == 'string' || value == null) {
        callback(new Error('请输入比例'))
    } else if (value < 0 || value > 100) {
        callback(new Error('比例必须在0~100之间'))
    } else {
        callback()
    }
}
export default {
    props: ['dialogDetail'],
    data() {
        return {
            validateRate: validateRate,
            studentForm: null,
            rateForm: {
                studentRate: null,
                teacherRate: null
            }
        }
    },
    mounted() {
        this.__init()
    },
    methods: {
        async __init() {
            let { memo } = this.dialogDetail
            memo = memo ? JSON.parse(memo) : null
            if(!memo) { // 判断是否有参数
                this.$message.error('参数有误')
                return
            }
            await queryCourseScheduleComplaintsDetail({ courseScheduleComplaintsId: memo.courseScheduleComplaintsId }).then(res => {
                let result = res.data
                if (res.code == 200) {
                    this.studentForm = result
                    const { complaints } = result
                    if (complaints.status != 'ING') {
                        this.rateForm.teacherRate = complaints.teacherLiabilityRatio
                        this.rateForm.studentRate = complaints.studentLiabilityRatio
                    }
                }
            })
        },
        async onSubmit(formName, type) {
            const params = {
                id: this.studentForm.complaints.id
            }
            if(type == 'reject') {
                this.$confirm('您确定拒绝吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    params.status = 'REJECT'
                    params.studentLiabilityRatio = 0
                    params.teacherLiabilityRatio = 0
                    await this.onComm(params)
                }).catch(() => {
                    //
                });
            } else {
                this.$refs[formName].validate(async (valid) => {
                    if(valid) {
                        params.status = 'PASS'
                        params.studentLiabilityRatio = this.rateForm.studentRate
                        params.teacherLiabilityRatio = this.rateForm.teacherRate
                        await this.onComm(params)
                    }
                })
            }
        },
        async onComm(params) {
            await courseScheduleCommplaintAudit(params).then(res => {
                if (res.code == 200) {
                    this.$message.success('处理成功')
                    this.$listeners.close()
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
    watch: {
        'rateForm.teacherRate' (newValue, old) {
            if (newValue) {
                this.rateForm.studentRate = parseInt(100 - newValue)
            }
        },
        'rateForm.studentRate' (newValue, old) {
            if (newValue) {
                this.rateForm.teacherRate = parseInt(100 - newValue)
            }
        }
    },
}
</script>

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