<template>
    <div class="main bg-white-grey rounded-10px mt-4 py-8 px-8" style="font-size: 18px">
        <div class="header flex justify-between items-center">
            <span class="color_blue">基础信息</span>
            <div class="btnDiv">
                <el-button @click="handleBack" size="large" class="w-100px">返回
                </el-button>
            </div>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm w-" status-icon
            label-position="top" require-asterisk-position="right">
            <div class="must">
                <div class="label">头像</div>
                <div class="uploadDiv">
                    <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false"
                        list-type="picture-card" :on-change="handleMainChange" :file-list="fileList">
                        <el-icon size="38" color="#9d9ab9" v-if="fileList.length == 0">
                            <Picture />
                        </el-icon>
                        <img v-else :src="fileList[0].url" alt="" style="width: 100%; height: 100%" />
                    </el-upload>
                    <div style="font-size: 12px; margin-left: 20px">
                        <div style="color: #949494">
                              </div>
                         <div style="color: #f35421" v-if="fileList.length == 0">
                             {{ mainTip }}
                            </div>
                         </div>
                </div>
            </div>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                    <el-radio v-for="i in 2" :key="i" :label="i == 1 ? '男' : '女'" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="姓名" prop="user_realname">
                <el-input v-model="ruleForm.user_realname" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="手机号码" prop="user_phone">
                <el-input v-model="ruleForm.user_phone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="学校" prop="sm_id">
                <el-select v-model="ruleForm.sm_id">
                    <el-option v-for="s in schoolList" :key="s.sm_id" :label="s.sm_name" :value="s.sm_id"></el-option>
                </el-select>
            </el-form-item>
            <div class="flex flex_two">
                <el-form-item label="年级" prop="user_grade_num">
                    <el-select v-model="ruleForm.user_grade_num">
                        <el-option v-for="s in gradeList" :key="s.tjzn_id" :label="s.tjzn_njmc"
                            :value="s.tjzn_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="user_class_num">
                    <el-select v-model="ruleForm.user_class_num">
                        <el-option v-for="s in subjectList" :key="s.tjzb_id" :label="s.tjzb_bjmc"
                            :value="s.tjzb_id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="mt-70px btnDiv text-center">
                <el-button size="large" @click="handleSubmit(ruleFormRef)" v-loading.fullscreen.lock="loading"
                    class="w-160px mb-62px">确定</el-button>
            </div>
        </el-form>
    </div>
</template>
<script setup>
import { user } from "@/store";
import { CameraFilled } from "@element-plus/icons-vue";
import { omit } from "lodash";
import { useRouter } from "vue-router";
import { class_list, grade_list, sm_list, upload_file, user_info, yhxx_xs_edit } from "./api";
const router = useRouter();
const ruleFormRef = ref(null);
let schoolList = $ref([]);
sm_list({}).then(res => {
    if (res.code == '1') {
        const { page_data } = res.data;
        schoolList = page_data;
    }
})
let gradeList = $ref([]);
grade_list({ limit: 9999, page: 1 }).then(res => {
    if (res.code == '1') {
        const { page_data } = res.data;
        gradeList = page_data;
    }
})
let subjectList = $ref([]);
class_list({ limit: 9999, page: 1 }).then(res => {
    if (res.code == '1') {
        const { page_data } = res.data;
        subjectList = page_data;
    }
})
let ruleForm = $ref({
    gender: '',
    user_realname: '',
    user_phone: '',
    sm_id: '',
    user_grade_num: '',
    user_class_num: '',
    user_avatar: '',
})
const rules = $ref({
    user_avatar: [
        {
            required: true,
            message: "请上传图片",
            trigger: "submit",
        },
    ],
    gender: [
        {
            required: true,
            message: "请选择性别",
            trigger: "submit",
        },
    ],
    user_realname: [{
        required: true,
        message: "请输入姓名",
        trigger: "submit",
    }],
    user_phone: [{
        required: true,
        message: "请输入手机号码",
        trigger: "submit",
    }],
    sm_id: [{
        required: true,
        message: "请选择学校",
        trigger: "submit",
    }],
    user_grade_num: [{
        required: true,
        message: "请选择年级",
        trigger: "submit",
    }],
    user_class_num: [{
        required: true,
        message: "请选择班级",
        trigger: "submit",
    }],
})

const handleBack = () => {
    router.back();
}
//头像
let fileList = $ref([]);
let mainFileData = $ref(["png", "jpg", "jpeg"]);
let mainTip = $ref("");
function handleMainChange(file) {
    let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
    const isJPG = mainFileData.includes(fileType);
    console.log(file, fileType, isJPG, 555555555555);
    if (!isJPG) {
        mainTip = "上传文件只能是jpg,png,jpeg格式";
    }
    if (isJPG) {
        fileList = [file];
    } else {
        fileList = [];
    }

    if (fileList.length == 0) {
        return false;
    }
    upload_file(file.raw).then((res) => {
        if (res.code == 1) {
            ruleForm.user_avatar = res.data.url;
        } else {
            return ElMessage({
                type: "warning",
                message: "上传失败",
            });
        }
    });
}
let detailData = ref({});

function handleDetail() {
    const data = {
        user_id: user.value.user_id,
    };
    user_info(data).then((res) => {
        if (res.code === "1") {
            detailData = res.data;
            fileList = [
                {
                    url: getFullUrl(detailData.user_avatar),
                },
            ];
            Object.keys(detailData).forEach(key => {
                ruleForm[key] = detailData[key]
            })
            ruleForm.gender = detailData.gender=='1'?'男':'女'
        }
    });
}
handleDetail();

const handleSubmit = async (formEl) => {
    if (!formEl) return;

    formEl.validate(async (valid, fields) => {
        if (valid) {
            if (ruleForm.user_avatar == "") {
                mainTip = "请上传头像";
                return;
            }
            var reg_ph = /^1[0-9]{10}$/;
            if (ruleForm.user_phone != "" && !reg_ph.test(ruleForm.user_phone)) {
                return ElMessage({
                    type: "warning",
                    message: "请输入正确的手机号！",
                });
            }
            const data = {
                user_id: user.value.user_id,
                user_main: {
                    user_role_id: "76",
                    ...omit(ruleForm, 'gender'),
                    gender: ruleForm.gender == '男' ? '1' : '2'
                },
            };
            yhxx_xs_edit(data).then((res) => {
                if (res.code == 1) {
                    ElMessage({
                        message: "设置成功",
                        type: "success",
                    });
                    router.go(-1);
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error",
                    });
                }
            });
        }
    });
};
</script>
<style lang="scss" scoped>
$color: #1259a1;

.bg-white-grey {
    background: #fcfeff;
}

.color_blue {
    color: $color;
}

.btnDiv {
    .el-button {
        background: $color;
        border-color: $color;
        color: #fff;
    }
}

::v-deep .el-input {
    width: 544px;
    background: #f9f9f9;
}

::v-deep .flex_two {
    .el-input {
        width: 268px;
        margin-right: 10px;
    }
}

.el-form {
    width: 550px;
    margin: 0 auto;
}

.must {
    display: flex;
    align-items: center;
    margin-bottom: 22px;

    .label {
        color: #949494;
        font-size: 14px;
        margin-right: 15px;

        &::after {
            content: "*";
            color: #f35421;
            margin-left: 4px;
        }
    }

    .uploadDiv::v-deep {
        flex: 1;

        .el-upload--picture-card {
            width: 96px;
            height: 96px;
            border-radius: 50%;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .el-upload-list--picture-card .el-upload-list__item {
            display: none;
        }
    }
}
</style>