<template>
  <p class="sub_back" @click="handleBack">&#60;返回</p>
  <p class="sub_title">基本信息导入</p>
  <el-card class="account-container">
    <div class="info_box">
      <div class="info_title">
        <span>基本信息</span>
        <el-button class="book_btn" type="primary" @click="editBoxShow=true;form=deepClone(studentInfo);">修改</el-button>
      </div>
      <p class="info"><span>姓名：</span>{{studentInfo?.studentName||'-'}}</p>
      <p class="info"><span>性别：</span>{{studentInfo?.sex||'-'}}</p>
      <p class="info"><span>初中毕业学校：</span>{{studentInfo?.middleSchool||'-'}}</p>
      <p class="info"><span>初中毕业班级：</span>{{studentInfo?.middleClass||'-'}}</p>
      <p class="info"><span>出生年月：</span>{{studentInfo?.birthDate||'-'}}</p>
      <p class="info"><span>学生身份证号：</span>{{studentInfo?.userId||'-'}}</p>
      <p class="info"><span>学生的兴趣爱好：</span>{{studentInfo?.hobby||'-'}}</p>
      <p class="info"><span>学生的身体健康状况：</span>{{studentInfo?.health||'-'}}</p>
      <p class="info"><span>学生的心理健康水平：</span>{{studentInfo?.healthLevel||'-'}}</p>
      <p class="info"><span>详细住址：</span>{{studentInfo?.address||'-'}}</p>
      <p class="info"><span>是否独生子女：</span>{{studentInfo?.isSingle||'-'}}</p>
      <p class="info"><span>你对兄/弟/姐/妹的喜爱程度：</span>{{studentInfo?.brotherRela||'-'}}</p>
      <p class="info"><span>父母关系：</span>{{studentInfo?.parentRela||'-'}}</p>
      <p class="info"><span>家庭氛围：</span>{{studentInfo?.familyRela||'-'}}</p>

    </div>
    <div class="info_box">
      <div class="info_title">
        <span>过往病史</span>
      </div>
      <p class="info"><span>脑炎：</span>{{studentInfo?.naoYan||'-'}}</p>
      <p class="info"><span>癫痫：</span>{{studentInfo?.dianXian||'-'}}</p>
      <p class="info"><span>心脏病：</span>{{studentInfo?.xinZangBin||'-'}}</p>
      <p class="info"><span>哮喘：</span>{{studentInfo?.xiaoChuan||'-'}}</p>
      <p class="info"><span>过敏症：</span>{{studentInfo?.guoMinZheng||'-'}}</p>
      <p class="info"><span>肺结核：</span>{{studentInfo?.feiJieHe||'-'}}</p>
      <p class="info"><span>小儿麻痹：</span>{{studentInfo?.xiaoErMaBi||'-'}}</p>
      <p class="info"><span>其他：</span>{{studentInfo?.other||'-'}}</p>
    </div>
    <div class="info_box">
      <div class="info_title">
        <span>如果有心理问题你会咨询谁？</span>
      </div>
      <p class="info"><span>爸爸：</span>{{studentInfo?.father||'-'}}</p>
      <p class="info"><span>妈妈：</span>{{studentInfo?.mother||'-'}}</p>
      <p class="info"><span>兄弟姐妹：</span>{{studentInfo?.brother||'-'}}</p>
      <p class="info"><span>老师：</span>{{studentInfo?.teacher||'-'}}</p>
      <p class="info"><span>好朋友：</span>{{studentInfo?.friends||'-'}}</p>
      <p class="info"><span>心理老师：</span>{{studentInfo?.physicalTeacher||'-'}}</p>
      <p class="info"><span>心理咨询师：</span>{{studentInfo?.physicalAsker||'-'}}</p>
      <p class="info"><span>心理医生：</span>{{studentInfo?.physicalDoctor||'-'}}</p>
      <p class="info"><span>其他：</span>{{studentInfo?.physicalOther||'-'}}</p>
    </div>
    <div class="info_box">
      <div class="info_title">
        <span>家庭信息</span>
      </div>
      <div class="family_item">
        <p class="info"><span>监护人称谓：</span>{{studentInfo.guardianFirstCall}}</p>
        <p class="info"><span>姓名：</span>{{studentInfo.guardianFirstName}}</p>
        <p class="info"><span>工作单位：</span>{{studentInfo.guardianFirstWork}}</p>
        <p class="info"><span>联系方式（手机号）：</span>{{studentInfo.guardianFirstPhone}}</p>
        <p class="info"><span>个性特征：</span>{{studentInfo.guardianFirstHobby}}</p>
        <p class="info"><span>你对他（她）的喜爱程度：</span>{{studentInfo.yourHobbyFirst}}</p>
      </div>
      <div class="family_item">
        <p class="info"><span>监护人称谓：</span>{{studentInfo.guardianSecondCall}}</p>
        <p class="info"><span>姓名：</span>{{studentInfo.guardianSecondName}}</p>
        <p class="info"><span>工作单位：</span>{{studentInfo.guardianSecondWork}}</p>
        <p class="info"><span>联系方式（手机号）：</span>{{studentInfo.guardianSecondPhone}}</p>
        <p class="info"><span>个性特征：</span>{{studentInfo.guardianSecondHobby}}</p>
        <p class="info"><span>你对他（她）的喜爱程度：</span>{{studentInfo.yourHobbySecond}}</p>
      </div>
    </div>
    <div class="info_box">
      <div class="info_title">
        <span>重大生活事件</span>
      </div>
      <div class="big_event">
        <p class="info"><span>重大生活事件1：</span>{{studentInfo.bigEventFirst}}</p>
        <p class="info"><span>重大生活事件2：</span>{{studentInfo.bigEventSecond}}</p>
        <p class="info"><span>重大生活事件3：</span>{{studentInfo.bigEventThird}}</p>
      </div>
    </div>
    <el-dialog title="修改" v-model="editBoxShow" width="80%">
      <el-form :model="form" ref="formRef">
        <div class="info_title">
          <span>基本信息</span>
        </div>
        <el-form-item label="姓名：" prop="studentName">
          <el-input v-model="form.studentName"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-input v-model="form.sex"></el-input>
        </el-form-item>
        <el-form-item label="初中毕业学校：" prop="middleSchool">
          <el-input v-model="form.middleSchool"></el-input>
        </el-form-item>
        <el-form-item label="初中毕业班级：" prop="middleClass">
          <el-input v-model="form.middleClass"></el-input>
        </el-form-item>
        <el-form-item label="出生年月：" prop="birthDate">
          <el-input v-model="form.birthDate"></el-input>
        </el-form-item>
        <el-form-item label="学生身份证号：" prop="userId">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="学生的兴趣爱好：" prop="hobby">
          <el-input v-model="form.hobby"></el-input>
        </el-form-item>
        <el-form-item label="学生的身体健康状况：" prop="health">
          <el-input v-model="form.health"></el-input>
        </el-form-item>
        <el-form-item label="学生的心理健康水平：" prop="healthLevel">
          <el-input v-model="form.healthLevel"></el-input>
        </el-form-item>
        <el-form-item label="是否独生子女：" prop="isSingle">
          <el-input v-model="form.isSingle"></el-input>
        </el-form-item>
        <el-form-item label="你对兄/弟/姐/妹的喜爱程度：" prop="brotherRela">
          <el-input v-model="form.brotherRela"></el-input>
        </el-form-item>
        <el-form-item label="父母关系：" prop="parentRela">
          <el-input v-model="form.parentRela"></el-input>
        </el-form-item>
        <el-form-item label="家庭气氛：" prop="familyRela">
          <el-input v-model="form.familyRela"></el-input>
        </el-form-item>
        <div class="info_title">
          <span>过往病史</span>
        </div>
        <div class="radio_box">
          <el-form-item label="脑炎：">
            <el-radio v-model="studentInfo.naoYan" label="有">有</el-radio>
            <el-radio v-model="studentInfo.naoYan" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="癫痫：">
            <el-radio v-model="studentInfo.dianXian" label="有">有</el-radio>
            <el-radio v-model="studentInfo.dianXian" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="脑炎：">
            <el-radio v-model="studentInfo.naoYan" label="有">有</el-radio>
            <el-radio v-model="studentInfo.naoYan" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="心脏病：">
            <el-radio v-model="studentInfo.xinZangBin" label="有">有</el-radio>
            <el-radio v-model="studentInfo.xinZangBin" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="哮喘：">
            <el-radio v-model="studentInfo.xiaoChuan" label="有">有</el-radio>
            <el-radio v-model="studentInfo.xiaoChuan" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="过敏症：">
            <el-radio v-model="studentInfo.guoMinZheng" label="有">有</el-radio>
            <el-radio v-model="studentInfo.guoMinZheng" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="肺结核：">
            <el-radio v-model="studentInfo.feiJieHe" label="有">有</el-radio>
            <el-radio v-model="studentInfo.feiJieHe" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="小儿麻痹：">
            <el-radio v-model="studentInfo.xiaoErMaBi" label="有">有</el-radio>
            <el-radio v-model="studentInfo.xiaoErMaBi" label="无">无</el-radio>
          </el-form-item>
          <el-form-item label="其他：">
            <el-radio v-model="studentInfo.other" label="有">有</el-radio>
            <el-radio v-model="studentInfo.other" label="无">无</el-radio>
          </el-form-item>
        </div>
        <div class="info_title">
          <span>如果有心理问题你会咨询谁？</span>
        </div>
        <div class="radio_box">
          <el-form-item label="爸爸：">
            <el-radio v-model="studentInfo.father" label="有">会</el-radio>
            <el-radio v-model="studentInfo.father" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="妈妈：">
            <el-radio v-model="studentInfo.mother" label="有">会</el-radio>
            <el-radio v-model="studentInfo.mother" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="兄弟姐妹：">
            <el-radio v-model="studentInfo.brother" label="有">会</el-radio>
            <el-radio v-model="studentInfo.brother" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="老师：">
            <el-radio v-model="studentInfo.teacher" label="有">会</el-radio>
            <el-radio v-model="studentInfo.teacher" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="好朋友：">
            <el-radio v-model="studentInfo.friends" label="有">会</el-radio>
            <el-radio v-model="studentInfo.friends" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="心理老师：">
            <el-radio v-model="studentInfo.physicalTeacher" label="有">会</el-radio>
            <el-radio v-model="studentInfo.physicalTeacher" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="心理咨询师：">
            <el-radio v-model="studentInfo.physicalAsker" label="有">会</el-radio>
            <el-radio v-model="studentInfo.physicalAsker" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="心理医生：">
            <el-radio v-model="studentInfo.physicalDoctor" label="有">会</el-radio>
            <el-radio v-model="studentInfo.physicalDoctor" label="无">不会</el-radio>
          </el-form-item>
          <el-form-item label="其他：">
            <el-radio v-model="studentInfo.physicalOther" label="有">会</el-radio>
            <el-radio v-model="studentInfo.physicalOther" label="无">不会</el-radio>
          </el-form-item>
        </div>
        <div class="info_title">
          <span>家庭信息</span>
        </div>
        <div class="edit_family" style="margin-right:2%;">
          <el-form-item label="监护人1称谓：" prop="guardianFirstCall">
            <el-input v-model="form.guardianFirstCall"></el-input>
          </el-form-item>
          <el-form-item label="姓名：" prop="guardianFirstName">
            <el-input v-model="form.guardianFirstName"></el-input>
          </el-form-item>
          <el-form-item label="工作单位：" prop="guardianFirstWork">
            <el-input v-model="form.guardianFirstWork"></el-input>
          </el-form-item>
          <el-form-item label="联系方式（手机号）：" prop="guardianFirstPhone">
            <el-input v-model="form.guardianFirstPhone"></el-input>
          </el-form-item>
          <el-form-item label="个性特征：" prop="guardianFirstHobby">
            <el-input v-model="form.guardianFirstHobby"></el-input>
          </el-form-item>
          <el-form-item label="你对他（她）的喜爱程度：" prop="yourHobbyFirst">
            <el-input v-model="form.yourHobbyFirst"></el-input>
          </el-form-item>
        </div>
        <div class="edit_family">
          <el-form-item label="监护人2称谓：" prop="guardianSecondCall">
            <el-input v-model="form.guardianSecondCall"></el-input>
          </el-form-item>
          <el-form-item label="姓名：" prop="guardianSecondName">
            <el-input v-model="form.guardianSecondName"></el-input>
          </el-form-item>
          <el-form-item label="工作单位：" prop="guardianSecondWork">
            <el-input v-model="form.guardianSecondWork"></el-input>
          </el-form-item>
          <el-form-item label="联系方式（手机号）：" prop="guardianSecondPhone">
            <el-input v-model="form.guardianSecondPhone"></el-input>
          </el-form-item>
          <el-form-item label="个性特征：" prop="guardianSecondHobby">
            <el-input v-model="form.guardianSecondHobby"></el-input>
          </el-form-item>
          <el-form-item label="你对他（她）的喜爱程度：" prop="yourHobbySecond">
            <el-input v-model="form.yourHobbySecond"></el-input>
          </el-form-item>
        </div>
        <div class="info_title">
          <span>重大生活事件</span>
        </div>
        <div class="edit_big_event">
          <el-form-item label="重大生活事件1：" prop="bigEventFirst">
            <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.bigEventFirst" style="width:100%;"></el-input>
          </el-form-item>
          <el-form-item label="重大生活事件2：" prop="bigEventSecond">
            <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.bigEventSecond" style="width:100%;"></el-input>
          </el-form-item>
          <el-form-item label="重大生活事件3：" prop="bigEventThird">
            <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.bigEventThird" style="width:100%;"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editBoxShow=false;form={};">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { onMounted, reactive, toRefs, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { deepClone } from '@/utils'
import axios from '@/utils/axios'
export default {
  name: 'InfoDetail',
  components: {
  },
  setup () {
    const formRef = ref(null)
    const route = useRoute()
    const router = useRouter()
    const { userId, id } = route.query
    const state = reactive({
      studentInfo: '',//基本信息
      familyInfo: '',//家庭情况
      majorEventsInfo: '',//重大生活事件
      studyExperiencesInfo: '',//学习经历
      editBoxShow: false,
      form: {}
    })
    onMounted(() => {
      getUserExtraInfoDetail()
    })
    const getUserExtraInfoDetail = () => {
      if (!userId) return;
      // 获取信息详情
      axios.post(`/User/UserAllInfo/Detail?id=0&userId=${userId || ''}`).then(res => {
        console.log('信息详情:', res)
        state.studentInfo = res;
        state.familyInfo = res.familyInfo;
        state.majorEventsInfo = res.majorEventsInfo;
        state.studyExperiencesInfo = res.studyExperiencesInfo;
      }).catch(err => {
        console.log('err', err)
      })
    }
    const submitForm = () => {
      // 修改
      axios.put('/User/UserAllInfo', state.form).then(() => {
        ElMessage.success('修改成功')
        state.editBoxShow = false
        state.form = {}
        getUserExtraInfoDetail()
      })


    }
    // 添加或者删除事件
    // const delEvent = (index) => {
    //   state.form = state.form.splice(index, 1)
    // }
    // const addEvent = () => {
    //   state.form.push({
    //     eventCourse: "",
    //     eventTime: "",
    //     id: "",
    //     userId: state.form[0].userId,
    //   })
    // }
    const handleBack = () => {
      router.back()
    }
    return {
      ...toRefs(state),
      handleBack,
      submitForm,
      deepClone
      // delEvent,
      // addEvent
    }
  }
}
</script>
<style lang="scss" scoped>
.account-container {
  position: relative;
  min-height: 500px;
}

.info_box {
  border-bottom: 1px solid rgb(202, 202, 202);
  margin-bottom: 40px;
  padding-bottom: 40px;
  &:last-of-type {
    border: none;
  }
}
.info_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.info {
  font-size: 15px;
  padding: 15px 0;
  margin: 0;
  width: 50%;
  display: inline-block;
  span {
    display: inline-block;
    min-width: 150px;
    color: #999;
  }
}

.study_item,
.family_item {
  width: 48%;
  display: inline-block;
  background: #eee;
  border-radius: 10px;
  margin: 20px 0;
  margin-right: 4%;
  box-sizing: border-box;
  padding: 0 20px;
  &:nth-of-type(2n-1) {
    margin-right: 0;
  }
  .info {
    width: 100%;
    span {
      min-width: 200px;
    }
  }
}
.big_event {
  background: #eee;
  border-radius: 10px;
  padding: 0 20px;
  box-sizing: border-box;
  .info {
    width: 100%;
    line-height: 30px;
    span {
      display: block;
    }
  }
}
.item_btn {
  float: right;
  margin-bottom: 20px;
}
.el-form-item {
  width: auto;
  display: inline-block;
  margin-right: 20px;
}
.radio_box {
  .el-form-item {
    width: 250px;
  }
}
.edit_family {
  width: 49%;
  background: #eee;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.edit_big_event {
  background: #eee;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  .el-form-item{
    width: 100%;
  }
}
</style>
<style lang="scss">
.el-form-item__content {
  display: inline-block;
}
  .edit_big_event .el-form-item__content{
    width: 100%;
  }
</style>