<template>
  <div class="warrper">
    <div v-if="subNavShow == true" style="padding:24px 12px 24px 24px;">
      <div class="gotoButton pb24" style="padding-right:12px;" @click="gotoCLick"><i class="gotoIcon"></i>返回</div>
      <div class="gjhqTitle pb24" style="padding-right:12px;">上报中心</div>
      <div v-if="basiDatas[0].report_status == 2">
        <div class="countdownTimers" v-if="typeTimer == 1 || typeTimer == 3">{{ timeTitle }}<span>{{ homeDay }}</span>天<span>{{ homexs }}</span>小时<span>{{ homef }}</span>分<span>{{ homem }}</span>秒</div>
      </div>
      <div class="tipTisBox" v-if="basiDatas[0].report_status == 1"><i></i>本月工作已上报，常态工作已暂停采集。请等待下个自然月初恢复</div>
      <div class="countdownTimers" v-if="typeTimer == 4">{{ timeTitle }}<span>{{ homeDay }}</span>天<span>{{ homexs }}</span>小时<span>{{ homef }}</span>分<span>{{ homem }}</span>秒</div>
      <div class="gjhqTitle pb24" style="padding-right:12px;" ><span class="rf"><span class="titlesSml">完成度</span> {{parseInt(wcdNum)}} %</span>基础信息采集</div>
      <div style="margin-right:12px;">
        <div class="basiWcd">
          <div class="basiWcdjdNums" :style="{width:parseInt(wcdNum)+'%'}"></div>
        </div>
      </div>
      <div class="basicinBox">
        <div class="ulliBox" v-for="(item, i) in basiDatas" :key="i">
          <div class="ulli" v-if="item.meun == true">
            <span class="upDataBtn" v-if="item.if_save == 1">有更新</span>
            <div class="basicinLi">
              <div class="basicTile">{{ item.titles }}</div>
              <div class="basicInfo">
                <span v-if="item.wcd != '100'"><i class="iconInfo"></i>完整度{{ item.wcd }}%</span>
                <span v-else><i class="iconInfo"></i>完整度<i class="iconInfo2"></i><strong class="wc100">{{ item.wcd }}%</strong></span>
                <span v-if="item.dbfk == 0"><i class="iconInfo1"></i>督办反馈 -</span>
                <span class="dbfkCLss" v-else><i class="iconInfo1"></i>督办反馈 {{ item.dbfk }}</span>
              </div>
              <div v-if="item.report_status == 2">
                <div class="basiButton current" v-if="item.if_insert == 1">
                  <span v-if="item.dbfk == 0" class="basiButtonCUr">查看督办反馈</span>
                  <span @click="tbDbFkClick(item, 'dbfk', 'edit')" v-else>查看督办反馈</span>
                  <span class="basiButtonCUr">更新内容</span>
                </div>
                <div class="basiButton current" v-if="item.if_insert == 2">
                  <span v-if="item.dbfk == 0" class="basiButtonCUr">查看督办反馈</span>
                  <span @click="tbDbFkClick(item, 'dbfk', 'edit')" v-else>查看督办反馈</span>
                  <span @click="tbTweClick(item, 'edit')">更新内容</span>
                </div>
              </div>
              <div v-else>
                <div class="basiButton current">
                  <span v-if="item.dbfk == 0" class="basiButtonCUr">查看督办反馈</span>
                  <span @click="tbDbFkClick(item, 'dbfk', 'edit')" v-else>查看督办反馈</span>
                  <span class="basiButtonCUr">更新内容</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="gjhqTitle pb24" style="padding-right:12px;" ><span class="rf"><span class="titlesSml">完成度</span> {{parseInt(wcdNumCt)}} %</span>常态工作记录</div>
      <div style="margin-right:12px;">
        <div class="basiWcd">
          <div class="basiWcdjdNums" :style="{width:parseInt(wcdNumCt)+'%'}"></div>
        </div>
      </div>
      <div class="basicinBox">
        <div class="ulliBox" v-for="(item, i) in basiDatasTwe" :key="i">
          <div class="ulli" v-if="item.meun == true">
            <span class="upDataBtn" v-if="item.if_save == 1">有更新</span>
            <div class="basicinLi">
              <div class="basicTile">{{ item.titles }}</div>
              <div class="basicInfo">
                <span v-if="item.wcd != '100'"><i class="iconInfo"></i>完整度{{ item.wcd }}%</span>
                <span v-else><i class="iconInfo"></i>完整度<i class="iconInfo2"></i><strong class="wc100">{{ item.wcd }}%</strong></span>
                <span v-if="item.dbfk == 0"><i class="iconInfo1"></i>督办反馈 -</span>
                <span class="dbfkCLss" v-else><i class="iconInfo1"></i>督办反馈 {{ item.dbfk }}</span>
              </div>
              <div v-if="item.report_status == 2">
                <div class="basiButton current" v-if="item.if_insert == 2">
                  <span v-if="item.dbfk == 0" class="basiButtonCUr">查看督办反馈</span>
                  <span v-else @click="tbDbFkClick(item, 'dbfk', 'edit')">查看督办反馈</span>
                  <span @click="tbTweClick(item, 'edit')">更新内容</span>
                </div>
                <div class="basiButton current" v-if="item.if_insert == 1">
                  <span v-if="item.dbfk == 0" class="basiButtonCUr">查看督办反馈</span>
                  <span v-else @click="tbDbFkClick(item, 'dbfk', 'edit')">查看督办反馈</span>
                  <span class="basiButtonCUr">更新内容</span>
                </div>
              </div>
              <div v-else>
                <div class="basiButton current">
                  <span v-if="item.dbfk == 0" class="basiButtonCUr">查看督办反馈</span>
                  <span @click="tbDbFkClick(item, 'dbfk', 'edit')" v-else>查看督办反馈</span>
                  <span class="basiButtonCUr">更新内容</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>

    </div>
    <div v-else>
      <div :is="componentVal" @gotoBack="subNavBack"></div>
    </div>
    <div class="reportButton">
      <div class="gjhqbtn">
        <el-button class="gjhqprimarybtn gjhqprimaryDisabl" v-if="upshangbao == 1">上报</el-button>
        <el-button class="gjhqprimarybtn" @click="upBaoHandleClick" v-else>上报</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import schoolscale from '../schoolscale/schoolscale.vue'
