<template>
    <div>
        <el-form
            :model="visitForm"
            label-width="120px"
            label-position="right"
            ref="visitForm"
            :rules="visitRules"
        >
            <el-form-item label="学生姓名">
                <p>{{ visitForm.studentName }}</p>
            </el-form-item>
            <el-form-item label="回访类型" prop="visitType">
                <el-cascader
                    expand-trigger="hover"
                    clearable
                    placeholder="请选择回访类型"
                    :options="visitChiose"
                    @change="handleChange"
                    style="width: 220px !important"
                    v-model="visitForm.visitType"
                >
                </el-cascader>
            </el-form-item>
            <el-form-item label="回访日期" prop="visitTime">
                <el-date-picker
                    v-model.trim="visitForm.visitTime"
                    align="right"
                    style="width: 220px !important"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="学员情况" prop="overview">
                <el-input
                    type="textarea"
                    v-model="visitForm.overview"
                    style="width: 80% !important"
                    :rows="3"
                    maxlength="50"
                    show-word-limit
                ></el-input>
            </el-form-item>
            <el-form-item label="家长反馈" prop="feedback">
                <el-input
                    type="textarea"
                    v-model="visitForm.feedback"
                    style="width: 80% !important"
                    :rows="3"
                    maxlength="50"
                    show-word-limit
                ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="$listeners.close()">取 消</el-button>
            <el-button type="primary" @click="submitAddVisit">确 定</el-button>
        </span>
    </div>
</template>

<script>
import { visitChiose } from "@/utils/searchArray";
import { addVisit } from "@/views/returnVisitManager/api.js";
import cleanDeep from 'clean-deep';
export default {
    name: 'visit',
    props: ['visitDetail'],
    data() {
        return {
            visitForm: {
                musicGroupId: "",
                overview: "",
                purpose: "",
                studentId: "",
                type: "",
                visitTime: "",
                visitType: "",
                feedback: "",
                studentName: "",
            },
            visitChiose,
            visitRules: {
                overview: [{ required: true, message: "请输入学生近况" }],
                feedback: [{ required: true, message: "请输入家长反馈" }],
                visitTime: [{ required: true, message: "请输入回访时间" }],
                visitType: [{ required: true, message: "请选择回访类型" }],
            },
            pickerOptions: {}
        }
    },
    async mounted() {
        this.pickerOptions = this.beginDate(new Date());
        this.visitForm = { ...this.visitDetail }
    },
    methods: {
        handleChange(val) {
            this.visitForm.type = val[0];
            this.visitForm.purpose = val[1];
        },
        submitAddVisit() {
            this.$refs.visitForm.validate(async (res) => {
                if (res) {
                    this.visitForm.visitType = null;
                    this.visitForm.musicGroupId = this.id;
                    await addVisit(cleanDeep(this.visitForm)).then((res) => {
                        if (res.code === 200) {
                            this.$message.success("新增成功");
                            this.$listeners.close()
                        }
                    });
                }
            });
        },
        beginDate(date) {
            let self = this;
            return {
                firstDayOfWeek: 1,
                disabledDate(time) {
                    return time.getTime() >= date.getTime(); //开始时间不选时，结束时间最大值小于等于当天
                },
            };
        },
    }
}
</script>

<style lang="less" scoped>
.dialog-footer {
    display: block;
    text-align: right;
}
</style>