<template>
  <view class="admissions-container">
    <header-bar title="在线咨询" @leftClick="handleLeftClick"></header-bar>

    <view class="admissions-content">
      <!-- 自定义tab -->
      <view class="custom-tab">
        <view
          v-for="tab in tabList"
          :key="tab.id"
          :class="['tab-item', { active: activeTab === tab.id }]"
          @click="switchTab(tab.id)"
        >
          <text class="tab-text">{{ tab.name }}</text>
          <view class="tab-underline" v-if="activeTab === tab.id"></view>
        </view>
      </view>

      <view class="teacher-list">
        <!-- 教师列表 -->
        <view
          class="teacher-item"
          v-for="(teacher, index) in teacherList"
          :key="index"
        >
          <image
            class="teacher-avatar"
            src="/static/common/images/avatar.png"
          ></image>
          <view class="teacher-info">
            <view class="teacher-detail">
              <view class="teacher-name">
                <text>{{ teacher.name }}</text>
                <view v-if="teacher.presence" class="online-status">
                  <view class="online-dot"></view>
                  <text>在线</text>
                </view>
              </view>
              <view class="teacher-department">{{ teacher.collegeName }}</view>
            </view>
            <view class="ask-button" @click="handleAskQuestion(teacher)">
              立即提问
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 留言弹出层 -->
    <!-- <leave-message
      :show.sync="showLeaveMessage"
      :teacher="currentTeacher"
      @submit="handleMessageSubmit"
    /> -->
  </view>
</template>

<script>
import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
// import LeaveMessage from "@/components/LeaveMessage.vue";

export default {
  components: {
    HeaderBar, // 注册头部组件
    // LeaveMessage,
  },
  data() {
    return {
      // showLeaveMessage: false,
      // currentTeacher: null,
      activeTab: 0, // 当前激活的tab
      tabList: [
        { id: 0, name: "招生在线" },
        { id: 1, name: "迎新在线" },
      ],
      teacherList: [
        {
          id: 1,
          name: "孙老师",
          department: "招就处",
          avatar: "/static/common/images/avatar.png",
          online: true,
        },
        {
          id: 2,
          name: "杨老师",
          department: "电子信息学院",
          avatar: "/static/common/images/student.png",
          online: false,
        },
      ],
    };
  },
  computed: {},
  created() {
    this.getTeacherList();
  },
  methods: {
    switchTab(id) {
      this.activeTab = id;
      this.getTeacherList();
    },
    handleLeftClick() {
      uni.navigateBack();
    },
    handleAskQuestion(teacher) {
      console.log("点击咨询:", teacher);

      var msgUserData = {
        avatar: teacher.headSculptureUrl,
        friendId: teacher.id,
        friendName: teacher.name,
      };

      // 进入对话会话
      this.$store.dispatch("openOrCreateDialogue", msgUserData);

      return;

      return;
      // 留言相关的没用了，先注释
      if (!teacher.online) {
        // 留言
        this.currentTeacher = teacher;
        this.showLeaveMessage = true;
      } else {
      }
    },

    // 提交留言(此方法废弃)
    handleMessageSubmit(data) {
      console.log("提交留言:", data.content, "教师:", data.teacher?.name);

      // 成功提示已经在组件内部处理，这里不需要重复提示
      // uni.showToast({
      //   title: "留言成功",
      //   icon: "success",
      // });

      // 这里可以进行其他操作，如更新页面数据等
      if (data.success) {
        console.log("留言提交成功，可以进行后续操作");
        // 例如刷新列表或其他业务逻辑
      }
    },

    // 刷新当前对话的消息详情(后续添加下拉加载分页)
    getTeacherList() {
      this.$u.api
        .GetTeacherListApi({
          "Item1.ConsultationType": this.activeTab,
          PageIndex: 1,
          PageSize: 10,
        })
        .then((res) => {
          if (res.succeed) {
            this.teacherList = res.data.item1 || [];
          }
        })
        .finally(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.admissions-container {
  min-height: 100vh;
  padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
  padding-top: 88rpx;
  background-color: #ffffff;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    z-index: 99;

    .header-left {
      font-size: 36rpx;
    }

    .header-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .admissions-content {
    .custom-tab {
      padding: 0 30rpx;
      margin: 24rpx 0;
      display: flex;
      align-items: center;

      .tab-item {
        position: relative;
        padding: 12rpx 0;
        margin-right: 60rpx;
        cursor: pointer;

        .tab-text {
          font-size: 32rpx;
          font-weight: 500;
          color: #505866;
          letter-spacing: 0.04rpx;
        }

        &.active .tab-text {
          color: #4f6aff;
          font-weight: 600;
        }

        .tab-underline {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          right: 0;
          width: 80rpx;
          height: 4rpx;
          background-color: #4f6aff;
          border-radius: 2rpx;
        }
      }
    }

    .teacher-list {
      .teacher-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #ffffff;
        padding: 0 30rpx;
        // margin-bottom: 30rpx;
        border-radius: 16rpx;

        .teacher-avatar {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          margin-right: 24rpx;
          object-fit: cover;
        }

        .teacher-info {
          // padding: 30rpx 0;
          height: 150rpx;
          flex: 1;
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #f2f2f2;

          .teacher-detail {
            .teacher-name {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              font-weight: 600;
              color: #333333;
              margin-bottom: 12rpx;

              .online-status {
                display: flex;
                align-items: center;
                margin-left: 16rpx;

                .online-dot {
                  width: 14rpx;
                  height: 14rpx;
                  border-radius: 50%;
                  background-color: #4cd964;
                  margin-right: 8rpx;
                }

                text {
                  font-size: 24rpx;
                  color: #999999;
                  font-weight: normal;
                }
              }
            }

            .teacher-department {
              font-size: 24rpx;
              color: #999999;
            }
          }
          .ask-button {
            color: #ffffff;
            background-color: #4f6aff;
            font-size: 24rpx;
            width: 152rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            border-radius: 50rpx;
          }
        }
      }
    }
  }
}

/* 响应式布局 - PC端样式 */
@media screen and (min-width: 768px) {
  .admissions-container {
    .content {
      max-width: 1200rpx;
      margin: 0 auto;
    }
  }
}
</style>
