<template>
  <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
  <div class="faceteach" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div class="crumb">
      <div>课程列表</div>
      <div style="margin-left: 6px; margin-right: 6px">/</div>
      <div style="font-weight: 700">课程报名</div>
      <div v-if="pName != ''" class="return">
        <div style="display: flex" @click="returnclick">
          <el-button style="color:#0073FB"><img class="img2" style="margin-right:11px;cursor: pointer;"
                                                src="../../assets/image/return.png"/>返回
          </el-button>
        </div>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <!-- 基本信息 -->
    <div class="bascinfo">
      <div style="display:flex;">
        <img style="width:405px;height:230px;margin-left: 48px;border-radius: 8px;margin-top: 40px;"
             :src="data.offcourseDto?.picUrl" alt="">
        <div style="margin-left: 40px;margin-top: 56px;">
          <div class="title">【面授课】{{ data.planDto?.name }}</div>
          <div class="time" style="margin-top: 30px">
            <img style="width: 15px; height: 17px" src="../../assets/image/time.png"/>
            <div style="margin-left: 8px">
              {{
                data.planDto?.beginTime + " 至 " + data.planDto?.endTime
              }}
            </div>
          </div>
          <div v-if="data.planDto.address" class="time" style="margin-top: 10px">
            <img style="width: 16px; height: 18px" src="../../assets/image/position.png"/>
            <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
          </div>
          <div class="time" style="margin-top: 37px">
            <botton 
              class="btn" 
              style="margin-right: 20px;width: 160px;height: 46px;" 
              v-if="data.planDto.applyFlag" 
              @click="onLineSignUp(false)" 
              :style="{	background: isAllowSign?data.isSignUp || data.isRefused ? '#999' : 'rgb(57, 146, 249)':'#999'}">
              {{
                data.isRefused ? '审核拒绝' : data.isSignUp? '已报名' :'立即报名'
              }}
            </botton>
            <botton 
              v-if="data.isRefused && !data.isSignUpAgain" 
              class="btn" 
              style="margin-right: 20px;width: 160px;height: 46px;" 
              @click="onLineSignUp(true)">
              重新报名
            </botton>
          </div>
        </div>
      </div>
      <div style="display: flex">
      </div>
    </div>
    <!-- 基本信息 -->
    <!-- 详细信息 -->
    <div class="detailinfo">
      <div class="detail">
        <div class="detailB">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程介绍" name="first">
              <div class="notice" style="padding:20px;font-size:14px;">
                {{ data.offcourseDto?.intro || "暂无课程介绍" }}
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程大纲" name="second">
              <div style="display: flex; align-items: center">
                <div style="padding:20px;" class="content" v-html="data.offcourseDto?.outline"></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程评论" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
              <div class="bascinfor">
                <div class="inputone">
                  <el-input
                    ref="refInput"
                    v-model="disComment.content"
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    resize="none"
                    maxlength="100"
                    type="textarea"
                    placeholder="写评论~"
                  />
                  <div class="words">{{ disComment.content.length }}/100</div>
                  <div class="upload">
                    <div style="display: flex">
                      <div
                        class="allimg"
                        v-for="(img, i) in fileListComment"
                        :key="i"
                      >
                        <div
                          class="imgone"
                          :style="{
                            backgroundImage: `url('${img.url}')`,
                            marginLeft: '15px',
                          }"
                        ></div>
                        <div class="cha" @click="removeCommentImg(i)"></div>
                      </div>
                    </div>
                    <div class="uploadAnd">
                      <div v-if="3>5" class="btnone clearfix">
                        <UploadPostImg v-model="commentSubmitFileList" @fileUploadValue="uploadBack">
                          <button class="btwwo">
                            <img class="image" src="../../assets/image/uploadimg.png" />
                            <div class="shangchuan">上传图片</div>
                          </button>
                        </UploadPostImg>
                      </div>
                      <button class="btntwo" @click="submitComment" v-loading="submitLoading">发表评论</button>
                    </div>
                  </div>
                  <div class="thinline"></div>
                  <div class="bottom">
                    <div v-for="(row, i) in commontList" :key="i" style="margin-bottom: 24px;">
                      <div class="header">
                        <img :src="row.studentAvatar" alt="" srcset="" class="avator">
                        <div class="id">{{ row.createName }}</div>
                        <div class="showCareer">{{row.studentJobName}}</div>
                        <div class="idThink"></div>
                      </div>
                      <div class="discuss clearfix">
                        <div class="discussmain clearfix">
                          <div class="talkmain">
                            {{ row.content }}
                          </div>
                        </div>
                        <div style="display:flex;margin-top: 12px;margin-bottom: 12px;">
                          <div v-if="row.img" v-for="(rowimg, index) in row.img.split(',')" :key="index" style="width:55px;height:55px;margin-right: 12px;">
                            <img class="image" style="width:55px;height:55px;border-radius: 4px;" :src="rowimg"  />
                          </div>
                        </div>
                        <div class="intime">{{ row.ctime }}</div>
                        <div class="likeYou">
                          <div
                            @click="commentComment(row)"
                            style="display: flex; cursor: pointer; align-items: baseline"
                          >
                            <span
                              class="iconfont icon-pinglun"
                              :style="{ color: '#b3bdc4' }"
                            ></span>
                            <!--                  <div class="count"> {{ row.praiseNum || 0 }}</div>-->
                          </div>
                          <div
                            @click="commentLike(row)"
                            style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px;">
                            <span
                              class="iconfont icon-dianzan"
                              :style="{ color: row.praised ? '#2478ff' : '#b3bdc4' }"></span>
                            <div class="count" :style="{color:row.praised ? '#2478ff' : '#b3bdc4'}">{{ row.praiseNum || 0 }}</div>
                          </div>
                        </div>
                        <!-- 评论下的回复  -->
                        <div v-if="row.children.length!==0" :style="{height:spreadReply==i ? 'auto' : 210 +'px',overflow:'hidden',position: 'relative'}">
                          <div v-for="(replay, j) in row.children" :key="j">
                            <div class="reply">
                              <img :src="replay.studentAvatar" alt="" srcset="" class="sameava avaone">
                              <div class="sameuser">{{ replay.studentName }}</div>
                              <div class="centerreply">回复</div>
                              <img :src="replay.targetStudentAvatar" alt="" srcset="" class="sameava avaone">
                              <div class="sameuser">{{ replay.targetStudentName }}</div>
                              <div class="replytime">{{ replay.createTime }}</div>
                            </div>
                            <div style="display:flex;margin-top: 12px;margin-bottom: 12px;">
                              <div v-if="replay.img" v-for="(rowimg, index) in replay.img.split(',')" :key="index" style="width:65px;height:65px;margin-right: 7px;">
                                <img class="image" style="width:65px;height:65px;border-radius: 4px;" :src="rowimg"  />
                              </div>
                            </div>
                            <div class="mainreply">
                              <div class="replydetail">
                                {{ replay.content }}
                              </div>
                              <!-- <div class="talk"></div> -->
                            </div>
                            <div class="likeYou">
                              <div
                                @click="commentComment(replay)"
                                style="display: flex;cursor: pointer;align-items: baseline;">
                                <span
                                  class="iconfont icon-pinglun"
                                  :style="{ color: '#b3bdc4' }"></span>
                                <!--                    <div class="count"> {{ replay.commentNum }}</div>-->
                              </div>
                              <div
                                style="display: flex; cursor: pointer; align-items: baseline;margin-left: 19px;"
                                @click="commentLike(replay)">
                                <span
                                  class="iconfont icon-dianzan"
                                  :style="{ color: replay.praised ? '#2478ff' : '#b3bdc4' }"></span>
                                <div class="count" :style="{color:replay.praised ? '#2478ff' : '#b3bdc4'}">{{ replay.praiseNum || 0 }}</div>
                              </div>
                            </div>
                          </div>
                          <!-- 查看更多 -->
                          <div style="display: flex;justify-content: center;align-items: center;position:absolute;bottom:0px;cursor: pointer;width:100%">
                              <span 
                                @click="lookMore(i)"
                                style="font-size: 14px;color: #2478ff;">{{ i==spreadReply ? '收起' : '查看更多' }}</span>
                            </div>
                        </div>
                      </div>
                    </div>
                    <!-- 回复分页 -->
                    <div style="display:flex;justify-content:center;align-items:center;margin-top:36px;margin-bottom:36px;">
                      <!-- 分页 -->
                      <el-pagination
                        v-model:current-page="hfPage.currentPage"
                        :page-size="hfPage.pageSize"
                        :small="small"
                        layout="prev, pager, next, jumper"
                        :total="hfPage.total"
                        @current-change="handleCurrentChange"
                      />
                    </div>
                    <div
                      class="discuss clearfix"
                      v-if="commontList && commontList.length">
                      <div class="inreply">
                        <el-input
                          v-model="replayComment.content"
                          :autosize="{ minRows: 5, maxRows: 5 }"
                          resize="none"
                          maxlength="100"
                          type="textarea"
                          :placeholder="replayComment.placeholder"
                        />
                        <div class="words">{{ replayComment.content.length }}/100</div>
                        <div class="upload">
                          <div style="display: flex">
                            <div class="allimg" v-for="(img, i) in fileListCommentRelpay" :key="i">
                              <div
                                class="imgone"
                                :style="{
                                  backgroundImage: `url('${img.url}')`,
                                  marginLeft: '15px',
                                }"
                              ></div>
                              <div class="cha" @click="removeImg(i)"></div>
                            </div>
                          </div>
                          <datagrid  class="uploadAnd">
                            <UploadPostImg v-if="3>5" v-model="fileListCommentRelpay" @fileUploadValue="uploadReplyBack">
                              <button class="btnone clearfix">
                                <img
                                  class="image"
                                  src="../../assets/image/uploadimg.png"
                                />
                                <div class="shangchuan">上传图片</div>
                              </button>
                            </UploadPostImg>
                            <button class="btntwo" @click="submitReplayComment" style="top:206px;" v-loading="submitReplayLoading">
                              回复
                            </button>
                          </datagrid>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="材料下载" name="four" >
              <div v-if="data.planDto?.attach == ''"
                   style="font-size: 14px;font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px; margin-top: 20px;">
                此课程无附件
              </div>
              <div v-else>
                <div v-for="(el, index) in formateArr(data.planDto.attach)" :key="index" class="enclosure"
                     :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
                  <div class="enclosureL">
                    <FileTypeImg :v-model="el.slice(el.lastIndexOf('/')+1,el.indexOf('-')) + el.slice(el.lastIndexOf('.'))" :style="{
											width: '22px',
											height: '26px',
											marginLeft: '10px',
										}"></FileTypeImg>
                    <div style="margin-left: 20px">{{ el.slice(el.lastIndexOf('/')+1,el.indexOf('-'))  + el.slice(el.lastIndexOf('.')) }}</div>
                  </div>
                  <div class="download">
                    <img style="width: 16px; height: 15px" src="../../assets/image/download.png"/>
                    <!-- <div style="margin-left: 5px;color:#999;">
                      下载
                    </div> -->
                    <div style="margin-left: 5px;color:#2478ff;" @click="download(el)">
                      下载
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="teacher">
        <div class="title">
          <img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png"/>
          <div class="text">面授课讲师</div>
          <div class="box"></div>
        </div>
        <!--        todo #面授课接口 讲师缺少img和介绍-->
        <div class="teacheritem">
          <img class="peopleimg" :src="teacherInfo.avatar"/>
          <div class="nameSpan">
            <div class="teacherName" style="margin-right: 5px">
              {{ data.planDto?.teacher }}
            </div>
            <div class="introduce">{{ data.planDto?.bandDesc }}</div>
          </div>
          <!--          <div class="follow">+ 关注</div>-->
        </div>
      </div>
    </div>
    <!-- 详细信息 -->
  </div>
