<template>
  <div class="main bg-white-grey pl-25px pt-30px pr-35px rounded-10px relative">
    <div class="flex items-center justify-between">
      <h3 class="nav-title">基础信息</h3>
      <div class="btnDiv">
        <el-button
          size="large"
          @click="linkTo('jsd_personal_wdkc')"
          class="w-100px"
          >返回
        </el-button>
      </div>
    </div>
    <div class="form-box">
      <el-form
        :model="ruleForm"
        label-position="top"
        ref="ruleFormRef"
        :rules="rules"
      >
        <div class="must">
          <div class="label">头像</div>
          <div class="uploadDiv">
            <el-upload
              class="mainUpload"
              action=""
              accept=".jpg,.jpeg,.webp,.png"
              :auto-upload="false"
              list-type="picture-card"
              :on-change="handleMainChange"
              :file-list="fileList"
            >
              <el-icon size="35px" color="#f9f9f9" 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">
                <!-- 支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320 -->
              </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 label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </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">
          <remote-select
            size="small"
            v-model="ruleForm.sm_id"
            v-model:model-name="ruleForm.sm_name"
            url="/school/main/index"
            :fields="['id', 'sm_name']"
            placeholder="请选择学校"
          ></remote-select>
        </el-form-item>
        <div class="total mb-5">
          <el-form-item v-for="(p, i) in officeData" :key="i" label-width="0">
            <div class="flex justify-between">
              <div>
                <div class="flex">
                  <el-form-item :label="`任教年级${i + 1}`" prop="grade_id">
                    <remote-select
                      size="small"
                      v-model:model-name="p.grade_name"
                      v-model="p.grade_id"
                      to="jcxxgl_zyflgl_nj"
                      :fields="['tjzn_id', 'tjzn_njmc']"
                    ></remote-select>
                  </el-form-item>
                  <el-form-item
                    :label="`任教班级${i + 1}`"
                    prop="class_id"
                    class="ml-20px"
                  >
                    <remote-select
                      size="small"
                      v-model="p.class_id"
                      to="jcxxgl_zyflgl_bj"
                      v-model:model-name="p.class_name"
                      :fields="['tjzb_id', 'tjzb_bjmc']"
                    ></remote-select
                  ></el-form-item>
                </div>
                <div class="flex mt-15px">
                  <el-form-item :label="`任教学科${i + 1}`" prop="xueke_id">
                    <remote-select
                      size="small"
                      v-model:model-name="p.xueke_name"
                      v-model="p.xueke_id"
                      to="jcxxgl_zyflgl_xk"
                      :fields="['tjzx_id', 'tjzx_xkmc']"
                    ></remote-select>
                  </el-form-item>
                  <div class="btn mt-30px ml-20px" @click="deleteOffice(i)">
                    删除
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <div class="btn" @click="addOffice">添加</div>
        </div>
      </el-form>
      <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>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { Picture } from "@element-plus/icons-vue";
import { yhxx_js_edit, upload_file, yhxx_js_detail } from "./api";
import { user } from "@/store/index";
const router = useRouter();
const linkTo = (name) => {
  router.push({ name });
};
let loading = $ref(false);
let fileList = $ref([]);
let mainFileData = $ref(["png", "jpg", "jpeg", "webp"]);
let mainTip = $ref("");
const ruleFormRef = ref(null);

let 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: "blur" }],
});

let ruleForm = $ref({
  user_avatar: "",
  user_realname: "",
  gender: "",
  user_phone: "",
  sm_id: "",
  ue_jbxx_tea_rzxx: "",
  user_role_id: "75",
});
let officeData = $ref([
  {
    grade_id: "",
    grade_name: "",
    class_id: "",
    class_name: "",
    xueke_id: "",
    xueke_name: "",
  },
]);
// 添加
function addOffice() {
  officeData.push({
    grade_id: "",
    grade_name: "",
    class_id: "",
    class_name: "",
    xueke_id: "",
    xueke_name: "",
  });
}
// 删除
function deleteOffice(index) {
  officeData.splice(index, 1);
}

//头像
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,webp,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;
      console.log(fileList, 2222222222222);
    } else {
      return ElMessage({
        type: "warning",
        message: "上传失败",
      });
    }
  });
}

