<template>
  <view>
    <cu-custom ref="cuCustom" bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true" :backUrl="backUrl">
      <block slot="backText">返回</block>
      <block slot="content">我的任务</block>
    </cu-custom>
    <scroll-view scroll-x class="bg-white nav">
      <view class="flex text-center">
        <view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
              v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
          {{ tabNav[index] }}
        </view>
      </view>
    </scroll-view>
    <block>
      <view v-if="TabCur==1" class="tasks-bg">
        <view class="tasks-content">
          <view class="tasks-top">
            <view class="tasks-nr">
              <view>
                {{ JOINNUM }}次
              </view>
              <view>
                参加考试
              </view>
            </view>
            <view class="tasks-nr">
              <view>
                {{ PASSNUM }}次
              </view>
              <view>
                合格
              </view>
            </view>
            <view class="tasks-nr">
              <view>
                {{ NOPASSNUM }}次
              </view>
              <view>
                不合格
              </view>
            </view>
          </view>
        </view>
        <view class="stripes"></view>
      </view>
      <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
                     :up="upOption">
        <view class="tasks-warp" v-if="TabCur==0 && taskList.length>0" v-for="(item,index) in taskList"
              :key="item.STUDYTASK_ID">
          <view class="tasks-item">
            <view class="title">
              任务名称：{{ item.STUDY_NAME }}
            </view>
            <view class="tasks-state">
              培训行业类型：{{ item.TRAINTYPENAME }}
            </view>
            <view class="tasks-state">
              岗位培训类型：{{ item.POSTTYPENAME }}
            </view>
            <view class="tasks-state">
              培训时间：{{ item.PEIXUE_START_TIME }}至{{ item.PEIXUE_END_TIME }}
            </view>
            <view class="tasks-state">
              任务状态：{{ item.TASKSTATENAME }}
            </view>
            <view v-if="item.STAGESTEP === '1'" class="flex">
              <view class="tasks-time">
                {{ item.LASTTIME }}
              </view>
            </view>
            <view v-else-if="item.STAGESTEP === '2'" class="flex">
              <view class="tasks-time">
                剩余：{{ item.LASTTIME }}
              </view>
              <view class="">
                <button class="cu-btn bg-orange round sm" @click="$noMultipleClicks(goToMyStudy, item)">立即学习
                </button>
              </view>
            </view>
          </view>
        </view>
        <view class="tasks-warp" v-if="TabCur==1 && scoreList.length>0" v-for="(item,index) in scoreList"
              :key="item.STAGESTUDENTRELATION_ID">
          <view class="tasks-item">
            <view class="title">
              任务名称：{{ item.STUDY_NAME }}
            </view>
            <view class="tasks-state">
              考试试卷：{{ item.EXAMNAME }}
            </view>
            <view class="tasks-state">
              考试结果：
              <text v-if=" Number(item.PASSSCORE) <= Number(item.STAGEEXAMSCORE)">已通过</text>
              <text v-else-if="Number(item.PASSSCORE) > Number(item.STAGEEXAMSCORE)">未通过</text>
              <text v-else-if="item.STAGEEXAMSTATE=='4'">未参加</text>
            </view>
            <view class="flex">
              <view class="tasks-state">
                考试成绩：
                <text v-if="item.STAGEEXAMSTATE=='4'">-</text>
                <text v-else>{{ item.STAGEEXAMSCORE }}分</text>
              </view>
              <view class="">
                <button class="cu-btn round bg-orange sm" @click="$noMultipleClicks(goToMyExamResult, item)">考试详情
                </button>
              </view>
            </view>
          </view>
        </view>
        <view class="tasks-warp" v-if="TabCur==2 && tempList.length>0" v-for="(item,index) in tempList"
              :key="item.TEMPSTUDY_ID">
          <view class="tasks-item">
            <view class="title">
              任务名称：{{ item.NAME }}
            </view>
            <view class="tasks-state">
              课件类型：{{ item.COURSEWARE_TYPE == 1 ? '视频课件' : '资料课件' }}
            </view>
            <view class="flex">
              <view class="tasks-state">
                状态：
                <text v-if="item.STUDY_STATUS=='0'">未学习</text>
                <text v-else-if="item.STUDY_STATUS=='1'">已学习</text>
              </view>
              <view class="">
                <button class="cu-btn round bg-orange sm" @click="$noMultipleClicks(goToMyTemp, item)">立即学习</button>
              </view>
            </view>
          </view>
        </view>
        <view
            v-if="(TabCur==0 &&taskList.length<1) || (TabCur==1 &&scoreList.length < 1) || (TabCur==2 &&tempList.length < 1)"
            class="dy-null">
          <view class="dy-null-img">
            <image src="../../../static/null.png" mode=""></image>
          </view>
          <view class="dy-null-title">
            暂无数据
          </view>
        </view>
        <view class="cu-tabbar-height"></view>
      </mescroll-body>
    </block>
    <view class="cu-modal" :class="modalName=='Modal'?'show':''">
      <writing-board @confirm="subCanvas" @cancel="hideModal"></writing-board>
    </view>
  </view>
