<template>
  <!-- 学生详情 -->
  <div class="studentDetail" ref="tabs">
    <bar :tit="'学生记录'" :backPage="1"></bar>
    <div style="height: 50px;"></div>
    <!-- 顶部学生信息开始 -->

    <div class="top">
      <div class="UserInfo" style="flex: 1;">
        <div class="sInfo">
          <div class="userName">{{ studentInfo.name }}</div>
        </div>
        <div class="cla">{{ studentInfo.cname }}</div>
        <!-- <div class="shade"></div> -->
        <!-- 遮罩层 -->
        <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>

        <selectStyle
          ref="claSel"
          @shadeIsShow="shadeIsShow"
          @update-search="handleUpdateSearch"
          :listCont="termList"
          :tit="'请选择学期'"
          :choose="termData"
        ></selectStyle>

        <div class="dataNum">本学期共计{{ conList.length }} 条记录</div>
      </div>

      <div class="rig">
        <div class="topBtnS" v-if="this.stuList.length">
          <div>
            <img class="img" v-if="num" @click="upStu" src="../../assets/images/eva/lefttt.png" alt="" />
          </div>
          <div>
            <img
              class="img"
              v-if="num != stuList.length - 1"
              @click="nextStu"
              src="../../assets/images/eva/rightttt.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 顶部学生信息结束 -->

    <!-- 观察记录开始 -->
    <div style="position: relative;top: -15px;">
      <div class="observe_tit">
        <div class="left">
          <img class="img" src="../../assets/images/eva/Frame (4).png" alt="" />
          <div>观察记录</div>
        </div>
        <div style="display: flex;justify-content: flex-end;align-items: center;">
          <selectStyle
            ref="weiSel"
            @shadeIsShow="shadeIsShow"
            @update-search="handleUpdateSearch"
            :listCont="filtrate"
            :tit="'请选择纬度'"
            :choose="filtrateData"
          ></selectStyle>
          <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" />
        </div>
      </div>
      <!-- <div class="observe_box">
        <div
          class="observe_boxCon"
          v-for="(i, index) in filtrate"
          @click="addFil(i.id, index)"
          :class="{ active: activeItem === index }"
          :key="index"
        >
          <div class="txt">{{ i.name }}</div>
        </div>
        </div>
      </div> -->
      <!-- 观察内容开始 -->
      <van-swipe-cell :swipeable="true" v-show="TermRecord.length" v-for="(i, index) in TermRecord" :key="index">
        <div class="observe_content" @click.stop="recordContinue(i.rid)">
          <div class="observe_contentTit">
            {{ i.recordTit ? i.recordTit : '暂未设置标题' }}
            <!-- 观察内容 -->
          </div>
          <div class="observe_contentBir">
            <div>{{ i.username }}</div>
            <div>{{ i.recordDate }}</div>
          </div>
          <div class="observe_contentTxt">
            {{ i.recordContent }}
          </div>
        </div>
        <template #right>
          <div class="observe_contentDel" @click="delPop(i.rid)">
            <img src="../../assets/images/eva/del.png" style="width: 20px;height: 20px;" alt="" />
          </div>
          <!-- <van-button square text="删除" type="danger" class="delete-button" /> -->
        </template>
      </van-swipe-cell>
      <div v-show="!TermRecord.length" style="width: 100%;height: 10px;background-color: #F0F2F5;"></div>
      <div v-show="!TermRecord.length" class="observe_content observe_content2">
        <img src="../../assets//images/eva/rqq.png" alt="" />
        <div class="tit">暂无内容</div>
        <div class="tit2" @click="addRecord">快去添加新记录吧 ></div>
      </div>

      <!-- 观察内容结束 -->
    </div>

    <!-- 观察记录结束 -->

    <pop v-show="isShowMask">
      <template v-slot:tit>确定</template>
      <template v-slot:con>确定删除吗</template>
      <template v-slot:btn1>
        <div class="btn" style="color: rgba(136,136,136,1);" @click="isShowMask = false">取消</div>
      </template>
      <template v-slot:btn2>
        <div class="btn" style="color: rgba(251,67,25,1);" @click="delCon">确认</div>
      </template>
    </pop>

    <!-- 添加记录按钮开始 -->
    <div class="addRecord" @click="addRecord">
      <img src="../../assets/images/eva/add.png" alt="" />
    </div>
    <!-- 添加记录按钮结束 -->
  </div>
</template>

<script>
import { selectStudentDetail } from '@/api/eva'
import { selectClassStudent } from '@/api/eva'
// import { selectVeiDoo } from '@/api/eva'
import { selectSTEType } from '@/api/eva'

import { selectRecord } from '@/api/eva'
import { selectTerm } from '@/api/eva'