import { adminLoginqx, adminScalelvl, adminmonthisreport } from '../../axios/api'
import { adminreport, adminreportcycle } from '../../axios/apiliangbiao'
export default {
  name: 'basicinfocoll',
  components: {
    schoolscale
  },
  data () {
    return {
      upshangbao: 1,
      timeTitle: '距离下次上报',
      typeTimer: '',
      subNavShow: true,
      componentVal: 'schoolscale',
      quanxian: '',
      wcdNum: 0,
      wcdNumCt: 0,
      homeDay: '',
      homexs: '',
      homef: '',
      homem: '',
      reportcode: '',
      basiDatas: [
        {
          titles: '1.1 学校基础信息采集量表',
          wcd: 100,
          dbfk: 0,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:school',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.2 学校设备信息采集量表',
          wcd: 50,
          dbfk: 10,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:school-equipment',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.3 学校人员基础信息采集量表',
          wcd: 100,
          dbfk: 0,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:school_people_info',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.4 学生欺凌委员会信息采集量表',
          wcd: 50,
          dbfk: 10,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:ql_committee_collection',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.5 学校规章制度采集量表',
          wcd: 50,
          dbfk: 10,
          url: 'schoolscale',
          showV: '2',
          name: 'admin:regulations_system_collection',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.6 常态工作-事前预防工作统计表',
          wcd: 50,
          dbfk: 10,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:preventive-work-advance',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.7 常态工作-事中发现工作统计表',
          wcd: 50,
          dbfk: 10,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:discover-work-statistics',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '1.8  常态工作-事后处理工作统计表',
          wcd: 50,
          dbfk: 10,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:handle-work-statistics',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        }
      ],
      basiDatasTwe: [
        {
          titles: '1常态工作-日常预防行为记录表',
          wcd: 50,
          dbfk: 2,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:record-preventive-behaviors',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '2常态工作-欺凌发现工作记录表',
          wcd: 50,
          dbfk: 2,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:bullying-discovery-record',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        },
        {
          titles: '3常态工作-事后处理工作记录表',
          wcd: 50,
          dbfk: 2,
          url: 'schoolscale',
          showV: '1',
          name: 'admin:handle-work-records',
          role: [],
          meun: false,
          if_insert: 1,
          if_save: 2,
          reportEdit: false
        }
      ]
    }
  },
  created () {
    let that = this
    if (navigator.onLine) {
    } else {
      that.$messageOne({message: '网络异常，请检测网络是否链接！', type: 'error', duration: 3000})
      return
    }
    // 反向倒计时
    function startCountdown (endTime) {
      const end = new Date(endTime)
      let timer
      function updateCountdown () {
        const now = new Date()
        const diff = end - now
        if (diff <= 0) {
          clearInterval(timer)
          return
        }
        const seconds = Math.floor(diff / 1000) % 60
        const minutes = Math.floor(diff / 1000 / 60) % 60
        const hours = Math.floor(diff / (1000 * 60 * 60)) % 24
        const days = Math.floor(diff / (1000 * 60 * 60 * 24))
        that.homeDay = `${days}`
        that.homexs = `${hours}`
        that.homef = `${minutes}`
        that.homem = `${seconds}`
      }
      clearInterval(setInterval(updateCountdown, 1000))
      timer = setInterval(updateCountdown, 1000) // 每秒更新一次倒计时
      updateCountdown() // 立即更新一次，确保页面加载时显示正确的倒计时时间（如果需要的话）
    }
    // 正向倒计时
    function updateTimer (endTime) {
      function updateCountdown () {
        const now = new Date()
        const pastDate = new Date(endTime)
        const diffMs = now - pastDate
        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
        const diffHours = Math.floor((diffMs / (1000 * 60 * 60)) % 24)
        const diffMinutes = Math.floor((diffMs / (1000 * 60)) % 60)
        const diffSeconds = Math.floor((diffMs / 1000) % 60)
        that.homeDay = `${diffDays}`
        that.homexs = `${diffHours}`
        that.homef = `${diffMinutes}`
        that.homem = `${diffSeconds}`
      }
      clearInterval(setInterval(updateCountdown, 1000))
      setInterval(updateCountdown, 1000)
      updateCountdown()
    }
    adminmonthisreport().then(res => {
      if (res.code == 10000) {
        that.upshangbao = res.status
      } else {
        // that.$messageOne({message: res.message, type: 'error', duration: 3000})
      }
    }).catch(error => {
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
    adminreportcycle().then(res => {
      if (res.code == 10000) {
        let timer = res.day
        let type = res.type
        that.typeTimer = type
        if (res.report_code != null) {
          that.reportcode = res.report_code
        }
        if (type == 1) {
          // 反向倒计时
          startCountdown(timer)
          that.timeTitle = '距离下次上报'
        }
        if (type == 3) {
          // 反向倒计时
          startCountdown(timer)
          that.timeTitle = '距离下次上报'
        }
        if (type == 4) {
          // 正向倒计时
          updateTimer(timer)
          that.timeTitle = '已逾期上报'
        }
      } else if (res.code == 10002) {
        that.$router.push({name: 'Login'})
      } else {
        // that.$messageOne({message: res.message, type: 'error', duration: 3000})
      }
    }).catch(error => {
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
  },
  mounted () {
    let that = this
    setTimeout(() => {
      adminScalelvl(1).then(res => {
        if (res.code == 10000) {
          let datas = res.data
          let len = datas.length
          let num = 0
          for (var i = 0; i < datas.length; i++) {
            let completeness = res.data[i].completeness
            that.basiDatas[i].if_save = res.data[i].if_save
            that.basiDatas[i].titles = res.data[i].name
            that.basiDatas[i].id = res.data[i].id
            that.basiDatas[i].dbfk = res.data[i].feedbacks
            that.basiDatas[i].wcd = completeness.toFixed(0)
            that.basiDatas[i].if_insert = res.data[i].if_insert
            that.basiDatas[i].type = res.data[i].type
            that.basiDatas[i].report_status = res.data[i].report_status
            that.basiDatas[i].report_code = that.reportcode
            num += parseInt(completeness.toFixed(0))
          }
          that.wcdNum = num / len
          console.log(that.basiDatas)
          that.$forceUpdate()
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log('error', error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
      adminScalelvl(2).then(res => {
        if (res.code == 10000) {
          let datas = res.data
          let len = datas.length
          let num = 0
          for (var i = 0; i < datas.length; i++) {
            let completeness = res.data[i].completeness
            that.basiDatas[i].if_save = res.data[i].if_save
            that.basiDatasTwe[i].titles = res.data[i].name
            that.basiDatasTwe[i].id = res.data[i].id
            that.basiDatasTwe[i].dbfk = res.data[i].feedbacks
            that.basiDatasTwe[i].wcd = completeness.toFixed(0)
            that.basiDatasTwe[i].if_insert = res.data[i].if_insert
            that.basiDatasTwe[i].type = res.data[i].type
            that.basiDatasTwe[i].report_status = res.data[i].report_status
            that.basiDatas[i].report_code = that.reportcode
            num += parseInt(completeness.toFixed(0))
          }
          that.wcdNumCt = num / len
          that.$forceUpdate()
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log('error', error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    }, 1000)
    setTimeout(() => {
      adminLoginqx().then(res => {
        if (res.code == 10000) {
          if (res.role != null) {
            that.quanxian = res.role.id
          } else {
            that.quanxian = 0
          }
          if (res.system == 1) {
            let menulist = that.basiDatas
            let menulistTwe = that.basiDatasTwe
            for (var i = 0; i < menulist.length; i++) {
              menulist[i].meun = true
            }
            for (var i = 0; i < menulistTwe.length; i++) {
              menulistTwe[i].meun = true
            }
          } else {
            setTimeout(() => {
              let permissonListDatas = JSON.parse(localStorage.getItem('permissonListDatas'))
              let meunsArray = that.basiDatas
              for (var i = 0; i < meunsArray.length; i++) {
                let names = meunsArray[i].name
                for (var j = 0; j < permissonListDatas.length; j++) {
                  let arrNames = permissonListDatas[j].name
                  if (names == arrNames) {
                    meunsArray[i].role = permissonListDatas[j].roles
                  }
                }
              }
              that.meuns = meunsArray
              let menulist = that.basiDatas
              let qxVal = that.quanxian
              for (var i = 0; i < menulist.length; i++) {
                var qx = menulist[i].role
                for (var j = 0; j < qx.length; j++) {
                  if (qxVal == qx[j]) {
                    menulist[i].meun = true
                  }
                }
              }

              let meunsArrayTwe = that.basiDatasTwe
              for (var i = 0; i < meunsArrayTwe.length; i++) {
                let names = meunsArrayTwe[i].name
                for (var j = 0; j < permissonListDatas.length; j++) {
                  let arrNames = permissonListDatas[j].name
                  if (names == arrNames) {
                    meunsArrayTwe[i].role = permissonListDatas[j].roles
                  }
                }
              }
              that.basiDatasTwe = meunsArrayTwe
              let menulistTwe = that.basiDatasTwe
              for (var k = 0; k < menulistTwe.length; k++) {
                var qxs = menulistTwe[k].role
                for (var m = 0; m < qxs.length; m++) {
                  if (qxVal == qxs[m]) {
                    menulistTwe[k].meun = true
                  }
                }
              }
            }, 1000)
          }
        } else if (res.code == 10002) {
          that.$router.push({name: 'Login'})
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    }, 1500)
  },
  methods: {
    upBaoHandleClick () {
      let that = this
      this.$confirm('每月只可上报一次，上报成功后会无法再次上报。<br/>且无法填写常态工作内容。<br/>确定上报吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true
      }).then(() => {
        let basiDatas = that.basiDatas
        let basiDatasTwe = that.basiDatasTwe
        let arr = []
        for (var i = 0; i < basiDatas.length; i++) {
          let completeness = parseInt(basiDatas[i].wcd)
          if (completeness > 0) {
            arr.push(basiDatas[i].id)
          }
        }
        for (var i = 0; i < basiDatasTwe.length; i++) {
          let completeness = parseInt(basiDatasTwe[i].wcd)
          if (completeness > 0) {
            arr.push(basiDatasTwe[i].id)
          }
        }
        let obj = {}
        obj.scale_lv1_data = '1,2,3,4,5,6,7,8,9,10,11'
        obj.code = ''
        adminreport(obj).then(res => {
          if (res.code == 10000) {
            // that.$router.go(0)
            location.reload()
          } else {
            that.$messageOne({message: res.message, type: 'error', duration: 3000})
          }
        }).catch(error => {
          console.log('error', error)
          that.$messageOne({message: error, type: 'error', duration: 3000})
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消上报'
        })
      })
    },
    gotoCLick () {
      this.$router.push({name: 'homes'})
    },
    tbTweClick (obj, txt) {
      obj.dbfkshow = true
      obj.report_code = this.reportcode
      obj.dbfj = 'dbfk'
      obj.edit = txt
      localStorage.setItem('basicinfollDatas', JSON.stringify(obj))
      this.subNavShow = false
      this.componentVal = obj.url
    },
    tbDbFkClick (obj, text, txt) {
      obj.dbfkshow = false
      obj.report_code = this.reportcode
      obj.dbfj = text
      obj.edit = txt
      localStorage.setItem('basicinfollDatas', JSON.stringify(obj))
      this.subNavShow = false
      this.componentVal = obj.url
    },
    subNavBack (value) {
      this.subNavShow = true
      this.componentVal = ''
    }
  }
}
</script>
<style scoped>
.basicinBox{margin:12px 0;}
.basicinBox .ulli{width:25%;float:left;overflow:hidden;margin-bottom:20px;position:relative;height:156px;}
.basicinBox .ulli .upDataBtn{width: 62px;height: 24px;background: #67C23A;border-radius: 2px 0px 0px 2px;border: 1px solid #67C23A;text-align:center;position:absolute;top:18px;right:12px;font-size: 14px;color: #FFFFFF;line-height: 24px;}
.basicinBox .basicinLi{background: #FFFFFF;border-radius: 2px;border: 1px solid #D9D9D9;margin-right:12px;padding:16px;}
.basicinBox .basicinLi .basicTile{font-weight: bold;font-size: 20px;color: #161617;line-height: 28px;margin-bottom:16px;height:28px;overflow:hidden;}
.basicinBox .basicinLi .basicInfo{padding-bottom:16px;font-size: 14px;color: #595959;line-height: 20px;border-bottom:1px solid #E1E1E6;}
.basicinBox .basicinLi .basicInfo span{margin-right:24px;}
.basicinBox .basicinLi .basicInfo .iconInfo{background:url('../../assets/icon48.png') no-repeat 0 0/100%;width:20px;height:20px;display:inline-block;margin-right:4px;position:relative;top:5px;}
.basicinBox .basicinLi .basicInfo .iconInfo1{background:url('../../assets/icon49.png') no-repeat 0 0/100%;width:20px;height:20px;display:inline-block;margin-right:4px;position:relative;top:5px;}
.basicinBox .basicinLi .basicInfo .iconInfo2{background:url('../../assets/icon7.png') no-repeat 0 0/100%;width:20px;height:20px;display:inline-block;margin:0 4px;position:relative;top:5px;}
.basicinBox .basicinLi .basicInfo .wc100{color: #67C23A;}
.basiButton{padding-top:16px;cursor:pointer;font-size: 14px;color: #A8ABB2;line-height: 20px;text-align:right;}
.basiButton.current{color: #0071DB;}
.basiButton span{padding-left:16px;}
.basiWcd{height: 8px;background: #E6E6E6;border-radius: 2px;overflow:hidden;width:100%;}
.basiWcd .basiWcdjdNums{height: 8px;background: #3384E2;overflow:hidden;}
.countdownTimers{height:30px;line-height:30px;font-size: 16px;color: #161617;margin-bottom:24px;}
.countdownTimers span{height: 30px;padding:0 8px;background: linear-gradient( 180deg, #5E5F62 0%, #303133 100%);box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5);border-radius: 2px;display:inline-block;margin:0 4px 0 12px;color:#fff;}
.reportButton{background: #FFFFFF;border-top:1px solid #E6E6E6;text-align:right;padding:16px 24px;}
.basicinBox .basicinLi .dbfkCLss{color:#F56C6C;}
.basiButton .basiButtonCUr{color:#A8ABB2}
.tipTisBox{height: 40px;background: #FCF6EC;border-radius: 4px;border: 1px solid #F8E3C5;line-height:40px;font-size: 14px;color: #E6A23C;padding:0 17px;margin-bottom:14px;margin-right:10px;}
.tipTisBox i{display:block;float:left;margin-right:4px;width:16px;height:16px;background:url('../../assets/icon9.png') no-repeat 0 0/100%;position:relative;top:12px;}
</style>
