<template>
  <img
    class="meeting-cover"
    :src="meeting.meetingPic ? meeting.meetingPic : store.getters.defaultCover"
    alt=""
  />
  <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
  <p class="meeting-time">
    <span class="title">会议时间</span>
    <span class="time">{{ meeting.startTime }}</span>
  </p>
  <div class="form-container">
    <el-form
      :model="newJoinUser"
      ref="newJoinUserRef"
      :rules="joinUserRules"
      label-position="left"
    >
      <div class="joinuser-wrap" style="display: flex; flex-wrap: wrap">
        <div
          class="joinuser-item"
          v-if="fieldConfig.icCard && meeting.joinType !== `3`"
        >
          <el-form-item label="IC卡编号/手机号码" prop="icCard">
            <el-input
              v-model="newJoinUser.icCard"
              placeholder="请输入IC卡号或手机号码"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="fieldConfig.nickname || meeting.joinType === `3`"
        >
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="newJoinUser.nickname" placeholder="请输入姓名" />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            meeting.joinType === `3` ||
            (fieldConfig.phone && meeting.joinType !== `1`)
          "
        >
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model.number="newJoinUser.phone"
              placeholder="请输入手机号"
              maxlength="11"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.unit &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="单位" prop="unit">
            <el-input v-model="newJoinUser.unit" placeholder="请输入单位" />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.address &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="地址" prop="address">
            <el-input
              v-model="newJoinUser.address"
              :rows="3"
              placeholder="请输入地址"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.age &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="年龄" prop="age">
            <el-input
              v-model="newJoinUser.age"
              :rows="3"
              placeholder="请输入年龄"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.department &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="部门" prop="department">
            <el-input
              v-model="newJoinUser.department"
              placeholder="请输入部门"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.email &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="newJoinUser.email" placeholder="请输入邮箱" />
          </el-form-item>
        </div>

        <div
          class="joinuser-item"
          v-if="
            fieldConfig.groupName &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="组名" prop="groupName">
            <el-input
              v-model="newJoinUser.groupName"
              placeholder="请输入组名"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.hospitalLevel &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="医院等级" prop="hospitalLevel">
            <el-input
              v-model="newJoinUser.hospitalLevel"
              placeholder="请输入医院等级"
            />
          </el-form-item>
        </div>

        <div
          class="joinuser-item"
          v-if="
            fieldConfig.idCard &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="newJoinUser.idCard" placeholder="请输入身份证" />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.mailingAddress &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="邮寄地址" prop="mailingAddress">
            <el-input
              v-model="newJoinUser.mailingAddress"
              placeholder="请输入邮寄地址"
            />
          </el-form-item>
        </div>

        <div
          class="joinuser-item"
          v-if="
            fieldConfig.major &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="专业" prop="major">
            <el-input v-model="newJoinUser.major" placeholder="请输入专业" />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.qualification &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="学历" prop="qualification">
            <el-input
              v-model="newJoinUser.qualification"
              placeholder="请输入学历"
            />
          </el-form-item>
        </div>

        <div
          class="joinuser-item"
          v-if="
            fieldConfig.region &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="省份" prop="region">
            <el-input
              v-model="newJoinUser.region"
              placeholder="请输入省份（如安徽）"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.technicalOffice &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="科室" prop="technicalOffice">
            <el-input
              v-model="newJoinUser.technicalOffice"
              placeholder="请输入科室"
            />
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.title &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="职称" prop="title">
            <!-- <el-input v-model="newJoinUser.title" placeholder="请输入职称" /> -->
            <el-select v-model="newJoinUser.title" placeholder="请选择职称">
              <el-option
                v-for="item in ['乡村医生', '初级', '中级', '副高及以上']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.gender &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="newJoinUser.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
              <!-- <el-radio label="3">其他</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.needScoreFlag &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item
            label="是否需要学分"
            label-width="180"
            prop="needScoreFlag"
          >
            <el-radio-group v-model="newJoinUser.needScoreFlag">
              <el-radio :label="0">不需要</el-radio>
              <el-radio :label="1">需要</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <div
          class="joinuser-item"
          v-if="
            fieldConfig.affiliateWestFlag &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="隶属西部" prop="affiliateWestFlag">
            <!-- <el-checkbox
              v-model="newJoinUser.affiliateWestFlag"
              true-label="1"
              false-label="0"
            ></el-checkbox> -->
            <el-radio-group v-model="newJoinUser.affiliateWestFlag">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.basicLevelUnitFlag &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="属于基层单位" prop="basicLevelUnitFlag">
            <!-- <el-checkbox
              v-model="newJoinUser.basicLevelUnitFlag"
              true-label="1"
              false-label="0"
            ></el-checkbox> -->
            <el-radio-group v-model="newJoinUser.basicLevelUnitFlag">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div
          class="joinuser-item"
          v-if="
            fieldConfig.countryDoctorFlag &&
            meeting.joinType !== `1` &&
            meeting.joinType !== `3`
          "
        >
          <el-form-item label="是否乡村医生" prop="countryDoctorFlag">
            <!-- <el-checkbox
              v-model="newJoinUser.countryDoctorFlag"
              true-label="1"
              false-label="0"
            ></el-checkbox> -->
            <el-radio-group v-model="newJoinUser.countryDoctorFlag">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <el-row type="flex" justify="center"> </el-row>
    </el-form>

    <div
      class="agreement"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333;
      "
    >
      <el-checkbox v-model="isAgreeAgreement"></el-checkbox>
      <span>&nbsp;</span>
      <span>同意</span>
      <el-button type="text" @click="showUserAgreement = true">
        楚桓会议系统用户信息协议
      </el-button>
    </div>
    <div style="display: flex; justify-content: center">
      <el-button type="primary" @click="submitVerify(newJoinUserRef)"
        >加入会议</el-button
      >
    </div>
  </div>
  <agreement
    :show-dialog="showUserAgreement"
    @close="showUserAgreement = false"
    @agree="isAgreeAgreement = true"
    @decline="isAgreeAgreement = false"
  />
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { registerJoinUser, visitorJoinUser } from "@/api/meeting";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import agreement from "@/components/agreement.vue";
import _ from "lodash";
const store = useStore();
const router = useRouter();
const route = useRoute();
const data = reactive({
  newJoinUser: {},
  fieldConfig: {
    icCard: true,
  },
  meeting: {},
  joinUserRules: {
    address: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    affiliateWestFlag: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    age: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    basicLevelUnitFlag: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    countryDoctorFlag: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    department: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    email: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    gender: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    groupName: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    hospitalLevel: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    icCard: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    idCard: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    mailingAddress: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    major: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    needScoreFlag: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    nickname: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    phone: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        trigger: "blur",
        message: "手机号格式不正确",
      },
    ],
    qualification: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    region: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    technicalOffice: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    title: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
    unit: [
      {
        required: true,
        trigger: "blur",
        message: "必填",
      },
    ],
  },
});
const { newJoinUser, fieldConfig, joinUserRules, meeting } = toRefs(data);
const meetingId = ref(route.params.meetingId);