</template>
<script>
import {
  basePath, baseImgPath, corpinfoId, loginSession, loginUser
} from '@/common/tool.js';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import writingBoard from "@/components/writing-board/writing-board.vue"

export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    writingBoard
  },
  data() {
    return {
      baseImgPath: baseImgPath,
      CustomBar: this.CustomBar,
      backUrl: '/pages/application/onlinexxks/home',
      sTop: 0,
      totalHeight: 0,
      downOption: {
        use: true,
        auto: false
      },
      upOption: {
        use: true,
        auto: false,
        noMoreSize: 1,
        textNoMore: '--已经没有更多了--'
      },
      scrollLeft: 0,
      taskList: [], //任务列表返回数据
      scoreList: [], //成绩列表返回数据F
      tempList: [],//临时学习数据
      page: 1, //分页参数--页数
      rows: 10, //分页参数--每页数据条数
      totalCount: 0, //分页参数--初始化页数
      isEnd: false, //防止多次刷新
      totalPage: 0, //分页参数--分页数量
      noClick: true,
      TabCur: 0,
      tabNav: ['课程列表', '成绩查询', '临时学习'],
      JOINNUM: 0,
      PASSNUM: 0,
      NOPASSNUM: 0,
      STAGESTUDENTRELATION_ID: '',
      modalName: null,
      imgList: []

    };
  },
  onLoad() {
    //页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
    var _this = this
    _this.background = require('@/common/background.json')
    _this.showCount = -1
    _this.currentPage = 1
    _this.isEnd = false
    _this.getTaskInit()
    loginSession();
  },
  onShow() {
  },
  beforeDestroy() {
    // 清除定时器
    this.taskList.forEach((ele) => {
      if (ele.countDown) {
        clearInterval(ele.countDown)
        ele.countDown = null
      }
    })
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      if (this.TabCur == 0) {
        this.scoreList = []
        this.getTaskInit()
      } else if (this.TabCur == 1) {
        // 清除定时器
        this.taskList.forEach((ele) => {
          if (ele.countDown) {
            clearInterval(ele.countDown)
            ele.countDown = null
          }
        })
        this.taskList = []
        this.getScoreInit()
      } else if (this.TabCur == 2) {
        // 清除定时器
        this.taskList.forEach((ele) => {
          if (ele.countDown) {
            clearInterval(ele.countDown)
            ele.countDown = null
          }
        })
        this.taskList = []
        this.getTempInit()
      }
    },
    //重置分页
    initPageData() {
      var _this = this;
      _this.showCount = -1;
      _this.currentPage = 1;
      _this.isEnd = false;
    },
    //翻页
    turnPage() {
      var _this = this;
      _this.showCount = -1;
      _this.currentPage = _this.currentPage + 1;
      _this.isEnd = false;
    },
    //跳转事件
    downCallback(page) { //搜索按钮事件
      var _this = this;
      if (_this.TabCur == 0) {
        _this.getTaskQuery(page)
      } else if (_this.TabCur == 1) {
        _this.getScoreQuery(page)
      } else if (_this.TabCur == 2) {
        _this.getTempQuery(page)
      }
    },
    // 滑动到底方法
    upCallback(page) {
      var _this = this;
      if (_this.TabCur == 0) {
        _this.scrolltolowerTask(page)
      } else if (_this.TabCur == 1) {
        _this.scrolltolowerScore(page)
      } else if (_this.TabCur == 2) {
        _this.scrolltolowerTemp(page)
      }
    },
    //切换选项卡初始化任务列表
    getTaskInit() { //搜索按钮事件
      var _this = this
      _this.initPageData()
      _this.taskList = []
      _this.getTaskData();
    },
    //下拉刷新任务列表
    getTaskQuery(page) {
      var _this = this;
      _this.initPageData()
      _this.taskList = [];
      _this.getTaskData();
    },
    //  上滑加载更多
    scrolltolowerTask(page) {
      var _this = this;
      _this.turnPage()
      if (_this.totalPage >= _this.currentPage) {
        _this.getTaskData(); //开始分页查询
      }
    },
    getTaskData() {
      var _this = this;
      _this.JOINNUM = 0
      _this.PASSNUM = 0
      _this.NOPASSNUM = 0
      if (_this.isEnd) {
        return
      } else {
        _this.isEnd = true;
      }
      uni.showLoading({
        title: "加载中..."
      }); //加载中动画
      uni.request({
        url: basePath + '/app/stagestudentrelation/pageTaskByUser?showCount=' + _this.showCount + '&currentPage=' + _this.currentPage,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          tm: new Date().getTime(),
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          if (res.data != null) {
            _this.totalPage = res.data.page.totalPage
            // 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
            res.data.varList.forEach((ele) => {
              // 调用定时器传递
              _this.timeInterval(ele)
              // 如果数据不更新的话，增加下面代码
              // res.data.varList.splice(1, 0)
            })
            // 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
            if (_this.taskList.length == 0) {
              _this.taskList = res.data.varList;
            } else {
              if (res.data.varList != null) {
                _this.list2 = res.data.varList;
                _this.taskList = _this.taskList.concat(_this.list2);
              }
            }
            _this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
            _this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
          }
        },
        fail: () => {
          //  请求失败,隐藏加载状态
          _this.mescroll.endErr()
        }
      })
    },
    // 倒计时定时器
    timeInterval(row) {
      var nowDate = new Date().getTime()
      const beginTime = new Date(row.PEIXUE_START_TIME.replace(/-/g, '/')).getTime()
      const endTime = new Date(row.PEIXUE_END_TIME.replace(/-/g, '/') + " 23:59:59").getTime()
      if (nowDate > endTime || row.STATE == 2) {
        this.$set(row, 'TASKSTATENAME', '已结束')
        this.$set(row, 'STAGESTEP', '3')
      } else {
        if (beginTime <= nowDate && nowDate <= endTime && (row.STAGEEXAMSTATE == '3' || row.STAGEEXAMSTATE == '4')) {
          this.$set(row, 'TASKSTATENAME', '已结束')
          this.$set(row, 'STAGESTEP', '3')
        } else {
          // 绑定定时器
          row.countDown = setInterval(() => {
            nowDate = new Date().getTime()
            if (beginTime - nowDate > 0) {
              // 对每行的剩余时间进行设置
              row.lastTime = beginTime - nowDate
              row.stagestep = '1' // 未考试
              this.$set(row, 'TASKSTATENAME', '未开始')
              this.$set(row, 'LASTTIME', this.timeFormat(row.lastTime))
              this.$set(row, 'STAGESTEP', row.stagestep)
              // if((beginTime-nowDate) == 5000) {
              // 	uni.showModal({
              // 		title: '',
              // 		content: '<<'+row.EXAMNAME+'>>离开考时间还有五分钟！',
              // 		showCancel: false,
              // 		confirmText: '确定',
              // 		success: res => {}
              // 	})
              // }
            } else if (beginTime <= nowDate && nowDate <= endTime) {
              row.lastTime = endTime - nowDate
              row.stagestep = '2' // 已开考
              this.$set(row, 'TASKSTATENAME', '进行中')
              this.$set(row, 'LASTTIME', this.timeFormat(row.lastTime))
              this.$set(row, 'STAGESTEP', row.stagestep)
              if (row.STATE == 0) {
                row.STATE = 1
                this.updateTaskState(row)
              }
            } else {
              row.stagestep = '3' // 已结束
              this.$set(row, 'TASKSTATENAME', '已结束')
              this.$set(row, 'STAGESTEP', row.stagestep)
              if (row.STAGEEXAMSTATE == '1' || row.STAGEEXAMSTATE == '2') { // 到时后自动更新学员状态为未参加考试
                uni.request({
                  url: basePath + '/app/stagestudentrelation/updateStudentState',
                  method: 'POST',
                  dataType: 'json',
                  header: {
                    'Content-type': 'application/x-www-form-urlencoded'
                  },
                  data: {
                    USERNAME: loginUser.USERNAME,
                    // TYPE: '3',
                    STAGEEXAMSTATE: '4',
                    STAGESTUDENTRELATION_ID: row.STAGESTUDENTRELATION_ID,
                    CORPINFO_ID: loginUser.CORPINFO_ID,
                    USER_ID: loginUser.USER_ID,
                  },
                  success: (res) => {
                  }
                })
              }
              if (row.STATE != 2) {
                row.STATE = 2
                this.updateTaskState(row)
              }
              // 清除定时器
              if (row.countDown) {
                clearInterval(row.countDown)
                row.countDown = null
              }
            }
          }, 1000)
        }
      }
    },
    updateTaskState(item) {
      uni.request({
        url: basePath + '/app/studytask/updateTaskState',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          STUDYTASK_ID: item.STUDYTASK_ID,
          STATE: item.STATE,
          USERNAME: loginUser.USERNAME,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
        }
      })
    },
    // 剩余时间格式化
    timeFormat(times) {
      if (times > 0) {
        const days = this.addZero(
            Math.floor(times / 1000 / 60 / 60 / 24)
        ) // 天
        const hours = this.addZero(
            Math.floor((times / 1000 / 60 / 60) % 24)
        ) // 时
        const minutes = this.addZero(
            Math.floor((times / 1000 / 60) % 60)
        ) // 分
        const seconds = this.addZero(Math.floor((times / 1000) % 60)) // 秒
        var html = days !== '00' ? days + '天' : ''
        html += hours !== '00' ? hours + '小时' : ''
        html += minutes !== '00' ? minutes + '分钟' : ''
        html += seconds + '秒'
        return html
      } else {
        return '已超时'
      }
    },
    // 个位补零
    addZero(d) {
      return parseInt(d) < 10 ? '0' + d : d
    },
    goToMyStudy(item) {
      if (item.STAGEEXAMSTATE == '1') {
        this.STAGESTUDENTRELATION_ID = item.STAGESTUDENTRELATION_ID
        this.modalName = 'Modal'
      } else {
        uni.redirectTo({
          url: '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + item.STAGESTUDENTRELATION_ID
        })
      }
    },

    /*
     *手写板
     */
    hideModal(e) {
      this.modalName = null
    },
    //完成
    subCanvas(e) {
      this.imgList.splice(0, this.imgList.length)
      this.imgList.push(e)
      this.saveSign()
      this.hideModal()

    },
    saveSign() {
      var _this = this;
      uni.showLoading({
        title: "加载中..."
      }); //加载中动画
      uni.uploadFile({
        url: basePath + 'app/stagestudentrelation/sign',
        filePath: _this.imgList[0].filePath,
        name: 'FFILE',
        formData: {
          USERNAME: loginUser.USERNAME,
          STAGEEXAMSTATE: '2',
          STAGESTUDENTRELATION_ID: _this.STAGESTUDENTRELATION_ID,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          uni.redirectTo({
            url: '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + _this.STAGESTUDENTRELATION_ID
          })
        }
      })
    },

    /** 成績查詢功能 */
    //切换选项卡初始化成績列表
    getScoreInit() {
      var _this = this;
      _this.initPageData()
      _this.scoreList = []
      _this.getScoreData()
    },
    //下拉刷新成績列表
    getScoreQuery(page) {
      var _this = this;
      _this.initPageData()
      _this.scoreList = []
      _this.getScoreData()
    },
    // 上滑加载更多
    scrolltolowerScore(page) {
      var _this = this;
      _this.turnPage()
      if (_this.totalPage >= _this.currentPage) {
        _this.getScoreData()
      }
    },
    getScoreData() {
      var _this = this;
      if (_this.isEnd) {
        return
      } else {
        this.isEnd = true;
      }
      uni.showLoading({
        title: "加载中..."
      }); //加载中动画
      uni.request({
        url: basePath + '/app/stagestudentrelation/pageTaskScoreByUser?showCount=' + _this.showCount + '&currentPage=' + _this.currentPage,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          tm: new Date().getTime(),
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          if (res.data != null) {
            _this.totalPage = res.data.page.totalPage
            this.JOINNUM = 0
            this.PASSNUM = 0
            this.NOPASSNUM = 0
            res.data.varListAll.forEach((ele) => {
              if (ele.STAGEEXAMSTATE == '3' || ele.STAGEEXAMSTATE == '2') {
                // if(+(ele.STAGEEXAMSCORE) <= '0'){
                // 	ele.STAGEEXAMSCORE = '0'
                // }
                if (ele.STAGEEXAMSCORE !== '-1') {
                  this.JOINNUM++
                }
                if (parseInt(ele.STAGEEXAMSCORE) >= parseInt(ele.PASSSCORE)) {
                  this.PASSNUM++
                } else {
                  this.NOPASSNUM++
                }
              }
            })
            // 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
            if (_this.scoreList.length == 0) {
              _this.scoreList = res.data.varList;
            } else {
              if (res.data.varList != null) {
                _this.list2 = res.data.varList;
                _this.scoreList = _this.scoreList.concat(_this.list2);
              }
            }
            _this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
            _this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
          }
        },
        fail: () => {
          //  请求失败,隐藏加载状态
          _this.mescroll.endErr()
        }
      })
    },
    goToMyExamResult(item) {
      uni.navigateTo({
        url: '/pages/application/onlinexxks/my-exam-detail?STUDYTASK_ID=' + item.STUDYTASK_ID + '&STAGEEXAMPAPER_ID=' + item.STAGEEXAMPAPER_ID
      })
    },

    /** 临时学习 */
    //切换选项卡初始化成績列表
    getTempInit() {
      var _this = this;
      _this.initPageData()
      _this.tempList = []
      _this.getTempData()
    },
    //下拉刷新成績列表
    getTempQuery(page) {
      var _this = this;
      _this.initPageData()
      _this.tempList = []
      _this.getTempData()
    },
    // 上滑加载更多
    scrolltolowerTemp(page) {
      var _this = this;
      _this.turnPage()
      if (_this.totalPage >= _this.currentPage) {
        _this.getTempData()
      }
    },
    getTempData() {
      var _this = this;
      _this.JOINNUM = 0
      _this.PASSNUM = 0
      _this.NOPASSNUM = 0
      if (_this.isEnd) {
        return
      } else {
        this.isEnd = true;
      }
      uni.showLoading({
        title: "加载中..."
      }); //加载中动画
      uni.request({
        url: basePath + '/app/tempstudy/list?showCount=' + _this.showCount + '&currentPage=' + _this.currentPage,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          tm: new Date().getTime(),
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          if (res.data != null) {
            _this.totalPage = res.data.page.totalPage
            // 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
            if (_this.tempList.length == 0) {
              _this.tempList = res.data.varList;
            } else {
              if (res.data.varList != null) {
                _this.tempList = _this.tempList.concat(res.data.varList);
              }
            }
            _this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
            _this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
          }
        },
        fail: () => {
          //  请求失败,隐藏加载状态
          _this.mescroll.endErr()
        }
      })
    },
    goToMyTemp(item) {
      if (item.COURSEWARE_TYPE == 1) {
        uni.navigateTo({
          url: '/pages/application/onlinexxks/temp-study-video?TEMPSTUDYUSERS_ID=' + item.TEMPSTUDYUSERS_ID + '&COURSEWARE_ID=' + item.COURSEWARE_ID
        })
      } else {
        uni.navigateTo({
          url: '/pages/application/onlinexxks/temp-study-data?TEMPSTUDYUSERS_ID=' + item.TEMPSTUDYUSERS_ID + '&COURSEWARE_ID=' + item.COURSEWARE_ID
        })
      }

    }
  }
}
</script>
