<template>
  <div>
    <div class="loginheader">
      <div class="loginheaderbox">
        <h1>反欺凌信息采集及评测系统</h1>
        <div class="logingoto"><i class="guideIconXx"></i><i class="guideIconSet" :class="bzhou == 2?'curr':''"></i><span>您好，管理员</span></div>
        <div class="loginheaderTimes">{{ newtime }}</div>
        <div class="clear"></div>
      </div>
      <div class="loginYdyInfo buzhou2" v-if="bzhou == 2">
        <div class="ydyinfoTitle">添加用户，分配用户角色</div>
        <div>快捷进入权限管理。添加用户、分配角色后，使其他人拥有账号，开始相应工作</div>
        <div class="ydyNextBtn"><div class="buttonYdyNext" @click="nextClickTwe">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>2/4</span></div>
      </div>
    </div>
    <div class="loginMain" v-if="quanxian == '1'">
      <div class="loginYdyimg1" :class="bzhou == 4?'current':''"><img class="img" src="../../assets/ydy/07.png"></div>
      <div class="loginYdyimg2"><img class="img" src="../../assets/ydy/02.png"></div>
      <div class="loginYdyimg3" :class="bzhou == 1?'current':''"><img class="img" src="../../assets/ydy/03.png"></div>
      <div class="loginYdyimg3 left00"><img class="img" src="../../assets/ydy/04.png"></div>
      <div class="loginYdyimg3 left01" :class="bzhou == 3?'current':''"><img class="img" src="../../assets/ydy/05.png"></div>
      <div class="loginYdyInfo buzhou1" v-if="bzhou == 1">
        <div class="ydyinfoTitle">初评</div>
        <div>首次进入请先填写基础信息采集，基础信息采集决定常态工作信息的填写内容</div>
        <div class="ydyNextBtn"><div class="buttonYdyNext" @click="nextClickSix">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>1/4</span></div>
      </div>

      <div class="loginYdyInfo buzhou3" v-if="bzhou == 3">
        <div class="ydyinfoTitle">上报中心</div>
        <div>每个自然月月底为上报最后期限。每月仅可上报一次，请确保本月工作都已填写完毕，再点击上传按钮</div>
        <div class="ydyNextBtn" style="margin-top:20px;"><div class="buttonYdyNext" @click="nextClickThr">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>3/4</span></div>
      </div>

      <div class="loginYdyInfo buzhou4" v-if="bzhou == 4">
        <div class="ydyinfoTitle">上报时间提醒</div>
        <div>初评的上报期限为45天。之后的上报周期为每个自然月日数（寒、暑假排除）。逾期上报可能会影响总体评分，请关注上报日期</div>
        <div class="ydyNextBtn" style="margin-top:20px;"><div class="buttonYdyNext" @click="jumpClick">完成</div><span>4/4</span></div>
      </div>
    </div>
    <div class="loginMain" v-if="quanxian == '2'">
      <div class="loginYdyimg1" :class="bzhou == 4?'current':''"><img class="img" src="../../assets/ydy/07.png"></div>
      <div class="loginYdyimg2"><img class="img" src="../../assets/ydy/02.png"></div>
      <div class="loginYdyimg3" :class="bzhou == 1?'current':''"><img class="img" src="../../assets/ydy/03.png"></div>
      <div class="loginYdyimg3 left00"><img class="img" src="../../assets/ydy/04.png"></div>
      <div class="loginYdyimg3 left01" :class="bzhou == 3?'current':''"><img class="img" src="../../assets/ydy/05.png"></div>
      <div class="loginYdyInfo buzhou1" v-if="bzhou == 1">
        <div class="ydyinfoTitle">初评</div>
        <div>首次进入请先填写基础信息采集，基础信息采集决定常态工作信息的填写内容</div>
        <div class="ydyNextBtn"><div class="buttonYdyNext" @click="nextClickOne">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>1/3</span></div>
      </div>

      <div class="loginYdyInfo buzhou3" v-if="bzhou == 3">
        <div class="ydyinfoTitle">上报中心</div>
        <div>每个自然月月底为上报最后期限。每月仅可上报一次，请确保本月工作都已填写完毕，再点击上传按钮</div>
        <div class="ydyNextBtn" style="margin-top:20px;"><div class="buttonYdyNext" @click="nextClickThr">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>2/3</span></div>
      </div>

      <div class="loginYdyInfo buzhou4" v-if="bzhou == 4">
        <div class="ydyinfoTitle">上报时间提醒</div>
        <div>初评的上报期限为45天。之后的上报周期为每个自然月日数（寒、暑假排除）。逾期上报可能会影响总体评分，请关注上报日期</div>
        <div class="ydyNextBtn" style="margin-top:20px;"><div class="buttonYdyNext" @click="jumpClick">完成</div><span>3/3</span></div>
      </div>
    </div>
    <div class="loginMainTwe" v-if="quanxian == '3'">
      <div class="loginYdyimg1" :class="sbzhou == 3?'current':''"><img class="img1" src="../../assets/ydy/09.png"></div>
      <div class="loginYdyimg2"><img class="img1" src="../../assets/ydy/08.png"></div>
      <div class="loginYdyimg3" :class="sbzhou == 1?'current':''"><img class="img" src="../../assets/ydy/03.png"></div>
      <div class="loginYdyimg3 left00" :class="sbzhou == 2?'current':''"><img class="img" src="../../assets/ydy/04.png"></div>
      <div class="loginYdyInfo buzhou1" v-if="sbzhou == 1">
        <div class="ydyinfoTitle">初评</div>
        <div>首次进入请先填写基础信息采集，基础信息采集决定常态工作信息的填写内容</div>
        <div class="ydyNextBtn"><div class="buttonYdyNext" @click="nextsClickOne">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>1/3</span></div>
      </div>
      <div class="loginYdyInfo buzhou5" v-if="sbzhou == 2">
        <div class="ydyinfoTitle">常态工作记录</div>
        <div>反欺凌相关工作在这里展示。填写是否完整，可能会决定总体评分。</div>
        <div class="ydyNextBtn"><div class="buttonYdyNext" @click="nextsClickTwe">下一步</div><div class="jumpBtn" @click="jumpClick">跳过</div><span>2/3</span></div>
      </div>      
      <div class="loginYdyInfo buzhou4" v-if="sbzhou == 3">
        <div class="ydyinfoTitle">上报时间提醒</div>
        <div>请确保上报倒计时结束前，相关工作已完成。逾期完成，可能会影响总体评分。</div>
        <div class="ydyNextBtn"><div class="buttonYdyNext" @click="jumpClick">完成</div><span>3/3</span></div>
      </div>
    </div>
    <div class="loginYdyBj"></div>
  </div>
