<template>
  <!-- 学生评价 -->
  <div class="studentEvaluate" @click="col">
    <bar :tit="'学生评价'" :num="1">
      <template v-slot:btn>
        <div v-if="!shareShow" style="font-size: 16px;font-weight: normal;" @click="save">发布</div>
        <div v-else style="font-size: 16px;font-weight: normal;" @click="amend">修改</div>
      </template>
    </bar>

    <div style="height: 50px;z-index: 30;overflow: hidden;"></div>

    <!-- <div class="bigBlock"> -->
    <div class="bigBlock" style="">
      <div
        v-if="placeShow"
        @click="placeShow = false"
        style="position:absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;"
      ></div>
      <div class="claName">
        <div class="tit">学生</div>
        <div class="studentName">{{ studentInfo.name }}</div>
      </div>
      <div class="claName">
        <div class="tit">班级</div>
        <div class="studentName">{{ studentInfo.cname }}</div>
      </div>

      <div class="claName">
        <!-- <div class="relevanceStudent"> -->
        <div class="tit">关联</div>
        <div class="studentName">
          <selects ref="StuSel" :listContent="studentList" :tit="'请选择关联学生'" :choosePer="selectSData"></selects>
        </div>
        <!-- </div> -->
      </div>
      <div class="claName">
        <div class="tit">学期</div>
        <div class="studentName" style="position: relative;">
          <radioSelect ref="claSel" :listCont="termList" :tit="'请选择学期'" :choose="termData"></radioSelect>
          <div v-show="term" style="position: absolute;bottom: -100%; color: red;font-size: 10px;">请选择学期</div>
        </div>
      </div>
      <div v-show="term" style="height: 10px;"></div>

      <div class="claName">
        <div class="tit">维度</div>
        <div class="studentName" style="position: relative;">
          <selects ref="WeiSel" :listContent="weiList" :tit="'请选择评价维度'" :choosePer="selectWData"></selects>
          <div v-show="wei" style="position: absolute;bottom: -100%; color: red;font-size: 10px;">请选择评价维度</div>
        </div>
      </div>
      <div v-show="wei" style="height: 10px;"></div>

      <div class="claName" style="position: relative;">
        <div class="tit">时间</div>

        <div class="studentName2">
          <van-field
            class="xx"
            clickable
            name="datetimePicker"
            label=""
            placeholder="请选择时间"
            @click="choseTime"
            input-align="left"
            :value="visitTime"
            :rules="[{ required: true, message: '' }]"
            readonly
          >
          </van-field>
          <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
              @cancel="cancel"
              @confirm="onConfirm"
              v-model="currentDate"
              type="datetime"
              :min-date="minDate"
              :max-date="maxDate"
            />
          </van-popup>
        </div>
        <img class="rl" src="../../assets/images/eva/rl.png" alt="" />
        <div
          v-show="tim"
          style="position: absolute;bottom: 0;transform: translate(0,100%); left: 40px; color: red;font-size: 10px;"
        >
          请设置时间
        </div>
      </div>
      <div v-show="tim" style="height: 10px;"></div>

      <div class="claName" style="position: relative;">
        <div class="tit">地点</div>
        <div class="inpBlock studentName">
          <!-- <radioSelect ref="claSel" :listCont="placeList" :tit="'请选择地点'" :choose="termData"></radioSelect> -->
          <!-- <div > -->
          <!-- :readonly="placeId != 1" -->
          <input type="text" v-model="place" @click="selectPlace" class="inp" placeholder="请选择或输入" />
          <!-- </div> -->

          <div class="list" v-if="placeShow">
            <div class="ol" v-for="(i, index) in placeList" :key="index + 'w'" @click="cho(i)">
              <div :style="{ color: placeId == i.id ? '#3894FF' : '' }">{{ i.name }}</div>
              <div>
                <img :style="{ display: placeId == i.id ? '' : 'none' }" src="@/assets/images/eva/dui.png" alt="" />
              </div>
            </div>

            <div class="ol" @click="cho({ name: '', id: '1' })">
              <div :style="{ color: placeId == 1 ? '#3894FF' : '' }">
                其他
              </div>
              <div>
                <img :style="{ display: placeId == 1 ? '' : 'none' }" src="@/assets/images/eva/dui.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="claName">
        <div style="width: 70px;">观察内容</div>
        <div class="inpBlock studentName">
          <input type="text" v-model="observeCon" class="inp" placeholder="请输入" />
        </div>
      </div>
      <div class="claName">
        观察记录
      </div>
      <div class="EvaluateTxt">
        <textarea name="" id="" style="width: 100%;height: 100%;border: none;" v-model="recordCon"></textarea>
      </div>

      <!-- 上传图片开始 -->
      <div class="uploadImgTit">
        <div>图片上传</div>
        <!-- <div>{{ imgList.length }}/10</div> -->
      </div>
      <div class="uploadImg">
        <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
      </div>
      <!-- 上传图片结束 -->
    </div>
    <!-- </div> -->
    <!-- 按钮 -->
    <div class="submitBtn">
      <!-- <div class="btn" @click="isShowMask = true">删除</div> -->
      <div class="btn" v-if="shareShow" @click="repPop">重复添加</div>
      <div class="btn" v-if="shareShow" @click="repetitionSave">添加新纪录</div>
      <div class="btn" v-if="!shareShow" @click="save">发布并返回</div>
      <div class="btn" v-else @click="amend">修改并返回</div>
    </div>

    <pop v-show="isShowMask">
      <template v-slot:tit>提示</template>
      <template v-slot:con>确定{{ shareShow ? '修改' : '发布' }}吗</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" v-if="!shareShow" style="color: rgba(251,67,25,1);" @click="uploadRecord">确认</div>
        <div class="btn" v-else style="color: rgba(251,67,25,1);" @click="updateRecord">确认</div>
      </template>
    </pop>

    <pop v-show="repShowMask">
      <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="repShowMask = false">取消</div>
      </template>
      <template v-slot:btn2>
        <div class="btn" style="color: rgba(251,67,25,1);" @click="repAddRecord">确认</div>
      </template>
    </pop>
  </div>
