<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" v-if="appointStatus === `pending`">
    <el-form
      :model="appointForm"
      ref="appointRef"
      :rules="appointRules"
      label-position="left"
    >
      <div class="joinuser-wrap" style="display: flex; flex-wrap: wrap">
        <div class="joinuser-item" v-if="fieldConfig.icCard">
          <el-form-item label="IC卡编号/手机号码" prop="icCard">
            <el-input
              v-model="appointForm.icCard"
              placeholder="请输入IC卡号或手机号码"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.nickname">
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="appointForm.nickname" placeholder="请输入姓名" />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.phone">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="appointForm.phone"
              maxlength="11"
              placeholder="请输入手机号"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.unit">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="appointForm.unit" placeholder="请输入单位" />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.address">
          <el-form-item label="地址" prop="address">
            <el-input
              v-model="appointForm.address"
              :rows="3"
              placeholder="请输入地址"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.age">
          <el-form-item label="年龄" prop="age">
            <el-input
              v-model="appointForm.age"
              :rows="3"
              placeholder="请输入年龄"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.department">
          <el-form-item label="部门" prop="department">
            <el-input
              v-model="appointForm.department"
              placeholder="请输入部门"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.email">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="appointForm.email" placeholder="请输入邮箱" />
          </el-form-item>
        </div>

        <div class="joinuser-item" v-if="fieldConfig.groupName">
          <el-form-item label="组名" prop="groupName">
            <el-input
              v-model="appointForm.groupName"
              placeholder="请输入组名"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.hospitalLevel">
          <el-form-item label="医院等级" prop="hospitalLevel">
            <el-input
              v-model="appointForm.hospitalLevel"
              placeholder="请输入医院等级"
            />
          </el-form-item>
        </div>

        <div class="joinuser-item" v-if="fieldConfig.idCard">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="appointForm.idCard" placeholder="请输入身份证" />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.mailingAddress">
          <el-form-item label="邮寄地址" prop="mailingAddress">
            <el-input
              v-model="appointForm.mailingAddress"
              placeholder="请输入邮寄地址"
            />
          </el-form-item>
        </div>

        <div class="joinuser-item" v-if="fieldConfig.major">
          <el-form-item label="专业" prop="major">
            <el-input v-model="appointForm.major" placeholder="请输入专业" />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.qualification">
          <el-form-item label="学历" prop="qualification">
            <el-input
              v-model="appointForm.qualification"
              placeholder="请输入学历"
            />
          </el-form-item>
        </div>

        <div class="joinuser-item" v-if="fieldConfig.region">
          <el-form-item label="省份" prop="region">
            <el-input
              v-model="appointForm.region"
              placeholder="请输入省份（如安徽）"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.technicalOffice">
          <el-form-item label="科室" prop="technicalOffice">
            <el-input
              v-model="appointForm.technicalOffice"
              placeholder="请输入科室"
            />
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.title">
          <el-form-item label="职称" prop="title">
            <!-- <el-input v-model="appointForm.title" placeholder="请输入职称" /> -->
            <el-select v-model="appointForm.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">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="appointForm.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="joinuser-item" v-if="fieldConfig.needScoreFlag">
          <el-form-item
            label="是否需要学分"
            label-width="180"
            prop="needScoreFlag"
          >
            <el-radio-group v-model="appointForm.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">
          <el-form-item label="隶属西部" prop="affiliateWestFlag">
            <!-- <el-checkbox
              v-model="appointForm.affiliateWestFlag"
              true-label="1"
              false-label="0"
            ></el-checkbox> -->
            <el-radio-group v-model="appointForm.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">
          <el-form-item label="属于基层单位" prop="basicLevelUnitFlag">
            <!-- <el-checkbox
              v-model="appointForm.basicLevelUnitFlag"
              true-label="1"
              false-label="0"
            ></el-checkbox> -->
            <el-radio-group v-model="appointForm.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">
          <el-form-item label="是否乡村医生" prop="countryDoctorFlag">
            <!-- <el-checkbox
              v-model="appointForm.countryDoctorFlag"
              true-label="1"
              false-label="0"
            ></el-checkbox> -->
            <el-radio-group v-model="appointForm.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="submitAppointment(appointRef)"
        >预约</el-button
      >
    </div>
  </div>

  <el-row v-if="appointStatus !== `pending`" type="flex" justify="center">
    <el-col :sm="12" :lg="6">
      <el-result
        :icon="appointStatus === 'success' ? `success` : `error`"
        :title="appointStatus === 'success' ? '预约成功' : `预约失败`"
        :sub-title="appointMessage"
      >
        <!-- <template #extra>
          <el-button type="primary">返回</el-button>
        </template> -->
      </el-result>
    </el-col>
  </el-row>
  <agreement
    :show-dialog="showUserAgreement"
    @close="showUserAgreement = false"
    @agree="isAgreeAgreement = true"
    @decline="isAgreeAgreement = false"
  />
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { getMeetingDetailById, newAppointment } from "@/api/meeting";
import { ElMessage } from "element-plus";
import agreement from "@/components/agreement.vue";
import { useRoute } from "vue-router";
import _ from "lodash";
import { useStore } from "vuex";
const route = useRoute();
const store = useStore();
const data = reactive({
  appointForm: {
    status: "0",
  },
  fieldConfig: {
    icCard: true,
  },
  meeting: {},
  appointRules: {
    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: "必填",
      },
    ],
  },
  appointStatus: "pending",
  appointMessage: "",
});
const {
  appointForm,
  fieldConfig,
  appointRules,
  appointStatus,
  meeting,
  appointMessage,
} = toRefs(data);

const meetingId = ref(0);

meetingId.value = route.params.meetingId;

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

// const agreeAgreement = () => {
//   isAgreeAgreement.value = true;
//   // showUserAgreement.value = true;
// };
// const declineAgreement = () => {
//   isAgreeAgreement.value = false;
//   // showUserAgreement.value = true;
// };
// 根据会议id获取详情
const loadMeetingDetail = async (meetingId) => {
  const { data } = await getMeetingDetailById(meetingId);
  meeting.value = data;
  if (data.fieldConfig) {
    fieldConfig.value = JSON.parse(data.fieldConfig);
  }
  setJoinUserDefaultValue();
};
// 设置默认值
const setJoinUserDefaultValue = () => {
  console.log(Object.keys(fieldConfig.value));
  [
    { 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]
    ) {
      appointForm.value[item.name] = item.default;
    } else {
      appointForm.value = _.omit(appointForm.value, item.name);
    }
  });
  appointForm.value.meetingId = meetingId.value;
};

// 提交表单
const appointRef = ref(null);
const submitAppointment = async (appointRef) => {
  await appointRef.validate();
  if (!isAgreeAgreement.value) {
    ElMessage.error("请勾选同意用户协议");
    return;
  }
  try {
    const resp = await newAppointment(appointForm.value);
    appointStatus.value = "success";
    appointMessage.value = resp.msg;
  } catch (error) {
    console.log(error);
    appointStatus.value = "failed";
    appointMessage.value = error.message;
  }
  return;
};

loadMeetingDetail(meetingId.value);
</script>

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

.meeting-cover {
  // width: 100%;
  // height: 50vh;
}

.meeting-title {
  text-align: center;
}

.meeting-time {
  text-align: center;
}

.form-item-container {
  display: flex;
}
</style>