</template>
<script setup>
import {computed, reactive, toRefs, watch, onUnmounted, ref} from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import {request, useRequest} from "@/api/request";
import {
  STU_OFFCOURSE_DETAIL,
  FACETEACH_SIGNUP,
  COMMENT_ADD,
  COMMENT_LIST,
  COMMENT_PRAISE,
  PostPraise,
  PostDetails,
} from "@/api/api";
import {useRoute, useRouter} from "vue-router";
import {useUserInfo} from "@/api/utils";
import {ElMessage, messageConfig} from "element-plus";
import dayjs from "dayjs";
const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: {courseId, type, id: taskId},
} = useRoute();
const {data = {}} = useRequest(STU_OFFCOURSE_DETAIL, {courseId});
const teacherInfo = useUserInfo(
    computed(() => data.value?.planDto?.teacherId)
);
const state = reactive({
  activeName: "first",
  enclosure: "",
  isAllowSign: false,
});
const {activeName, enclosure, isAllowSign} = toRefs(state);
const handleClick = (tab, event) => {
  console.log("附件", tab, event);
};
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const download = (url) => {
  console.log('下载url',fielPath.value+url)
  window.open(fielPath.value+url);
};
const downloads = (url) => {
  ElMessage.warning("未在有效时间范围内，请耐心等待！");
};
//判断能否报名 (TODO-大于面授课截止时间就不能报名了，其余均可以)
function isSignClick() {
  let endTime = new Date(data.value.planDto?.endTime).getTime()
  let nowTime = new Date().getTime();
  if (nowTime < endTime) {
    state.isAllowSign = true;
  } else {
    state.isAllowSign = false;
  }
  console.log(state.isAllowSign)
}
watch(data,()=>{
  isSignClick();
})
// 查看更多-展开回复列表
function lookMore(i) {
  i == spreadReply.value  ? spreadReply.value  = -1 : spreadReply.value  = i;
}
// 获取评论数据
const hfPage = ref({
  currentPage: 1,
  pageNo: 1,
  pageSize: 10,
  total: 0
})
const disComment = ref({
  content: "",
});
// 获取数据
const getData = () => {
  // 获取面授课下的评论
  request(COMMENT_LIST, {
      id: courseId,
      type: 2,
      current:hfPage.value.currentPage,
      pageNo:hfPage.value.currentPage,
      pageSize:10
    }).then(res=>{
      console.log('我是获取当前帖子的评论', res)
      commontList.value = res.data.records;
      hfPage.value.total = Number(res.data.total);
      submitLoading.value = false;
      submitReplayLoading.value = false;
      clearText()
    }).catch(err=>{
      console.log(err)
      submitLoading.value = false;
      submitReplayLoading.value = false;
    })
}
// 回复分页
function handleCurrentChange(e, k) {
  console.log('分页打印', e, k)
  hfPage.value.currentPage = e;
  hfPage.value.pageNo = e;
  getData();
}
getData()
const disDetail = ref({});
const commontList = ref([]);
const spreadReply = ref(-1);
const replayComment = ref({
  placeholder: "",
  content: "",
  pid: "",
});
// 清空回复及评论输入框
const clearText = () => {
  disComment.value.content = "";
  fileListComment.value = [];
  fileListCommentRelpay.value = []; 
  replayComment.value.content = "";
}
// 评论图片展示数组
const fileListComment = ref([]);
// 回复图片展示数组
const fileListCommentRelpay = ref([]);
// 上传图片成功返回的URL
const uploadBack = (e) => {
  console.log('--------->', e)
  fileListComment.value.push(e)
}
const uploadReplyBack = (e) => {
  console.log('--------->', e)
  fileListCommentRelpay.value.push(e)
}
function removeImg(i) {
  fileListCommentRelpay.value.splice(i, 1);
}
function removeCommentImg(i) {
  fileListComment.value.splice(i, 1);
}
function commentLike(obj) {
  obj.praised ? (obj.praiseNum = Number(obj.praiseNum) - 1) : (obj.praiseNum =  Number(obj.praiseNum) + 1);
  obj.praised = !obj.praised;
  request(COMMENT_PRAISE, { targetId: obj.id, type: 1 });
}
function commentComment(obj) {
  console.log(obj)
  replayComment.value.placeholder = "@ " + obj.createName;
  replayComment.value.pid = obj.id;
}
const submitLoading = ref(false);
// 提交评论
function submitComment() {
  if(disComment.value.content==""){
    ElMessage.error(`请输入评论内容`);
    return
  }
  if(submitLoading.value){
    ElMessage.error(`请勿频繁点击`)
    return
  }
  submitLoading.value = true;
  console.table('面授课评论参数',{
    id: courseId,
    targetId: courseId,
    content: disComment.value.content,
    type: 2,
  })
  
  request(COMMENT_ADD, {
    id: courseId,
    targetId: courseId,
    content: disComment.value.content,
    type: 2,
  }).then((res) => {
    console.log(res)
    getData();
  }).catch(err=>{
    submitLoading.value = false;
    console.log(err)
  });
}
const submitReplayLoading = ref(false);
// 回复评论
function submitReplayComment() {
  if(replayComment.value.content==""){
    ElMessage.error(`请输入回复内容`);
    return
  }
  if(submitReplayLoading.value){
    ElMessage.error(`请勿频繁点击`)
    return
  }
  submitReplayLoading.value = true;
  console.table('帖子回复评论参数',{
    id: courseId,
    targetId: courseId,
    content: replayComment.value.content,
    type: 2,
    pid: replayComment.value.pid
  })
  
  request(COMMENT_ADD, {
    id: courseId,
    targetId: courseId,
    content: replayComment.value.content,
    type: 2,
    pid: replayComment.value.pid
  }).then((res) => {
    console.log(res)
    getData();
  }).catch(err=>{
    console.log(err)
    submitReplayLoading.value = false;
  });
}
// 报名
function onLineSignUp(isAgain) {
  if (!state.isAllowSign) {
    // console.log("data.signFlag", data.value.signFlag, isAllowSign);
    ElMessage.warning("未在允许报名时间范围内");
    return;
  }
  if(data.value.isSignUp && !isAgain){
    return;
  }
  request(FACETEACH_SIGNUP, {courseId})
  data.value.isSignUp = true
  //重置按钮
  data.value.isSignUpAgain = isAgain;
  data.value.isRefused = false;
  ElMessage.success(isAgain? "重新报名成功" : "报名成功");
}
function formateArr(strs) {
  let arrs = strs.split(',')
  console.log('112233', arrs)
  return arrs
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.faceteach {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }
  .bascinfo {
    width: 100%;
    height: 310px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 37px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      width: 146px;
      height: 46px;
      background: #2478ff;
      border-radius: 4px;
      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      line-height: 24px;
      cursor: pointer;
      margin-right: 96px;
    }
    .title {
      font-size: 20px;
      font-weight: 800;
      color: #333333;
      line-height: 24px;
      margin-left: -9px;
    }
    .time {
      font-size: 14px;
      color: #6e7b84;
      line-height: 24px;
      display: flex;
      align-items: center;
    }
  }
  .return {
    position: absolute;
    right: 10%;
    .text {
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  .detailinfo {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    .detail {
      flex: 1;
      margin-right: 20px;
      .detailT {
        min-height: 263px;
        background: #ffffff;
        border-radius: 8px;
        color: rgba(51, 51, 51, 1);
        .title {
          display: flex;
          align-items: center;
          padding-top: 39px;
          position: relative;
        }
        .title .text {
          margin-left: 8px;
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 800;
        }
        .title .box {
          width: 75px;
          height: 10px;
          background-color: rgba(36, 120, 255, 0.15);
          position: absolute;
          left: 23px;
          top: 53px;
        }
        .content {
          margin-left: 8px;
          font-size: 14px;
          color: rgba(51, 51, 48, 1);
          font-weight: 500;
          line-height: 35px;
          margin-top: 30px;
          padding-bottom: 30px;
        }
      }
      .detailB {
        min-height: 363px;
        background: #ffffff;
        border-radius: 8px;
        margin-top: 20px;
        .wenxintishi {
          display: flex;
          justify-content: stretch;
          padding: 72px;
        }
        .el-tabs__item {
          height: 69px;
          padding: 25px 7px 0px 52px;
          font-size: 14px;
          font-weight: 500;
        }
        .el-tabs__nav-wrap::after {
          background-color: rgba(56, 125, 247, 0.2);
        }
        .enclosure {
          height: 89px;
          margin-left: 51px;
          margin-right: 40px;
          // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .enclosureL {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: #677d86;
            line-height: 24px;
          }
          .download {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 400;
            color: #2478ff;
            line-height: 24px;
            cursor: pointer;
          }
        }
        .work {
          margin-left: 51px;
          margin-right: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 37px;
        }
        .work .question {
          font-size: 14px;
          font-weight: 500;
          color: #333330;
          line-height: 18px;
        }
        .work .submit {
          width: 126px;
          height: 46px;
          background: #2478ff;
          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
          border-radius: 4px;
          font-size: 16px;
          font-weight: 800;
          color: #ffffff;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
    .teacher {
      width: 434px;
      min-height: 500px;
      // height: 10%;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 8px;
      .title {
        display: flex;
        align-items: center;
        padding-top: 39px;
        position: relative;
        margin-left: 48px;
      }
      .title .text {
        margin-left: 8px;
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
        font-weight: 800;
      }
      .title .box {
        width: 75px;
        height: 10px;
        background-color: rgba(36, 120, 255, 0.15);
        position: absolute;
        left: 23px;
        top: 53px;
      }
      .teacheritem {
        margin-left: 48px;
        margin-right: 48px;
        // min-height: 115px;
        margin-top: 20px;
        padding: 25px 0px;
        display: flex;
        position: relative;
        // align-items: center;
      }
      .teacheritem .peopleimg {
        width: 60px;
        height: 60px;
        border-radius: 30px;
      }
      .teacheritem {
        .nameSpan {
          width: 190px;
          display: flex;
          align-items: center;
          justify-content: center;
          .teacherName {
            font-size: 14px;
            font-weight: bold;
            color: #394145;
            display: flex;
            align-items: center;
          }
        }
      }
      .teacheritem {
        .nameSpan {
          width: 190px;
          display: flex;
          align-items: center;
          justify-content: center;
          .teacherName {
            font-size: 14px;
            font-weight: bold;
            color: #394145;
            display: flex;
            align-items: center;
          }
        }
      }
      .teacheritem .introduce {
        font-size: 14px;
        font-weight: 500;
        color: #394145;
        margin-top: 14px;
      }
      .teacheritem .follow {
        width: 80px;
        height: 30px;
        background: #387df7;
        border-radius: 4px;
        margin-top: 28px;
        position: absolute;
        right: -25px;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}
.bascinfor {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 24px;
    // position: relative;
    .inputone {
      margin-right: 44px;
      position: relative;
      max-width: 1069px;
      // max-height: 110px;
      margin-left: 88px;
      margin-top: 44px;
      .words {
        position: absolute;
        right: 15px;
        // bottom: 5px;
        top: 130px;
        font-size: 14px;
        font-weight: 500;
        color: #333330;
      }
      .el-textarea__inner {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        margin-top: 44px;
        // margin: 23px 50px;
        border-radius: 8px;
        background-color: rgba(245, 246, 247, 1);
        padding: 11px 25px;
      }
      .el-textarea__inner::placeholder {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        line-height: 24px;
      }
      // .el-input__inner {
      //   &::-webkit-input-placeholder {
      //     /* WebKit browsers 适配谷歌 */
      //     color: red;
      //   }
      // }
      .upload {
        display: flex;
        height: 100px;
        // background-color: red;
        .allimg {
          position: relative;
          display: flex;
          .imgone {
            margin-top: 24px;
            width: 55px;
            height: 55px;
            border-radius: 8px;
            background-image: url(../../assets/image/px.png);
            background-size: 100%;
          }
          .cha {
            cursor: pointer;
            top: 15px;
            right: -9px;
            // right: 0;
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-image: url(../../assets/image/X.png);
            background-size: 100%;
          }
        }
        .uploadAnd {
          margin-top: 21px;
          .btwwo {
            cursor: pointer;
            .image {
              padding-top: 8px;
              width: 18px;
              height: 17px;
              // margin-top: 10px;
              margin-left: -60px;
            }
            .shangchuan {
              position: absolute;
              right: 20px;
              top: 7px;
              display: inline-block;
              margin-left: 10px;
              font-size: 14px;
              font-weight: 500;
              color: #2478ff;
              line-height: 24px;
            }
            width: 126px;
            height: 36px;
            border: none;
            background-color: #fff;
          }
          .btnone {
            cursor: pointer;
            position: absolute;
            right: 140px;
            .image {
              padding-top: 8px;
              width: 18px;
              height: 17px;
              // margin-top: 10px;
              margin-left: -60px;
            }
            .shangchuan {
              position: absolute;
              right: 20px;
              top: 7px;
              display: inline-block;
              margin-left: 10px;
              font-size: 14px;
              font-weight: 500;
              color: #2478ff;
              line-height: 24px;
            }
            width: 126px;
            height: 36px;
            border: 1px solid #2478ff;
            border-radius: 4px;
            background-color: #fff;
          }
          .btntwo {
            cursor: pointer;
            position: absolute;
            width: 126px;
            height: 36px;
            background: #2478ff;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            border: 0;
            right: 0;
          }
        }
      }
      .thinline {
        margin-top: 66px;
        // width: 1635px;
        border-top: 1px solid #878b92;
        margin-left: -50px;
        opacity: 0.2;
      }
      .bottom {
        margin-top: 31px;
        // width: 100px;
        // height: 100px;
        // background-color: #bfa;
        .header {
          display: flex;
          .avator {
            width: 41px;
            height: 41px;
            border-radius: 50%;
            // background-image: url(../../assets/image/px.png);
            background-size: 100%;
          }
          .id {
            margin-left: 8px;
            font-size: 14px;
            height: 41px;
            font-weight: bold;
            color: #333333;
            line-height: 41px;
          }
          .showCareer {
            margin-left: 7px;
            height: 41px;
            font-size: 12px;
            font-weight: 500;
            color: #666666;
            line-height: 41px;
          }
          .idThink {
            margin-left: 17px;
            height: 41px;
            font-size: 14px;
            font-weight: 500;
            color: #666666;
            line-height: 41px;
          }
        }
        .discuss {
          margin-left: 48px;
          margin-top: 23px;
          // width: 100px;
          width: 100%;
          // height: 100px;
          // background-color: orange;
          .discussmain {
            // background-color: red;
            width: 100%;
            display: flex;
            position: relative;
            .talkmain {
              margin-right: 25px;
              margin-top: 2px;
              font-size: 14px;
              font-weight: 500;
              color: #666666;
            }
            // .talk {
            //   position: absolute;
            //   right: 0;
            //   width: 23px;
            //   height: 23px;
            //   background-image: url(../../assets/image/talk.png);
            //   background-size: 100%;
            // }
          }
          .intime {
            margin-top: 11px;
            font-size: 14px;
            font-weight: 500;
            color: #999999;
          }
          .likeYou {
            margin-top: 15px;
            display: flex;
            .same {
              width: 14px;
              height: 14px;
            }
            .pinglun {
              background-image: url(../../assets/image/pinglun.png);
              background-size: 100%;
            }
            .dianzan {
              background-image: url(../../assets/image/dianzan2.png);
              background-size: 100%;
            }
            .count {
              margin-left: 7px;
              margin-top: -1px;
              font-size: 14px;
              font-weight: 500;
              color: #b3bdc4;
            }
          }
          .reply {
            display: flex;
            margin-top: 32px;
            // height: 100px;
            width: 100%;
            // background-color: lightpink;
            .sameava {
              width: 29px;
              height: 29px;
              border-radius: 50%;
            }
            .sameuser {
              margin-left: 14px;
              line-height: 29px;
              height: 29px;
              font-weight: bold;
              color: #333333;
              font-size: 14px;
            }
            .centerreply {
              height: 29px;
              font-size: 14px;
              font-weight: 500;
              color: #4a9cf8;
              line-height: 29px;
              margin-left: 23px;
              margin-right: 17px;
            }
            .avaone {
              // background-image: url(../../assets/image/px.png);
              background-size: 100%;
            }
            .avatwo {
              // background-image: url(../../assets/image/px.png);
              background-size: 100%;
            }
            .replytime {
              margin-left: 17px;
              height: 29px;
              font-size: 14px;
              font-weight: 500;
              color: #999999;
              line-height: 29px;
            }
          }
          .allreplyimg {
            display: flex;
            margin-top: 21px;
            .singleimg {
              margin-right: 7px;
              width: 65px;
              height: 65px;
              border-radius: 8px;
              background-image: url(../../assets/image/px.png);
              background-size: 100%;
            }
          }
          .mainreply {
            display: flex;
            margin-top: 16px;
            .replydetail {
              height: 23px;
              font-size: 14px;
              font-weight: 500;
              color: #666666;
              line-height: 23px;
              margin-right: 11px;
            }
          }
          .inreply {
            position: relative;
            margin-top: -22px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
</style>