<template>
  <div class="upReportBox" :style="classStyle" v-show="listHSow == true">
    <div class="upReportMain">
      <div class="upReportButton" @click="openClick"><i class="iconUp"></i>上报进度</div>
      <div class="upReportPop" v-if="reportShow">
        <div class="upReportTile">上报进度</div>
        <div class="upReportWapper">
          <div v-if="upReportList.length != 0">
            <div class="upReportList" v-for="(item, i) in upReportList" :key="i">
              <div class="waprTil">{{ item.name }}</div>
              <div class="waprList">
                <div class="slistTil">
                  <span class="rf"><i class="cgIcon" v-if="item.status == 1"></i><i class="errorIcon" v-if="item.status == 2"></i>
                    <span v-if="item.status == 1">{{ parseInt(item.cg/item.all * 100) }}%</span>
                    <span v-if="item.status == 2 " class="errorTxt">上传失败</span>
                  </span>{{ item.title }}
                </div>
                <div class="slistJd">
                  <div class="slistJdVal" v-if="item.status == 1" style="width:100%" :class="item.status == 1?'jdClor1':''"></div>
                  <div class="slistJdVal" v-else-if="item.status == 2" :style="{width:'100%'}" :class="item.status == 2?'jdClor2':''"></div>
                  <div class="slistJdVal" v-else-if="item.status == 3" :style="{width:parseInt(item.cg/item.all * 100)+'%'}"></div>
                </div>
                <div class="zcsbClass" @click="upBaoHandle(item)" v-if="item.status == 2">再次上报</div>
              </div>
            </div>
          </div>
        </div>
        <div class="upReportPotBtn">
          <span class="gjhqbtn rf" @click="upLoagdSigHandle" v-if="upBtns > 7"><el-button class="gjhqprimarybtn">重新上传</el-button></span>
          <span class="gjhqbtn rf" v-else><el-button class="gjhqprimarybtn" @click="closeHandel">确定</el-button></span>
          <span @click="closeQxHandel" v-if="nums != 0">取消上传</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { adminreportprogress, adminreport, adminisprogress, adminreportqx, adminoweport } from '../axios/apiliangbiao'