</template>
<script>
import { admiadminyindaopost } from '../../axios/api'
export default {
  name: 'guide',
  data () {
    return {
      newtime: '',
      bzhou: 1,
      sbzhou: 1,
      quanxian: '1'
    }
  },
  created () {
    let that = this
    function updateDateTime () {
      const now = new Date() // 获取当前时间
      const hours = now.getHours().toString().padStart(2, '0') // 获取小时，并确保是两位数
      const minutes = now.getMinutes().toString().padStart(2, '0') // 获取分钟，并确保是两位数
      const seconds = now.getSeconds().toString().padStart(2, '0') // 获取秒数，并确保是两位数
      // 格式化时间字符串，例如 "2023-04-01 15:30:45"
      const datetimeString = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${hours}:${minutes}:${seconds}`
      that.newtime = datetimeString // 更新页面上的时间显示
    }
    // 页面加载完成后立即更新时间，然后每1000毫秒（1秒）更新一次时间
    updateDateTime() // 初始更新
    setInterval(updateDateTime, 1000) // 每秒更新一次时间\
  },
  mounted () {
    // 动态修改 body 的背景颜色
    document.body.style.background = 'linear-gradient( 180deg, #CCE2FF 0%, #EFF5FD 100%)'
    document.body.style.height = '100vh'
    this.quanxian = localStorage.getItem('quanxianS')
  },
  methods: {
    jumpClick () {
      let obj = {}
      obj.type = 'shou_ci_deng_lu'
      admiadminyindaopost(obj).then(res => {
        if (res.code == 10000) {
          this.$router.push({name: 'homes'})
        } else {
        }
      })
    },
    nextClickSix () {
      this.bzhou = 2
    },
    nextClickOne () {
      this.bzhou = 3
    },
    nextClickTwe () {
      this.bzhou = 3
    },
    nextClickThr () {
      this.bzhou = 4
    },
    nextsClickOne () {
      this.sbzhou = 2
    },
    nextsClickTwe () {
      this.sbzhou = 3
    }
  }
}
</script>
<style scoped>
.loginheader{height:70px;font-size:24px;line-height:70px;background: linear-gradient( 270deg, #5C9AEF 0%, #113887 100%);color:#fff;width:100%;position:relative;}
.loginheaderbox{padding:0 40px;}
.loginheader h1{font-weight:500;font-size: 24px;color: #fff;text-align: left;font-style: normal;float:left;}
.logingoto{float:right; font-size: 16px; color: #FFFFFF; text-align: right; font-style: normal;}
.loginheaderTimes{float:right; font-size: 16px; color: #FFFFFF; text-align: right; font-style: normal; margin-right:40px;}
.loginheaderMail{float:right;padding:0 34px;width:32px;position:relative;}
.guideIconSet{display:inline-block;width:36px;height:36px;background:url('../../assets/ydy/06.png') no-repeat 0 0/100%;margin:0 8px 0 0;position:relative;top:12px;}
.guideIconSet.curr{z-index:9999;}
.guideIconXx{display:inline-block;width:36px;height:36px;background:url('../../assets/ydy/icon11.png') no-repeat 0 0/100%;margin:0 8px 0 0;position:relative;top:12px;}
.loginMain{width:1280px;margin:110px auto;position:relative;}
.loginYdyimg1{position:absolute;top:0;left:0;}
.loginYdyimg1.current{z-index:999}
.loginYdyimg1 .img{width:400px;height:54px;}
.loginYdyimg1 .img1{width:400px;height:54px;}
.loginYdyimg2{position:absolute;top:66px;left:0;}
.loginYdyimg2 .img{width:1280px;height:40px;}
.loginYdyimg2 .img1{width:840px;height:40px;}
.loginYdyimg3{position:absolute;top:128px;left:0;}
.loginYdyimg3.left00{left:440px;}
.loginYdyimg3.left01{left:880px;}
.loginYdyimg3 .img{width:400px;height:468px;}
.loginYdyimg3.current{z-index:999}
.loginYdyBj{width:100%;height:100%;background:#000;opacity: 0.4;position:fixed;top:0;left:0;z-index:888;}
.loginYdyInfo{width:240px;background: linear-gradient( 180deg, #0079EB 0%, #0071DB 100%);border-radius: 8px;position:absolute;z-index:999;padding:15px;font-size: 14px;color: #FFFFFF;line-height: 22px;}
.loginYdyInfo.buzhou1{top:128px;left:420px;}
.loginYdyInfo.buzhou2{right:150px;top:66px;width:320px;}
.loginYdyInfo.buzhou3{top:128px;right:420px;}
.loginYdyInfo.buzhou4{top:0;left:400px;width:320px;}
.loginYdyInfo.buzhou5{top:128px;right:-290px;}
.ydyinfoTitle{font-weight:bold;font-size: 16px;color: #FFFFFF;line-height: 24px;margin-bottom:8px;}
.ydyNextBtn{margin-top:40px;font-size: 14px;color: #FFFFFF;line-height: 32px;height: 32px;}
.ydyNextBtn .buttonYdyNext{width: 80px;height: 32px;background: #338fe5;border-radius: 18px;font-size: 16px;color: #FFFFFF;line-height: 32px;text-align:center;float:right;cursor:pointer;}
.ydyNextBtn .jumpBtn{float:right;margin-right:16px;font-size: 16px;color: #FFFFFF;line-height: 32px;cursor:pointer;}
.loginMainTwe{width:840px;margin:110px auto;position:relative;}
</style>