let detailData = ref({});

function handleDetail() {
  const data = {
    user_id: user.value.user_id,
  };
  yhxx_js_detail(data).then((res) => {
    if (res.code === "1") {
      detailData = res.data;
      fileList = [
        {
          url: getFullUrl(detailData.user_avatar),
        },
      ];
      ruleForm = {
        user_role_id: "75",
        user_avatar: detailData.user_avatar,
        user_realname: detailData.user_realname,
        user_phone: detailData.user_phone,
        gender: detailData.gender,
        gender1:
          detailData.gender == 1
            ? "男"
            : detailData.gender == 2
            ? "女"
            : "保密",
        sm_id: detailData.sm_id,
        ue_jbxx_tea_rzxx: detailData.ext.ue_jbxx_tea_rzxx,
      };
      let m = res.data.ext.ue_jbxx_tea_rzxx;
      if (m != "" && m != null) {
        officeData = JSON.parse(m);
      }
    }
  });
}
handleDetail();
const handleSubmit = async (formEl) => {
  if (!formEl) return;

  formEl.validate(async (valid, fields) => {
    if (valid) {
      let flag = false;
      let a = [];
      officeData.forEach((item) => {
        let b = {};
        if (!item.grade_id || !item.class_id || !item.xueke_id) {
          flag = true;
        } else {
          b = {
            grade_id: item.grade_id,
            grade_name: item.grade_name,
            class_id: item.class_id,
            class_name: item.class_name,
            xueke_id: item.xueke_id,
            xueke_name: item.xueke_name,
          };
        }
        a.push(b);
      });
      if (ruleForm.user_avatar == "") {
        mainTip = "请上传头像";
        return;
      }
      if (flag) {
        return ElMessage({
          type: "warning",
          message: "请填写完整的任教信息",
        });
      }

      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: "75",
          user_avatar: ruleForm.user_avatar,
          user_realname: ruleForm.user_realname,
          gender: ruleForm.gender,
          sm_id: ruleForm.sm_id,
          user_phone: ruleForm.user_phone,
          ue_jbxx_tea_rzxx: JSON.stringify(a),
        },
      };
      console.log(data, 3333333333);

      yhxx_js_edit(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "设置成功",
            type: "success",
          });
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped>
$color: #1259a1;
.main {
  box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}
.bg-white-grey {
  background: #fcfeff;
}
.nav-title {
  font-size: 18px;
  color: $color;
}
::v-deep
  .form-box
  .el-form
  .el-form-item
  .el-form-item__content
  .el-input
  .el-input__wrapper {
  width: 250px;
}
.btn {
  width: 62px;
  height: 32px;
  border: 1px solid #1259a1;
  border-radius: 6px;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #1259a1;
  line-height: 32px;
}

.btnDiv {
  .el-button {
    background: $color;
    border-color: $color;
    color: #fff;
  }
}
/* 选中后的字体颜色 */

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $color !important;
}

/* 选中后圆圈的背景颜色 */

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: $color !important;
  border-color: $color !important;
}
.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>

<style lang="scss">
.form-box {
  width: 520px;
  margin: 25px auto;
  .el-form {
    .el-form-item {
      &.is-required {
        .el-form-item__label {
          &::before {
            display: none;
          }

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

      .el-form-item__label {
        color: #949494;
        font-size: 14px;
        position: relative;
      }

      .el-form-item__content {
        .el-select {
          width: 100%;
        }
        .el-input {
          width: 100%;

          .el-input__wrapper {
            width: 100%;
            box-shadow: none;
            background: #f9f9f9;
            border-radius: 6px;
          }
        }

        .el-textarea {
          .el-textarea__inner {
            box-shadow: none;
            background: #f9f9f9;
            border-radius: 6px;
            // color: #d0d0d0;
          }
        }

        .el-date-editor {
          box-shadow: none;
          background: #f9f9f9;
          border-radius: 6px;
        }

        .el-checkbox.read {
          .el-checkbox__inner {
            border-radius: 50%;
          }
        }

        .el-input__inner {
          // color: #d0d0d0;
        }
      }
    }
  }
}
</style>