meeting.value = _.cloneDeep(store.state.meeting);

const showUserAgreement = ref(false); // 是否显示用户协议弹窗
const isAgreeAgreement = ref(false); // 是否同意协议

if (data.fieldConfig) {
  fieldConfig.value = JSON.parse(meeting.value.fieldConfig);
}

// 设置gender basicLevelUnitFlag countryDoctorFlag affiliateWestFlag 默认值
const setJoinUserDefaultValue = () => {
  [
    { name: "gender", default: "1" },
    { name: "basicLevelUnitFlag", default: "0" },
    { name: "countryDoctorFlag", default: "0" },
    { name: "affiliateWestFlag", default: "0" },
  ].forEach((item) => {
    if (
      Object.keys(fieldConfig.value).includes(item.name) &&
      fieldConfig.value[item.name]
    ) {
      newJoinUser.value[item.name] = item.default;
    } else {
      newJoinUser.value = _.omit(newJoinUser.value, item.name);
    }
  });
  newJoinUser.value.meetingId = meetingId.value;
};
setJoinUserDefaultValue();

// 提交白名单验证 / 登记 / 游客
const newJoinUserRef = ref(null);
const submitVerify = async (newJoinUserRef) => {
  await newJoinUserRef.validate();
  if (!isAgreeAgreement.value) {
    ElMessage.error("请勾选同意用户协议");
    return;
  }
  console.log(meeting.value.joinType);
  if (meeting.value.joinType === "1") {
    store.commit("setJoinUser", newJoinUser.value);
    router.push(`/meeting/${meetingId.value}`);
  } else if (meeting.value.joinType === "2") {
    // const { data } = await registerJoinUser(newJoinUser.value);
    // store.commit("setPassword", data);
    console.log(meetingId.value);
    store.commit("setJoinUser", newJoinUser.value);
    router.push(`/meeting/${meetingId.value}`);
  } else if (meeting.value.joinType === "3") {
    // const { data } = await visitorJoinUser(newJoinUser.value);
    // store.commit("setPassword", data);
    store.commit("setJoinUser", newJoinUser.value);
    router.push(`/meeting/${meetingId.value}`);
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/appoint-mobile.scss";
@import "@/style/appoint-desktop.scss";

// .meeting-cover {
//   // width: 100%;
//   height: 70vh;
//   display: block;
//   margin: 0 auto;
// }
.meeting-title {
  text-align: center;
}
.meeting-time {
  text-align: center;
}
.form-item-container {
  display: flex;
}
</style>