export default {
  name: 'upreport',
  data () {
    return {
      reportShow: false,
      upReportList: '',
      listHSow: false,
      nums: 0,
      upBtns: 0,
      codes: ''
    }
  },
  props: {
    classStyle: ''
  },
  mounted () {
    let that = this
    adminoweport().then(res => {
      if (res.code == 10000) {
        let datas = res.data
        if (datas.length != 0) {
          that.codes = datas[0].code
        }
      } else {
        // that.$messageOne({message: res.message, type: 'error', duration: 3000})
      }
    }).catch(error => {
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
    that.adminisprogressFun()
  },
  methods: {
    closeQxHandel () {
      let that = this
      adminreportqx(that.codes).then(res => {
        if (res.code == 10000) {
          console.log('成功取消')
          that.adminisprogressFun()
        } else {
          // that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    adminisprogressFun () {
      let that = this
      adminisprogress().then(res => {
        if (res.code == 10000) {
          if (res.status == 2) {
            that.listHSow = true
            that.adminreportprogressFun()
            setInterval(() => {
              that.adminreportprogressFun()
            }, 5000)
          } else {
            that.listHSow = false
          }
        } 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})
      })
    },
    adminreportprogressFun () {
      let that = this
      adminreportprogress().then(res => {
        if (res.code == 10000) {
          let list = res.data
          that.nums = 0
          if (list.length != 0) {
            that.upReportList = res.data
            for (var i = 0; i < list.length; i++) {
              let bfb = list[i].cg / list[i].all
              if (bfb != 1) {
                that.nums += 1
              }
            }
            console.log('that.nums', that.nums)
            that.upBtns = (that.nums / that.upReportList.length) * 10
            that.$forceUpdate()
          }
        } 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})
      })
    },
    upBaoHandle (obj) {
      let that = this
      let objs = {}
      objs.scale_lv1_data = obj.id
      objs.code = that.codes
      adminreport(objs).then(res => {
        if (res.code == 10000) {
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log('error', error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    openClick () {
      this.reportShow = true
    },
    closeHandel () {
      this.reportShow = false
    },
    upLoagdSigHandle () {
      let that = this
      let list = that.upReportList
      let array = []
      for (var i = 0; i < list.length; i++) {
        let status = list[i].status
        if (status == 2) {
          array.push(list[i].id)
        }
      }
      let objs = {}
      objs.scale_lv1_data = array.join(',')
      objs.code = that.codes
      adminreport(objs).then(res => {
        if (res.code == 10000) {
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log('error', error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    }
  }
}
</script>
<style scoped>
.upReportBox{position:absolute;z-index:990;}
.upReportMain{position:relative;}
.upReportButton{width: 124px;height: 40px;line-height:40px;background: #FFFFFF;box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);border-radius: 26px;border: 1px solid #0071DB;text-align:center;font-size: 16px;color: #0071DB;cursor: pointer;}
.upReportButton .iconUp{width:22px;height:22px;display:inline-block;background:url('../assets/icon47.png') no-repeat 0 0/100%;margin-right:4px;position:relative;top:5px;}
.upReportPop{width: 480px;height: 493px;background: #FAFAFA;box-shadow: 0px 12px 32px 0px rgba(0,0,0,0.12);border-radius: 2px;position:absolute;top:44px;right:0;z-index:990;}
.upReportTile{height: 52px;background: #FFFFFF;box-shadow: 0px 1px 0px 0px rgba(141,143,153,0.2);border-radius: 2px 2px 0px 0px;line-height:52px;padding:0 20px;font-weight: bold;font-size: 16px;color: #303133;}
.upReportWapper{height:382px;padding:0 20px;overflow: hidden;overflow-y:auto;}
.upReportPotBtn{height: 60px;background: #FFFFFF;box-shadow: 0px -1px 0px 0px rgba(141,143,153,0.2);border-radius: 0px 0px 2px 2px;line-height:60px;padding:0 20px;font-size: 14px;color: #787B80;}
.upReportPotBtn span{cursor: pointer;}
.upReportWapper .waprTil{height: 24px;font-weight: bold;font-size: 14px;color: #161617;line-height: 24px;margin:20px 0 0;}
.upReportWapper .waprList{margin-bottom:24px;}
.upReportWapper .waprList .slistTil{font-size: 14px;color: #161617;line-height: 22px;margin-bottom:12px;}
.upReportWapper .waprList .slistJd{height: 4px;background: #E6E6E6;border-radius: 4px;width:100%;overflow:hidden;}
.upReportWapper .waprList .slistJd .slistJdVal{height: 4px;background: #0071DB;border-radius: 4px;overflow:hidden;}
.upReportWapper .waprList .slistJd .slistJdVal.jdClor1{background: #67C23A;}
.upReportWapper .waprList .slistJd .slistJdVal.jdClor2{background: #F56C6C;}
.upReportWapper .waprList .errorTxt{color:#F56C6C;}
.upReportWapper .waprList .zcUp{text-align:center;font-size: 14px;color: #0071DB;line-height: 20px;margin-top:8px;}
.upReportWapper .waprList .cgIcon{background:url('../assets/icon7.png') no-repeat 0 0/100%;width:16px;height:16px;display:inline-block;margin-right:4px;position:relative;top:3px;}
.upReportWapper .waprList .errorIcon{background:url('../assets/icon8.png') no-repeat 0 0/100%;width:16px;height:16px;display:inline-block;margin-right:4px;position:relative;top:3px;}
.zcsbClass{text-align: center;color: #0071DB;line-height:20px;margin-top:4px;cursor:pointer;}
</style>