</template>

<script>
// 导航栏组件
import bar from './components/bar.vue'
// 多选框组件
import selects from './components/selects.vue'
// 单选
import radioSelect from './components/radioSelect.vue'

// 上传图片组件
import imageComponent from './components/ImageComponent.vue'
// 弹窗组件
import pop from './components/pop.vue'

import { insertRecord } from '@/api/eva'
// import { selectClassStudent } from '@/api/eva'
// import { selectVeiDoo } from '@/api/eva'
import { selectRecordDetail } from '@/api/eva'
import { updateRecordData } from '@/api/eva'
import { selectTerm } from '@/api/eva'
import { selectStudentDetail } from '@/api/eva'
import { selectManyClassStudent } from '@/api/eva'
import { selectSTEType } from '@/api/eva'
import { selectSTEPlace } from '@/api/eva'

import '@/utils/aws-sdk-2.235.1.min.js'

export default {
  components: {
    bar,
    selects,
    imageComponent,
    pop,
    radioSelect
  },

  data() {
    return {
      studentInfo: {},

      // 重复添加弹出框判断
      repShowMask: false,
      // 学生信息
      stuName: {},
      // 关联选项
      studentList: [],
      // 纬度选项
      weiList: [],
      termList: [],
      placeList: [],
      // 遮罩层
      placeShow: false,
      // 所选数据
      // 学生
      selectSData: [],
      // 纬度
      selectWData: [],
      // 学期
      termData: [],
      // 格式化后记录时间
      visitTime: '',
      // 地点
      place: '',
      placeId: 1,

      // 观察内容
      observeCon: '',
      // 观察记录
      recordCon: '',
      // 图片列表
      imgList: [],

      isShowMask: false, // 控制删除弹框的显示与隐藏
      isShowMask2: false, // 控制保存弹框的显示与隐藏
      // 是否显示分享和继续记录按钮
      shareShow: 0,
      // 未格式化的时间
      currentDate: new Date(),
      // 时间弹出框
      showPicker: false,
      minDate: '',
      maxDate: '',

      // 时间，学期未选择，提示选择红字警报
      wei: false,
      tim: false,
      term: false
    }
  },

  methods: {
    getData() {
      // 获取学生信息
      const stuData = {
        uid: localStorage.getItem('userId')
      }

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

        // 获取班学生列表
        const data2 = {
          cid: this.studentInfo.classid,
          uid: localStorage.getItem('userId')
        }
        // console.log('获取班学生列表', data2)
        selectManyClassStudent(data2).then(res => {
          this.studentList = res[0]
        })
      })
      // 获取纬度筛选框

      this.getWei()

      this.getTermData()
      // selectVeiDoo().then(res => {
      //   this.weiList = res[0]
      //   // console.log('this.weiList', this.weiList)
      // })

      // console.log('获取筛选项22222222', data3)

      // 获取学期筛选框

      // 获取班学生列表
      // const data2 = {
      //   cid: this.$route.query.cid
      // }
      // selectClassStudent(data2).then(res => {
      //   res[0].forEach(e => {
      //     if (e.id === this.$route.query.uid) {
      //       this.stuName = e
      //     } else {
      //       this.studentList.push(e)
      //     }
      //   })
      //   console.log('this.studentList', this.studentList)
      // })
    },
    // 获取学期筛选框
    getTermData() {
      selectTerm().then(res => {
        // console.log('获取学期筛选框', res)
        res[0].forEach(e => {
          // console.log(e)
          if (e.defaultC === 1) {
            this.termData.push(e.id)
          }
        })
        this.termList = res[0]
      })
    },
    // 获取纬度筛选框
    getWei() {
      const data3 = {
        org: this.$store.state.user.userinfo.org,
        oid: this.$store.state.user.userinfo.organizeid
      }
      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]])
          }
        }
        // console.log('分类分类分类', res)
        this.weiList = allsType
      })
    },
    // 调用子元素selects中的方法隐藏选项列表
    col() {
      this.$refs.StuSel.fuClick()
      this.$refs.WeiSel.fuClick()
      this.$refs.claSel.fuClick()
    },
    // 选择照片
    getImage(imgList) {
      // console.log('哒哒哒啊啊的', imgList)

      this.imgList = imgList
      this.$forceUpdate()
    },
    // 保存前进行判断
    save() {
      // 判断是否填写完整，是否让他继续往下走
      let isOk = 0
      if (this.selectWData.length === 0) {
        this.wei = true
        isOk = 1
      }
      if (this.visitTime === '') {
        this.tim = true
        isOk = 1
      }
      if (isOk === 1) return

      this.isShowMask = true
    },
    // 重复添加
    repPop() {
      this.recordCon = ''
      this.imgList = []
      this.getPresentDate()
    },
    // 添加新纪录进行判断
    repetitionSave() {
      let isOk = 0

      if (this.selectWData.length === 0) {
        this.wei = true
        isOk = 1
      }
      if (this.visitTime === '') {
        this.tim = true
        isOk = 1
      }
      if (isOk === 1) return

      this.repShowMask = true
    },
    getRecordPlace() {
      const data = {
        org: this.$store.state.user.userinfo.org,
        oid: this.$store.state.user.userinfo.organizeid
      }
      selectSTEPlace(data).then(res => {
        // this.filtrate = res[0]
        console.log('getRecordPlace', res)
        var ptype = res[0] // 公共子级分类
        var pctype = res[1] // 该学校子级分类
        var potype = res[2] // 组织子级分类

        if (potype.length > 0) {
          this.placeList = potype
        } else if (pctype.length > 0) {
          this.placeList = pctype
        } else {
          this.placeList = ptype
        }

        // 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]])
        //   }
        // }
        // console.log('分类分类分类', res)
        // this.weiList = allsType
      })
    },
    selectPlace() {
      this.placeShow = true
    },
    cho(i) {
      // console.log('i', i)
      this.place = i.name
      this.placeId = i.id
    },
    // 修改前判断
    amend() {
      let isOk = 0
      // console.log(this.$store.state);
      if (this.selectWData.length === 0) {
        this.wei = true
        isOk = 1
      }
      if (this.visitTime === '') {
        this.tim = true
        isOk = 1
      }
      if (isOk === 1) return

      this.isShowMask = true
    },
    // 添加新纪录
    repAddRecord() {
      this.uploadRecord()
    },
    // 上传评价
    uploadRecord() {
      // 添加新纪录，关联人不能包含自己，要将自己删除
      // this.selectSData.indexOf()

      const data = [
        {
          // uid: localStorage.getItem('userId'),
          uid: this.studentInfo.userid,
          tid: this.$store.state.user.userinfo.userid,
          contact: this.selectSData.join(','),
          type: this.selectWData.join(','),
          timing: this.visitTime,
          place: this.place,
          observeCon: this.observeCon,
          recordCon: this.recordCon,
          imgList: this.imgList.join(','),
          term: this.termData[0],
          pid: this.placeId
        }
      ]
      // return console.log(data)
      this.isShowMask = false

      // return console.log(data)

      insertRecord(data).then(res => {
        // console.log(res)
        if (res === 1) {
          this.$toast({
            message: '发布成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.replace('/studentDetail')

            // if (this.$route.query.ser || 0) {
            //   this.$router.replace(`/searchstuDetail?cid=${this.$route.query.cid}&cName=${this.$route.query.CName}`)
            // } else {
            //   this.$router.replace(`/studentDetail?cid=${this.$route.query.cid}&cName=${this.$route.query.CName}`)
            // }
          }, 1000)
        }
      })
      // console.log('上传评价', data)
    },
    // 修改评价
    updateRecord() {
      const data = [
        {
          rid: this.$route.query.rid,
          tid: this.$store.state.user.userinfo.userid,
          contact: this.selectSData.join(','),
          type: this.selectWData.join(','),
          timing: this.visitTime,
          place: this.place,
          observeCon: this.observeCon,
          recordCon: this.recordCon,
          imgList: this.imgList.join(','),
          term: this.termData[0],
          pid: this.placeId
        }
      ]
      // return console.log(data);
      updateRecordData(data).then(res => {
        // console.log(res)
        if (res === 1) {
          this.$toast({
            message: '修改成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.replace('/studentDetail')

            // if (this.$route.query.ser || 0) {
            //   this.$router.replace(`/studentDetail?cid=${this.$route.query.cid}&cName=${this.$route.query.CName}`)
            // } else {
            //   this.$router.replace(`/studentDetail?cid=${this.$route.query.cid}&cName=${this.$route.query.CName}`)
            // }
          }, 1000)
        }
      })
    },
    // 填写页面数据
    getRecord() {
      this.getWei()

      this.getTermData()
      const data = {
        id: this.$route.query.rid
      }
      // console.log('getRecord', this.$route.query.rid)
      selectRecordDetail(data).then(res => {
        console.log('获取单个学生记录详情', res[0][0])
        const allData = res[0][0]
        if (allData.contact !== '') {
          this.selectSData = allData.contact.split(',')
        }
        if (allData.type !== '') {
          this.selectWData = allData.type.split(',')
        }
        this.studentInfo.name = allData.name
        this.studentInfo.cname = allData.cname
        this.studentInfo.classid = allData.classid
        this.studentInfo.userid = allData.sid
        this.placeId = allData.placeId
        this.visitTime = allData.recordDate
        this.place = allData.place
        this.recordCon = allData.recordCon
        this.observeCon = allData.recordTit
        this.recordCon = allData.recordContent
        if (allData.recordImg !== '') {
          this.imgList = allData.recordImg.split(',')
        }
        this.termData = [allData.term]

        const data2 = {
          cid: this.studentInfo.classid,
          uid: allData.sid
        }
        // console.log('获取班学生列表', data2)
        selectManyClassStudent(data2).then(res => {
          this.studentList = res[0]
        })

        // console.log('selectWData', this.selectWData)
      })
    },
    // 获取当前时间
    getPresentDate() {
      const currentTime = new Date()
      const year = currentTime.getFullYear()
      let month = currentTime.getMonth() + 1 // 月份从0开始，因此需要加1
      month = (month < 10 ? '0' : '') + month
      let day = currentTime.getDate()
      day = (day < 10 ? '0' : '') + day

      let hours = currentTime.getHours()
      hours = (hours < 10 ? '0' : '') + hours

      let minutes = currentTime.getMinutes()
      minutes = (minutes < 10 ? '0' : '') + minutes

      console.log(year, month, day, hours, minutes)
      this.visitTime = `${year}-${month}-${day} ${hours}:${minutes}`
      console.log(this.visitTime)
    },

    onConfirm() {
      this.showPicker = false

      // this.currentDate是选中的时间，赋值给date
      var date = this.currentDate
      var seperator1 = '-'
      var seperator2 = ':'
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var h = date
        .getHours()
        .toString()
        .padStart(2, '0')
      var m = date
        .getMinutes()
        .toString()
        .padStart(2, '0')

      this.currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + h + seperator2 + m

      // 把格式化后的日期赋值给visitTime，就会显示到页面
      this.visitTime = this.currentdate
    },
    cancel() {
      this.showPicker = false
      this.currentDate = new Date()
    },
    choseTime() {
      this.showPicker = true
      // 日期选择的最小日期
      this.minDate = new Date(2020, 0, 1)
      // 日期选择的最大日期
      this.maxDate = new Date(2099, 11, 1)
    }
  },
  watch: {
    selectWData(val) {
      // console.log('val', val)
      if (val.length === 0) {
        this.wei = true
      } else {
        this.wei = false
      }
    },
    termData(val) {
      if (val === '') {
        this.term = true
      } else {
        this.term = false
      }
    },
    visitTime(val) {
      // console.log('val', val)
      if (val === '') {
        this.tim = true
      } else {
        this.tim = false
      }
    }
  },

  created() {
    this.getRecordPlace()
    // 是否显示分享和继续记录按钮。添加按钮进来不显示
    this.shareShow = this.$route.query.shareShow * 1
    // console.log(this.shareShow)
    if (this.$route.query.shareShow * 1 === 1) {
      // console.log('aaaaaaaaaaaaaaaaaaaaa')
      this.getRecord()
    } else {
      this.getData()
    }
    // console.log(this.$route.query)
  }
}
</script>

