<template>
  <p class="sub_back" @click="handleBack">&#60;返回</p>
  <p class="sub_title">个案辅导</p>
  <el-card class="account-container">
    <img class="edge" src="@/assets/edge1.png" alt="">
    <p class="info"><span>姓名：</span>{{info.name}}</p>
    <p class="info"><span>性别：</span>{{info.male}}</p>
    <p class="info"><span>年级：</span>{{info.class}}</p>
    <p class="info"><span>咨询问题：</span>{{info.bookTypeName}}</p>
    <p class="info"><span>时间：</span>{{info.timeDescription}}</p>
    <!-- <p class="history" @click="handleInterview">访谈记录</p>
    <p class="item_title">咨询结果</p>
    <div class="result">
      <div class="result_item" v-if="info.level==1">
        <p class="title">一类危机学生</p>
        <p class="des">需班主任辅导</p>
      </div>
      <div class="result_item" v-if="info.level==2">
        <p class="title">二类危机学生</p>
        <p class="des">需要在校心理辅导</p>
      </div>
      <div class="result_item" v-if="info.level==3">
        <p class="title">三类危机学生</p>
        <p class="des">需尽快进行心理治疗</p>
      </div>
      <div class="result_item" v-if="info.isNeedsHospital">
        <p class="title">需要转介</p>
      </div>
    </div> -->
    <p class="item_title">留言</p>
    <p class="leave">{{info.leave}}</p>
  </el-card>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
export default {
  name: 'PsychologyRecord',
  components: {
  },
  setup () {
    const route = useRoute()
    const router = useRouter()
    const { detailId,UserId } = route.query
    const state = reactive({
      info: '',
    })
    onMounted(() => {
      if(!UserId)return;
      // 获取诊断反馈记录
      axios.get(`/Counse/Diagnosis?detailId=${detailId}&userId=${UserId}`).then(res => {
        // console.log('诊断反馈记录:', res)
        state.info = res;
      }).catch(err => {
        console.log('err', err)
      })
    })
    // const handleInterview = () => {
    //   router.push({ path: '/interview', query: { detailId: detailId ,readonly:true} })

    // }
    const handleBack = () => {
      router.back()
    }
    return {
      ...toRefs(state),
      handleBack,
      // handleInterview
    }
  }
}
</script>
<style lang="scss" scoped>
.account-container {
  position: relative;
  min-height: 500px;
}
.book_btn {
  display: block;
  margin: 30px auto;
}
.info {
  font-size: 15px;
  padding: 15px 0;
  margin: 0;
  span {
    display: inline-block;
    width: 130px;
    color: #999;
  }
}
.history {
  font-size: 17px;
  color: #3a84ff;
  text-decoration: underline;
  margin: 30px 0;
  cursor: pointer;
}
.item_title {
  font-size: 17px;
  font-weight: bold;
  padding: 20px 0;
  margin: 0;
}
.result {
  .result_item {
    display: inline-flex;
    vertical-align: top;
    width: 148px;
    height: 84px;
    font-size: 14px;
    background: #f5f6fa;
    border: 2px solid #f5f6fa;
    margin-right: 30px;
    box-sizing: border-box;
    padding: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    &.active {
      background: #fff;
      border: 2px solid #3a84ff;
    }
    .title {
      text-align: center;
      margin: 0;
      font-weight: bold;
    }
    .des {
      margin: 0;
      color: #999;
      text-align: justify;
    }
  }
}
.edge {
  width: 289px;
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 0;
}
</style>