import { updateRecord } from '@/api/eva'
// 单选
import selectStyle from './components/selectStyle.vue'
import bar from './components/bar.vue'
// 弹窗组件
import pop from './components/pop.vue'
export default {
  components: {
    bar,
    pop,
    selectStyle
  },
  data() {
    return {
      // 遮罩层
      isSelectShow: false,

      termId: '',

      activeItem: null,
      // 这个是本学期总条数,单独写一个是因为他不因为观察记录的选择而改变
      conList: [],
      // 筛选项
      filtrate: [],
      // 纬度筛选项选择数据
      filtrateData: [''],
      // 学生信息
      studentInfo: {},

      // 请求筛选条件
      fil: [],

      // 班级学生列表
      stuList: [],
      // 学生id
      stuId: '',
      classId: '',

      // 传参班级数据
      classInfo: this.$route.query,
      num: null,

      // 弹窗的
      isShowMask: false,
      delRid: '',

      // 学期列表
      termList: [],
      // 学期筛选框所选择的数据
      termData: [],

      // 记录渲染数据
      TermRecord: [],

      timeOutEvent: 0,
      scorllTaps: null
    }
  },
  methods: {
    // 获取学生信息
    getData() {
      const data = {
        uid: this.stuId
      }

      selectStudentDetail(data).then(res => {
        this.studentInfo = res[0][0]
        // console.log('获取学生信息', this.studentInfo)
      })

      // 获取所有学生记录总条数
      this.selectCordS()
    },

    // 获取学期记录总条数
    selectCordS() {
      const data4 = {
        uid: this.stuId,
        trm: this.termData[0],
        txt: ''
      }
      // console.log('data4', data4)
      selectRecord(data4).then(res => {
        // console.log('获取所有学生记录', res[0])
        this.conList = res[0]
      })
    },

    // 获取筛选框
    selectVei() {
      const data3 = {
        org: this.$store.state.user.userinfo.org,
        oid: this.$store.state.user.userinfo.organizeid
      }
      // console.log('获取筛选项22222222', data3)
      selectSTEType(data3).then(res => {
        // this.filtrate = res[0]
        var ftype = res[0] //公共父级分类
        var stype = res[1] //公共子级分类
        var sctype = res[2] //该学校子级分类
        var fctype = res[3] //该学校父级分类
        var fotype = res[4] //组织父级分类
        var sotype = res[5] //组织子级分类
        var allfType = []
        var allsType = []
        if (fotype.length == 0 && sotype.length == 0) {
          if (fctype.length == 0 && sctype.length == 0) {
            for (var i = 0; i < ftype.length; i++) {
              allfType.push(ftype[i])
            }
            for (var i = 0; i < stype.length; i++) {
              allsType.push(stype[[i]])
            }
          } else {
            for (var i = 0; i < fctype.length; i++) {
              allfType.push(fctype[i])
            }
            for (var i = 0; i < sctype.length; i++) {
              allsType.push(sctype[[i]])
            }
          }
        } else {
          for (var i = 0; i < fotype.length; i++) {
            allfType.push(fotype[i])
          }
          for (var i = 0; i < sotype.length; i++) {
            allsType.push(sctysotypepe[[i]])
          }
        }
        this.filtrate = allsType
        console.log('allsType', allsType)
      })
    },

    // 获取班学生列表
    getStuList() {
      this.stuList = []
      const data2 = {
        cid: this.classId
      }
      selectClassStudent(data2).then(res => {
        res[0].forEach(e => {
          this.stuList.push(e.id)
        })
        // console.log('获取班学生列表', this.stuList)
        // 查询学生在数组中的位置
        this.num = this.stuList.indexOf(this.stuId)
      })
    },

    // 获取学期筛选框
    selTerm() {
      selectTerm().then(res => {
        // console.log('获取学期筛选框', res)
        res[0].forEach(e => {
          if (e.defaultC === 1) {
            this.termData.push(e.id)
            this.termId = e.id
          }
        })
        // console.log('this.termData', this.termData)
        this.termList = res[0]
        this.getData()
        this.getTermRecord()

        // 获取左右切换的学生列表
        // console.log('this.classId', this.classId)
        if (this.classId) {
          this.getStuList()
        }

        // console.log('this.termList', this.termList)
      })
    },
    // 上一个
    upStu() {
      this.filtrateData = ['']
      // 判断学生在数组中的位置，获取班学生列表有初始值
      this.activeItem = null
      // 刷新学期
      this.termData.splice(0, 1, this.termId)

      this.num = this.num - 1
      if (this.num >= 0) {
        this.stuId = this.stuList[this.num]
        localStorage.setItem('userId', this.stuList[this.num])

        this.getTermRecord()
        // 更新学生信息
        selectStudentDetail({ uid: this.stuId }).then(res => {
          this.studentInfo = res[0][0]
        })
      }
      this.selectCordS()
    },
    // 下一个
    nextStu() {
      this.filtrateData = ['']

      this.activeItem = null
      // 刷新学期
      this.termData.splice(0, 1, this.termId)

      this.num = this.num + 1
      if (this.num <= this.stuList.length - 1) {
        this.stuId = this.stuList[this.num]
        // console.log(this.stuId)
        localStorage.setItem('userId', this.stuList[this.num])

        this.getTermRecord()

        selectStudentDetail({ uid: this.stuId }).then(res => {
          this.studentInfo = res[0][0]
          // console.log(this.studentInfo)
        })
      }
      this.selectCordS()
    },
    // 左滑动删除弹框显示
    delPop(e) {
      this.delRid = e
      this.isShowMask = true
    },
    // 删除数据
    delCon() {
      // return console.log(this.delRid)
      const data = [{ rid: this.delRid }]
      updateRecord(data).then(res => {
        // console.log('删除数据', res)

        if (res === 1) {
          this.$toast({
            message: '删除成功',
            type: 'success'
          })
          this.isShowMask = false
          this.getTermRecord()

          setTimeout(() => {
            this.getData()
          }, 500)
        } else {
          this.$toast({
            message: '删除失败',
            type: 'fail'
          })
        }
      })
    },
    // 筛选按钮
    addFil(e, index) {
      // 同一个点击第二次时取消选择
      if (this.activeItem === index) {
        this.activeItem = null
        e = ''
      } else {
        this.activeItem = index
      }

      const data4 = {
        uid: this.stuId,
        trm: this.termData[0],
        txt: e
      }
      // console.log(data4)
      selectRecord(data4).then(res => {
        // console.log('获取所有学生记录', res)
        this.TermRecord = res[0]
      })
    },
    // 父组件调用子组件方法，选择学期后关闭select框
    fuClick1() {
      this.isSelectShow = false
      this.selectCordS()
      this.$refs.claSel.close()
      this.$refs.weiSel.close()
    },

    // 子组件调用父组件方法显示遮罩层
    shadeIsShow() {
      this.isSelectShow = true
    },
    // 子组件调用父组件，进行学期查询
    handleUpdateSearch() {
      this.isSelectShow = false
      // 获取筛选学生记录
      this.getTermRecord()
      // 获取学期记录总条数
      this.selectCordS()
    },
    // 获取所有学生记录
    getTermRecord() {
      const data4 = {
        uid: this.stuId,
        trm: this.termData[0],
        txt: this.filtrateData[0]
      }
      // return console.log('getTermRecord', data4)
      // console.log(' 获取所有学生记录aaaaaaaaaaaaaaaaaaaaaaa', data4)
      selectRecord(data4).then(res => {
        // console.log('获取所有学生记录', res)
        this.TermRecord = res[0]
      })
    },
    // 添加记录按钮跳转
    addRecord() {
      // this.$router.push(`/studentEvaluate?shareShow=${0}&cid=${this.$route.query.cid}`)
      this.$router.push(`/studentEvaluate?shareShow=${0}`)
    },
    // 已经写过的记录卡片点击跳转
    recordContinue(e) {
      // this.$router.push(`/studentEvaluate?shareShow=${1}&rid=${e}&cid=${this.$route.query.cid}`)
      this.$router.push(`/studentEvaluate?shareShow=${1}&rid=${e}`)
    }
    // touchStart(e) {
    //   this.timeOutEvent = setTimeout(() => {
    //     this.timeOutEvent = 0
    //     const target = this.$refs.loop[e]
    //     target.style.display = 'block'
    //     if (e % 4 !== 0) {
    //       console.log(0)
    //       target.style.right = '0'
    //     }
    //   }, 500)
    //   return false
    // },
    // // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    // gtouchmove() {
    //   clearTimeout(this.timeOutEvent) // 清除定时器
    //   this.timeOutEvent = 0
    //   // alert('取消了')
    // },
    // touchend(e) {
    //   // 清除定时器

    //   clearTimeout(this.timeOutEvent)
    //   console.log(this.timeOutEvent)
    //   if (this.timeOutEvent !== 0) {
    //     // 这里写要执行的内容（尤如onclick事件）
    //     console.log('你这是点击，不是长按')
    //   } else {
    //     setTimeout(() => {
    //       const target = this.$refs.loop[e]
    //       target.style.display = 'none'
    //     }, 1000)
    //   }
    // },

    //   selectRecord(data4).then(res => {
    //     console.log('获取所有学生记录', res[0])
    //     this.conList = res[0]
    //   })
    //   // this.getTermRecord()
    // },
  },
  beforeRouteEnter(to, from, next) {
    document.addEventListener(
      'touchmove',
      function(event) {
        event.preventDefault()
      },
      false
    )
    next(vm => {})
  },
  mounted() {},
  created() {
    this.stuId = localStorage.getItem('userId')
    this.classId = localStorage.getItem('classId')
    // console.log(this.classId)
    this.selTerm()
    // 获取筛选框
    this.selectVei()
    // console.log('this.$route.query', this.$route.query)
  }
}
</script>

