<template>
  <q-dialog
    v-model="persistent"
    full-height
    maximized
    position="right"
    persistent
    @hide="closeCutomer"
    transition-show="slide-left"
  >
    <div class="customMain">
      <div class="custom_Top">
        <div class="custom_HLeft">
          <div class="nameplate_avatar">
            <img
              v-if="baseObj.StuIcon"
              style="width:100%;height:100%;"
              :src="baseObj.StuIcon"
              alt
            />
            <div class="student_Name" v-else>
              <span v-if="baseObj.StuName">{{
                baseObj.StuName.substring(0, 1)
              }}</span>
            </div>
          </div>
          <div class="Name_List">
            <div class="F_16">{{ baseObj.StuName }}</div>
          </div>
        </div>
      
      </div>
      <div class="custom_Bottom">
       
        <div class="detail-travel">
          <div class="detail_first">
           
            <div class="operate_Content" style="flex:1;">
              <div class="detail_Main">
                
               
                <!-- 操作 -->
                <template >
                  <div class="operate_Content" style="margin-top:20px;">
                   
                     <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
                        <div class="TimeLineDiv">
                            <q-timeline color="primary">
                            <q-timeline-entry v-for="(tItem, tIndex) in dataList" :key="tIndex">
                                <template v-slot:title>
                                <div class="visit_Cont">
                                    <div class="Log_Content" v-html="tItem.Remark"></div>
                                  
                                </div>
                                </template>
                                <template v-slot:subtitle>
                                <div class="Time_TopList">
                                    <div>{{ tItem.CreateTime }}</div>
                                    <div>{{ tItem.CreateByName }}</div>
                                </div>
                                </template>
                            </q-timeline-entry>
                            </q-timeline>
                        </div>
                        </div>
                        <div style="margin-bottom:20px;">
                        <q-pagination
                            class="full-width justify-end"
                            v-model="msg.pageIndex"
                            color="primary"
                            :max="page_Count"
                            input
                            @input="changePage"
                        />
                        </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-out-close" @click="closeCutomer">
        <i class="iconfont icon-close" style="font-size:26px;" />
      </div>
    </div>
  </q-dialog>
</template>
<script>
import { queryEmployee } from "../../../api/users/user";
import { ForwardStudent ,queryStudentFollowPage} from "../../../api/customerstudent/customerstudent";
import {
  getStudentInfo, //获取学员客户信息
  queryStuStageList //获取客户阶段列表
} from "../../../api/school/index";
import studentGenjin from "../student/student-genjin";
import { SetStudentAssistBatch } from "../../../api/sale/sale";
export default {
  meta: {
    title: "学员管理"
  },
  components: {
    studentGenjin,
  },
  props: {
    saveObj: {
      type: Object,
      default: null
    },
    isJudgeTrans: {
      type: Number,
      default: null
    },
    BelongType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      persistent: true,
      ckedTab: "1",
      secondType: 1,
      pushing: false,
      msg: {
        pageIndex: 1,
        pageSize: 12,
        StuId: 0
      },
      baseObj: {},
      transMsg: {
        StuId: 1,
        CreateBy: ""
      },
      //员工列表
      employeeList: [],
      myEmployeeList: [],
      isShowTrans: false,
      customStateList: [],
      stateId: 0,
      stuData: {},
      userInfo: {},
    dataList: [],
    page_Count:0,

    };
  },
  created() {
       this.msg.StuId = this.saveObj.StuId;
       this.msg.STime = this.saveObj.STime?this.saveObj.STime:'';
       this.msg.ETime = this.saveObj.ETime?this.saveObj.ETime:'';
       this.getList()
        this.userInfo = this.getLocalStorage();
  },
  mounted() {
    this.baseObj = this.saveObj;
    this.baseObj.IsHaveCurseManager = false;
    if (this.baseObj.AssistList && this.baseObj.AssistList.length > 0) {
      this.baseObj.AssistList.forEach(x => {
        if (x.AssistType == 2) {
          this.baseObj.IsHaveCurseManager = true;
        }
      });
    }
  },
  methods: {
    getList() {
      queryStudentFollowPage(this.msg)
        .then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.page_Count = res.Data.PageCount;
          }
        })
        .catch(() => {});
    },
     changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
  

    closeCutomer() {
      this.$emit("close");
    },
    
   
  }
};
</script>
<style scoped>
.custom_RModel {
  width: 500px;
  height: 100%;
}

.customMain {
  width: 600px !important;
  display: flex;
  flex-direction: column;
  height: 100 vh;
  padding: 15px 17px 0 17px;
  background-color: #f4f4f6;
}

.custom_Top {
  width: 100%;
  padding: 22px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom_HLeft {
  display: flex;
}

.nameplate_avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 14px;
  border-radius: 5px;
  overflow: hidden;
}

.F_16 {
  font-size: 16px;
}

.Name_List {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
}

.wechat_Name {
  color: #9999a8;
  display: flex;
  font-size: 14px;
}

.custom_Bottom {
  margin-top: 17px;
  flex: 1;
  display: flex;
  margin-top: 17px;
  overflow: hidden;
}

.detail-info {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 100%;
  padding: 28px 0;
  margin-right: 13px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  overflow: auto;
}

.detail-info::-webkit-scrollbar {
  display: none;
}

.detail-travel {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.edit_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
}

.edit_info_wrap {
  padding: 0 22px 12px;
}

.custom_Line {
  width: calc(100% - 44px);
  margin: 16px 22px;
  border-bottom: 1px solid #d7d7d7;
}

.custom_Edit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 78px;
  height: 26px;
  margin-right: 3px;
  border: 1px dashed #858598;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.tripTypeContent {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.StuCkedType {
  color: #3470ff;
  font-weight: 700;
}

.tripTypeContent div {
  margin-right: 20px;
  cursor: pointer;
}

.q-timeline__title {
  margin-bottom: 5px;
}

.customUpdateTime {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #9696a6;
}

.q-timeline__subtitle {
  opacity: 1;
  font-weight: normal;
}

.follow_Component {
  padding: 0 22px;
  margin-top: 10px;
  width: 100%;
  background-color: #f6f6f6;
  border-radius: 5px;
}

.detail_first {
  margin: 0 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail_Main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.student_Name {
  width: 100%;
  height: 100%;
  background: #004d40;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}

.TimeLineDiv {
  height: 620px;
  flex: 1;
  height: 100%;
  padding-right: 20px;
}

.Time_TopList {
  display: flex;
  justify-content: space-between;
}

.visit_Cont {
  font-size: 14px;
}

.visit_delete {
  font-size: 14px;
  cursor: pointer;
  width: 30px;
}

.operate_Content {
  overflow: auto;
  /* padding-right: 20px; */
}

.operate_Content::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.operate_Content::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}

.operate_Content::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}

.Log_Content {
  padding: 10px;
  border-radius: 5px;
  background-color: #f4f4f6;
  color: #818194;
  line-height: 2;
  margin-top: 10px;
  word-break: break-all;
}

.stu_ComFeed {
  color: #3470ff;
  cursor: pointer;
  margin-left: 20px;
}

.StuCom_Remark {
  display: flex;
}

.StuCom_Inner {
  width: 100%;
}

.StuCom_Left {
  flex-shrink: 0;
  width: 57px;
  text-align-last: justify;
}

.Stu_OrderId {
  color: #2961fe;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.Stu_HtLeft {
  width: 57px;
  display: inline-block;
  text-align-last: justify;
}

.fullscreen {
  z-index: 3000;
}
</style>
