<template>
  <p class="sub_back" @click="handleBack">&#60;返回</p>
  <p class="sub_title">{{type==1?'心理咨询':'生涯咨询'}}</p>
  <el-card class="account-container" v-if="!bookSuccess">
    <img class="edge" src="@/assets/edge2.png" alt="">
    <div class="control">
      <p class="control_name">你好 {{name}} {{userType==1?'同学':'老师'}}</p>
    </div>
    <el-radio-group v-model="isSelf" size="medium" v-if="userType!=1">
      <el-radio-button :label="true">本人预约</el-radio-button>
      <el-radio-button :label="false">非本人预约</el-radio-button>
    </el-radio-group>
    <template v-if="!isSelf">
      <el-autocomplete style="margin-left:20px;" v-model="student" :fetch-suggestions="querySearchAsync" placeholder="请输入学生姓名" :trigger-on-focus="false" @select="handleSelect" value-key="studentName"></el-autocomplete>
    <span style="margin-left:20px">{{selectStudent.class}}</span>
    </template>
    <p class="tip">需要帮助问题</p>
    <el-radio-group v-model="bookTypeName">

      <template v-if="type==1">
        <el-radio-button label="适应问题"></el-radio-button>
        <el-radio-button label="人际关系"></el-radio-button>
        <el-radio-button label="情绪管理"></el-radio-button>
        <el-radio-button label="学业压力"></el-radio-button>
      </template>
      <template v-else>
        <el-radio-button label="生涯规划"></el-radio-button>
        <el-radio-button label="生涯决策"></el-radio-button>
        <el-radio-button label="生涯意识"></el-radio-button>
      </template>
    </el-radio-group>
    <el-input class="des" type="textarea" :input-style="{'background':'#F5F7FA','border':'none'}" v-model="bookDescription" :placeholder="isSelf?'请简单说明一下目前情绪状态、行为表现。':'请简单说明一下你观察到的学生的情绪状态、行为表现。'" :autosize="{minRows: 5  }" resize="none"></el-input>
    <el-button class="book_btn" type="primary" @click="handleBooking">确定</el-button>
  </el-card>
  <el-card class="account-container" v-else>
    <img class="edge" src="@/assets/edge2.png" alt="">
    <div class="control">
      <p class="control_name">请按照预约时间准时前往舒心坊。</p>
    </div>
    <p class="course">{{date}} {{time}} {{teacher}}老师 {{bookTypeName}}</p>
    <p class="backhome">{{backTime}}秒后返回首页</p>
  </el-card>

</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
export default {
  name: 'PsychologyReserve',
  components: {
  },
  setup () {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const { detailId, date, time, teacher, type } = route.query
    const state = reactive({
      bookTypeName: '',
      bookDescription: '',
      bookSuccess: false,
      backTime: 3,
      UserId: store.state.userInfo?.userId,
      userType: store.state.userInfo?.userType,
      name: store.state.userInfo?.name,
      isSelf: true,
      student: '',
      selectStudent:'',
      styClass:''
    })

    // 预约
    const handleBooking = () => {
      if (!state.bookTypeName) {
        ElMessage.error('请选择问题类别')
        return;
      }
      if (!state.bookDescription) {
        ElMessage.error('请输入问题描述')
        return;
      }
      if(!state.isSelf&&!state.selectStudent.userId){
        ElMessage.error('请选择学生')
        return;
      }
      if (!state.UserId) {
        ElMessage.error('用户信息异常，请重新登录')
        return;
      };
      axios.post('/SchedualBooking/StudentBooking', {
        "DetailId": detailId,
        "StudentId": state.isSelf?state.UserId:state.selectStudent.userId,
        "IsBooking": true,
        "BookTypeName": state.bookTypeName,
        "BookDescription": state.bookDescription
      }).then(res => {
        // console.log('预约:', res)
        handleBookSuccess()
      }).catch(err => {
        console.log('err', err)
      })
    }
    const handleBookSuccess = () => {
      state.bookSuccess = true;
      state.backTime = 3;
      let interval = setInterval(() => {
        if (state.backTime == 0) {
          clearInterval(interval)
          router.push({ path: '/psychology' })
        }
        state.backTime--
      }, 1000)
    }
    const querySearchAsync = (queryString, cb) => {
      axios.post('/User/User/List', {
        "UserType": 1,
        "UserName": queryString,
        "PageIndex": 1,
        "PageSize": 100
      }).then(res => {
        // console.log('学生列表:', res)
        cb(res.data);
      }).catch(err => {
        console.log('err', err)
      })
    };
    const handleSelect = (item) => {
      state.selectStudent = item
    };
    const handleBack = () => {
      router.back()
    }
    return {
      ...toRefs(state),
      handleBooking,
      handleBack,
      querySearchAsync,
      handleSelect,
      date, time, teacher, type
    }
  }
}
</script>
<style lang="scss" scoped>
.account-container {
  position: relative;
  min-height: 500px;
}
.control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .control_name {
    font-size: 23px;
    font-weight: bold;
  }
  .el-input {
    width: 300px;
  }
}

.tip {
  font-size: 17px;
  padding: 10px 0;
  margin: 20px 0;
}
.des {
  width: 70%;
  margin-top: 30px;
  display: block;
}
.book_btn {
  display: block;
  margin: 30px auto;
  margin-top: 90px;
}
.course {
  font-size: 17px;
  color: #999;
  margin: 0;
}
.backhome {
  position: absolute;
  bottom: 43px;
  margin: 0;
  left: 30%;
  font-size: 22px;
  color: #999;
}
.edge {
  width: 289px;
  position: absolute;
  bottom: 0;
  right: 16px;
  z-index: 0;
}
</style>