<style lang="scss" scoped>
.loopList {
  height: 20px;
  line-height: 20px;
  display: none;
  position: absolute;
  min-width: 80px;
  text-wrap: nowrap;
  font-size: 12px;
  border-radius: 5px;
  padding: 0 5px;
  background-color: #309cd6;
  top: -80%;
  color: #fff;
  // left: 0;
}
.goods-card {
  margin: 0;
  background-color: #fff;
}
.backPage {
  // background-color: aquamarine;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  z-index: 99;
}
// .shade {
//   background-color: #005ccd;
//   position: absolute;
//   width: 100%;
//   height: 100vh;
// }
.delete-button {
  height: 100%;
}
.observe_contentDel {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.observe_content {
  // margin: 0 10px;
  width: 100%;
  min-height: 95px;
  // max-height: 95px;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
  background-color: #fff;

  .observe_contentTit {
    //   line-height: 20px;
    box-sizing: border-box;
    padding: 8px 0;
    font-weight: 550;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .observe_contentBir {
    display: flex;
    // color: rgba(79, 79, 79, 1);
    color: rgba(0, 0, 0, 0.4);
    font-size: 10px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .observe_contentBir :first-child {
    margin-right: 10px;
  }
  .observe_contentTxt {
    margin-top: 5px;
    // color: rgba(16, 16, 16, 1);
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.studentDetail {
  width: 100%;
  min-height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
  //   顶部学生信息开始
  .top {
    margin: auto;
    width: 100vw;
    height: 150px;
    background-color: #005ccd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    color: #fff;
    .rig {
      display: flex;
      width: 40%;
      height: 100%;
      justify-content: space-around;

      .topBtnS {
        // flex: 1;
        width: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 30px;
          height: 30px;
        }
      }
    }

    .UserInfo {
      display: flex;
      flex-direction: column;
      // height: 55px;
      justify-content: space-between;
      .sInfo {
        display: flex;
        .userName {
          width: 120px;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-right: 5px;
          height: 20px;
          line-height: 20px;
          color: #ffffff;
          font-size: 20px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
      }
      .cla {
        overflow: hidden;
        width: 100%;
        // overflow-wrap: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 20px;
        line-height: 30px;
        font-size: 12px;
        color: #ffffff;
      }
      .dataNum {
        // width: 150px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        font-size: 16px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }
  }
  //   顶部学生信息结束

  //   观察记录开始
  .observe_tit {
    // position: relative;
    // top: -15px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    align-items: center;
    border-radius: 15px 15px 0 0;
    // transform: translate(0, -10px);
    background-color: #fff;
    justify-content: space-between;
    font-weight: bold;
    .left {
      display: flex;
      align-items: center;
    }
    .img {
      width: 26px;
    }
  }
  .observe_box {
    width: 100%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .observe_boxCon {
      position: relative;
      // width: calc(100% / 4 - (5px * 3));
      // width: calc(100% / 5);
      width: auto;
      height: 30px;
      border-radius: 4px;
      background-color: #fff;
      color: rgba(153, 152, 152, 1);
      font-size: 12px;
      font-family: Roboto;
      border: 1px solid rgba(231, 231, 231, 1);
      margin-bottom: 8px;
      margin-right: 10px;
      box-sizing: border-box;
      padding: 5px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      .txt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    // .observe_boxCon:nth-child(4n) {
    //   margin-right: 0;
    // }
    .active {
      background-color: #e0eafb;
      color: #0061ff;
    }
    // .observe_boxSelect {
    //   width: 100%;
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    //   flex-wrap: wrap;

    //   //   height: 100%;
    // }
  }
  //   观察记录结束

  //    观察内容开始

  .observe_content2 {
    margin-top: 10px;
    border: none;
    height: 250px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    .tit {
      margin: 5px 0;
      color: rgba(0, 0, 0, 0.4);
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
    }
    .tit2 {
      color: #3681fc;
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
    }

    img {
      width: 80px;
      height: 80px;
    }
  }
  // 观察内容结束

  // 添加记录按钮开始
  .addRecord {
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 14px;
    font-family: Microsoft Yahei;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    img {
      width: 16px;
      height: 16px;
    }
  }
  //  添加记录按钮结束
}
</style>
