<template>
  <el-radio-group v-model="type" @change="typeChange">
    <el-radio-button label="1">心理咨询</el-radio-button>
    <!-- <el-radio-button label="2">生涯咨询</el-radio-button> -->
  </el-radio-group>
  <div class="left">
    <el-card class="account-container">
      <v-date-picker v-model="date" locale="zh-cn" class="datepicker" />
    </el-card>
    <el-card class="account-container" style="margin-top: 20px">
      <div class="title_box">
        <h1>已预约</h1>
      </div>
      <el-table :data="BookingRecordData" style="width: 100%" stripe max-height="600">
        <el-table-column prop="teacherName" label="老师" align="center"> </el-table-column>
        <el-table-column prop="time" label="时间" align="center"> </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="props">
            <p v-if="props.row.statusName == '已取消'" class="booking_btn" style="color: #3a84ff">已取消</p>
            <el-popconfirm
              v-if="props.row.statusName == '取消预约'"
              title="确定取消预约？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="handleCancelBooking(props.row)"
            >
              <template #reference>
                <p class="booking_btn" style="color: #ff3a3a; text-decoration: underline; cursor: pointer">取消预约</p>
              </template>
            </el-popconfirm>
            <p
              v-if="props.row.statusName == '查看报告'"
              class="booking_btn"
              style="color: #3a84ff; text-decoration: underline; cursor: pointer"
              @click="handleRecory(props.row)"
            >
              查看报告
            </p>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <div class="right">
    <el-card class="account-container">
      <div class="title_box">
        <h1>{{ type == 1 ? '心理咨询' : '生涯咨询' }}</h1>
      </div>
      <el-table :data="ArrangeTeacherData" style="width: 100%" stripe max-height="600">
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="name" label="老师" align="center"> </el-table-column>
        <el-table-column prop="male" label="性别" align="center"> </el-table-column>
        <el-table-column prop="typeName" label="课程" align="center"> </el-table-column>
        <el-table-column prop="timeSlot" label="时间" align="center"> </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="props">
            <p
              v-if="!props.row.isBooking&&!props.row.isClash"
              class="booking_btn"
              style="color: #3a84ff; text-decoration: underline; cursor: pointer"
              @click="handleBooking(props.row)"
            >
              可预约
            </p>
            <p
              v-else-if="!props.row.isBooking&&props.row.isClash"
              class="booking_btn"
              style="color: #999; text-decoration: underline;"
            >
              已有其他预约
            </p>
            <p v-else class="booking_btn" style="color: #ff3a3a">已被预约</p>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</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'
import Moment from 'moment'
export default {
  name: 'Psychology',
  components: {},
  setup() {
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      date: '',
      BookingRecordData: [], //学生预约列表
      ArrangeTeacherData: [], //某日老师排班列表
      UserId: store.state.userInfo?.userId,
      type: 1,
    })
    onMounted(() => {
      state.date = Moment().format('YYYY-MM-DD')
      // console.log(state.date)
    })
    watch(
      () => state.date,
      (newValue, oldValue) => {
        // 因为watch被观察的对象只能是getter/effect函数、ref、热active对象或者这些类型是数组
        // 所以需要将state.count变成getter函数
        if (newValue) {
          getStudentBookingRecord()
          getArrangeTeacher()
        } else {
          state.BookingRecordData = []
          state.ArrangeTeacherData = []
        }
      }
    )
    // 学生端获取学生预定列表
    const getStudentBookingRecord = () => {
      if (!state.UserId) return
      axios
        .post('/SchedualBooking/BookingRecord/Student/List', {
          // "DetailId": 0,
          StudentId: state.UserId,
          // "TeacherId": "",
          Type: state.type,
          DayName: Moment(state.date).format('YYYY-MM-DD'),
          // "ChooseType": 1,
          PageIndex: 1,
          PageSize: 1000,
        })
        .then((res) => {
          console.log('学生端获取学生预定列表:', res)
          let BookingRecordData = res.data
          state.BookingRecordData = BookingRecordData
        })
        .catch((err) => {
          console.log('err', err)
        })
    }
    // 获取某日老师排班列表
    const getArrangeTeacher = () => {
      axios
        .post('/SchedualBooking/ArrangeTeacher/List', {
          DayName: Moment(state.date).format('YYYY-MM-DD'),
          UserId: state.UserId, 
          Type: state.type,
        })
        .then((res) => {
          // console.log('获取某日老师排班列表:', res)
          let ArrangeTeacherData = res
          for (let i in ArrangeTeacherData) {
            ArrangeTeacherData[i].timeSlot = `${ArrangeTeacherData[i].startTime}-${ArrangeTeacherData[i].endTime}`
          }
          state.ArrangeTeacherData = ArrangeTeacherData
        })
        .catch((err) => {
          console.log('err', err)
        })
    }
    // 取消预约
    const handleCancelBooking = (item) => {
      axios
        .post('/SchedualBooking/StudentBooking', {
          DetailId: item.detailId || item.id,
          StudentId: state.UserId,
          IsBooking: false,
          BookTypeName: item.bookTypeName || item.type,
          BookDescription: item.bookDescription || '',
        })
        .then((res) => {
          // console.log('取消预约:', res)
          ElMessage.success('已成功取消预约')
          getStudentBookingRecord()
          getArrangeTeacher()
        })
        .catch((err) => {
          console.log('err', err)
        })
    }
    // 预约
    const handleBooking = (item) => {
      console.log(item)
      // 当前时间已经过了预约时间就不能预约
      if (Moment().format('YYYY-MM-DD') > Moment(state.date).format('YYYY-MM-DD')) {
        ElMessage.error('当前时间已过预约时间')
        return
      }
      router.push({
        path: '/psychology_reserve',
        query: {
          detailId: item.id,
          date: Moment(state.date).format('YYYY-MM-DD'),
          time: item.timeSlot,
          teacher: item.name,
          type: state.type,
        },
      })
    }
    const typeChange = (i) => {
      getStudentBookingRecord()
      getArrangeTeacher()
    }
    // 查看报告
    const handleRecory = (item) => {
      router.push({ path: '/psychology_record', query: { detailId: item.detailId, UserId: item.studentId } })
    }
    return {
      ...toRefs(state),
      handleBooking,
      handleCancelBooking,
      handleRecory,
      typeChange,
    }
  },
}
</script>
<style lang="scss" scoped>
.title_box {
  padding: 20px 0;
  h1 {
    font-size: 23px;
    margin: 0;
  }
}
.left {
  display: inline-block;
  width: 40%;
  min-width: 300px;
  vertical-align: top;
}
.right {
  display: inline-block;
  width: 56%;
  margin-left: 2%;
  vertical-align: top;
}
.datepicker {
  width: 100%;
  min-height: 268px;
  border: none;
}
.date span {
  display: inline-block;
  color: #3a84ff;
  margin-left: 17px;
  width: 143px;
  line-height: 36px;
  background: #f8f9fb;
  border-radius: 5px;
  text-align: center;
}
.el-radio-group {
  display: block;
  margin-bottom: 30px;
}
</style>