<template>
  <div @click="colorDidNone">
    <div class="swiperBg" :style="'background-color:'+color1" v-loading="loading || deptNameLoad">
      <el-row type="flex" justify="center" style="position: relative;">
        <div :style="'position:absolute;left:0;display:flex;display:'+colorPicker">
          <el-color-picker v-model="color1" size="mini" @change="colorPicker1"></el-color-picker>
          <el-color-picker v-model="color2" size="mini" @change="colorPicker2"></el-color-picker>
        </div>
        <el-col :xs="22" :sm="22" :md="24" :lg="12" :xl="10">
          <div class="title" v-if="types == 1" :style="'color:'+color2"><div>{{titleVal.titleVal1 == ""?companyName:titleVal.titleVal1}}</div><span>最新的积分事件</span><p>最后更新时间：{{lastTime}}</p></div>
          <div class="title" v-if="types == 2" :style="'color:'+color2"><div>{{titleVal.titleVal2 == ""?companyName:titleVal.titleVal2}}</div><span>{{deptName}} &nbsp;{{month}}&nbsp;{{formData.position == "all"?"":formData.position == "manager"?'管理者':formData.position == "employee"?'员工':''}}积分排名</span><p>最后更新时间：{{lastTime}}</p></div>
          <div class="title" v-if="types == 3" :style="'color:'+color2"><div>{{titleVal.titleVal3 == ""?companyName:titleVal.titleVal3}}</div><span>{{deptName}} &nbsp;{{formData.position == "all"?"":formData.position == "manager"?'管理者':formData.position == "employee"?'员工':''}}累计B分排名</span><p>最后更新时间：{{lastTime}}</p></div>
          <marquee style="height: calc(100vh - 106px);" scrollamount="2" scrolldelay="60" loop="-1" truespeed align="middle" behavior="scroll" direction="up" onbounce="MaqueeBounceFun">

            <div v-show="types == 2">
              <el-row  v-for="(item,index) in list" :key="index" class="row" :style="'color:'+color2">
                <el-col class="list_name" :span="4">{{item.rank}}</el-col>
                <el-col :span="10">{{item.employee_name}}</el-col>
                <el-col class="point" :span="10">{{item.point}}分</el-col>
              </el-row>
            </div>

            <div v-show="types == 1">
              <el-row  v-for="(item,index) in list" :key="index" class="row">
                <el-col :span="4">
                  <center>
                    <userImage :id="item.employee_id" :user_name="item.employee_name" :img_url="item.employee_img_url" fontSize="26" width="80px" height="80px"></userImage>
                  </center>
                </el-col>
                <el-col :span="20">
                  <p class="integralPersonnel">
                    <el-row>
                      <el-col :span="8" :style="'color:'+color2">{{item.employee_name}}</el-col>
                      <el-col :span="16">
                        <span style="margin-left: 30px;" :class="item.point>0?'color_red':'color_green'">{{item.point>0?'+'+item.point:item.point}}分</span>
                      </el-col>
                    </el-row>
                  </p>
                  <p class="integralDetails" :style="'color:'+color2">{{item.remark}}</p>
                </el-col>
              </el-row>
            </div>
            
            <div v-show="types == 3">
              <el-row  v-for="(item,index) in list" :key="index" class="row" :style="'color:'+color2">
                <el-col class="list_name" :span="4">{{item.rank}}</el-col>
                <el-col :span="10">{{item.employee_name}}</el-col>
                <el-col class="point" :span="10">{{item.point}}分</el-col>
              </el-row>
            </div>
            
          </marquee>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  // types  1为积分事件 2为部门排行 3为累计B分排行
  export default {
    name: "deptRankSwiper",
    data() {
      return {
        colorPicker:'block',
        color1: '#000000',
        color2: '#fff',
        titleVal:JSON.parse(localStorage.getItem("titleVal")),
		    companyName:JSON.parse(window.localStorage.getItem("site_info")).name,
        loading: false,
        deptNameLoad: false,
        list: [],
        formData:{},
        types: 0,
        month: null,
        deptName: null,
        lastTime: null
      }
    },
    methods: {
      colorDidNone(){
        this.colorPicker = this.colorPicker == 'block'?'none':'block'
      },
    //轮播背景
    colorPicker1(col){
      this.color1 = col
    },
    //轮播字体颜色
    colorPicker2(col){
      this.color2 = col
    },
    MaqueeBounceFun(){
        console.log("我滚到结尾啦！");
    },
      getData(){
        let self = this
        self.loading = true
        let data = this.formData
        delete data.types
        // let headers = self.types == 1?{'Accept': 'application/json, text/plain, */*'}:{'Accept': 'application/vnd.test.v2+json'}
        self.$http('get',
          self.types == 1?'/api/integral/statistics/integral':self.types == 2?'/api/integral/statistics/ranking':self.types == 3?'/api/integral/statistics/ranking':'',
          data,
          self.types == 1?'':'v2',
        ).then((res) => {
          if (res.data.code == 1) {
            console.log(res)
            self.lastTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
            self.list = res.data.data.list
          }else{
            self.$message.error(res.data.data.msg)
          }
        }).catch((e)=>{
          self.$message.error(e.data.data.msg)
        }).finally(()=>{
          self.loading = false
        })
      },
      getDeptName(id){
        let self = this
        if (id !== '0') {
          self.deptNameLoad = true
          self.$http('get','/api/department/info',{id: id}).then((res) => {
            if (res.data.code == 1) {
              self.deptName = res.data.data.name
            }else{
              self.$message.error(res.data.data.msg)
            }
          }).catch((e)=>{
            self.$message.error(e.data.data.msg)
          }).finally(()=>{
            self.deptNameLoad = false
          })
        }else{
          self.deptName = '全公司'
        }
      }
    },
    mounted() {
      this.formData = this.$route.query
      console.log(this.formData)
      this.types = this.$route.query.types
      this.$route.query.month?this.month = moment(this.$route.query.month).format('YYYY年MM月'):''
      this.$route.query.dept_id?this.getDeptName(this.$route.query.dept_id):''
      this.getData()
      setInterval(() => {
        this.getData()
      }, parseInt(Math.random()*(1800000-1200000+1)+1200000,10));
    },
    created() {},
  }
</script>

<style scoped lang="scss">
  .swiperBg{
    color: #fff;
    height: 100vh;
    font-size: 3rem;
    .title{
      font-size: 40px;
      text-align: center;
      margin: 20px 0;
      p{
        font-size: 16px;
      }
      span{
        font-size:30px
      }
    }
    .row{
      margin-bottom: .6em;
      .el-col-10{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .list_name{
        text-align: center;
      }
      .point{
        text-align: center;
      }
      .integralDetails{
        font-size: .6em; 
        margin: 0; 
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow : hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .integralPersonnel{
        font-size: .8em; 
        margin: 0; 
        margin-bottom: 15px;
      }
    }
  }
  .color_red{
    color: red;
  }
  .color_green{
    color:green
  }
</style>