<style lang="scss" scoped>
.studentEvaluate {
  font-size: 14px;
  z-index: 1;
  position: relative;
  // min-height: 100vh;
  background-image: linear-gradient(to bottom, #005ccd 1%, #005ccd 12%, #f6f5f8 35%, #f6f5f8 100%);
  .rl {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 0px;
    width: 25px;
    height: 25px;
  }
  .bigBlock {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 15px;
    // position: relative;
    z-index: 1;
    // scroll-behavior: auto;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 10px;
  }
  // 弹窗样式
  .mask {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 169.42px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    font-family: Roboto;
    display: flex;
    flex-direction: column;
    .maskTit {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .maskCon {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .maskBtn {
      width: 100%;
      height: 50px;
      display: flex;
      .btn {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .claName {
    width: 100%;
    min-height: 40px;
    margin: 7px auto;
    color: #101010;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tit {
      width: 40px;
      min-height: 40px;
      display: flex;
      align-items: center;
    }
    .studentName {
      flex: 1;
      width: 100%;
      min-height: 40px;
      line-height: 40px;
      // display: flex;
      // align-items: center;
      border-bottom: 1px solid #e7e7e7;
    }
    .studentName2 {
      flex: 1;
      width: 100%;
      min-height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;
    }
    /deep/ .van-cell {
      padding: 0;
      width: 100%;
      height: 100%;
      border: none;
      flex: 1;
    }
    .shareBtn {
      width: 80px;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      background-color: rgba(164, 173, 179, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      text-align: center;
      font-family: Microsoft Yahei;
    }
    .inpBlock {
      // border: 1px solid rgba(187, 187, 187, 1);
      position: relative;
      height: 100%;
      flex: 1;
      .list {
        position: absolute;
        left: 0;
        top: calc(100% + 10px);
        max-height: 220px;
        overflow-y: scroll;
        background-color: #fff;
        width: 100%;
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
        z-index: 30;
        border-radius: 8px;
        .ol {
          height: 40px;
          line-height: 40px;
          width: 100%;
          background-color: #fff;
          box-sizing: border-box;
          padding: 0px 10px;
          display: flex;
          justify-content: space-between;
        }
        // .ol:hover {
        //   background-color: #f3f6f9;
        // }
      }
      .inp {
        box-sizing: border-box;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0 5px;
        outline: none;
        width: 100%;
      }
    }
  }
  .student {
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    .studentName {
      width: 35%;
      flex-shrink: 0;
      color: rgba(0, 0, 0, 0.9);
      font-family: Microsoft YaHei;
      font-size: 28px;
      font-style: normal;
      font-weight: 400;
      line-height: 40px; /* 142.857% */
      border-bottom: 1px solid #e7e7e7;
    }
    .relevanceStudent {
      flex: 1;
      display: flex;
      .relevanceName {
        width: 70px;
      }
    }
  }
  //   观察记录
  .EvaluateTxt {
    box-sizing: border-box;
    padding: 10px;
    height: 137px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    font-family: Roboto;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
  }
  //   上传图片
  .uploadImgTit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    padding: 15px 0px;
    padding-bottom: 0;
    color: rgba(0, 0, 0, 0.7);
    font-family: Microsoft YaHei;
  }
  .uploadImg {
    width: 100%;
    // border-bottom: 1px solid rgba(245, 245, 245, 1);
    .imgCon {
      margin: 10px 0px;
      margin-right: 3%;
      width: 74.46px;
      height: 66.13px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 2px solid rgba(242, 241, 242, 1);
    }
  }

  //   按钮
  .submitBtn {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding: 0px 20px;
    .btn {
      display: inline-flex;
      padding: 4px 5px;
      margin-left: 5px;
      border-radius: 6px;
      background: #0061ff;
      color: rgba(255, 255, 255, 1);
    }
  }
  //继续记录
  .continueXie {
    width: 345px;
    height: 47px;
    line-height: 47px;
    border-radius: 4px;
    background-color: rgba(164, 173, 179, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
  }
  .recordTime {
    display: flex;
    height: 30px;
    align-items: center;
    /deep/ .van-cell {
      padding: 0;
      width: 100%;
      height: 100%;
      align-items: center;
      border: none;
      // width: 200px;
      flex: 1;
      // background-color: aqua;
    }
    /deep/.van-field__label {
      width: 32px;
    }
    .tit {
      width: 43.2px;
    }
    .cell {
      flex: 1;
      height: 30px;
      border: 1px solid rgba(187, 187, 187, 1);
    }
  }
}
</style>
