<template>
  <div>
      <el-row  :span="24" style="padding: 20px;background: #fff;border:1px #e1e4e7 solid;box-shadow: 0 2px 4px rgba(140,140,140,0.1);">
            <el-col :span="5" style="position: relative;">
                <ShowDeptName :deptId.sync="formData.dept_id"></ShowDeptName>
            </el-col>
				    <el-col style="margin-left:20px;" :span="8">
              <el-col :span="8">
                <el-select v-model="time_type" placeholder="请选择分类" style="width: 100px;">
                  <el-option
                    v-for="item in time_types"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>

              <el-col :span="16">
                <el-date-picker
                  v-show="time_type == '2'"
                  v-model="export_from.year"
                  class="date-picker-width"
                  type="year"
                  value-format="yyyy"
                  :clearable="false"
                  :editable="false"
                  placeholder="选择年份排名"
                ></el-date-picker>
                <el-date-picker
                  v-show="time_type == '1' || time_type == '月份'"
                  v-model="export_from.month"
                  class="date-picker-width"
                  type="month"
                  value-format="yyyy-MM"
                  :clearable="false"
                  :editable="false"
                  placeholder="选择月份排名"
                ></el-date-picker>
              </el-col>
				    </el-col>
      </el-row>

      <el-col :span="24">
        <el-row class="raiders_box">
          <el-row style="position: relative;">
            <el-col :span="24">
              <b class="title" style="margin-bottom:15px;display:block">{{yearhORmontStr}}积分构成</b>
            </el-col>
            <div v-loading="IntegralFormChartLoad">
              <div class="nopoint_box" style="height:340px;" v-show="IntegralFormnone">
                <div class="noimg" style="width: 150px;height: 160px;margin-top:80px;"></div>
                <span class="title1">暂无积分数据，<span @click="$router.push({ path: '/award_punish' })" style="color:#409EFF;cursor:pointer;">去奖扣积分></span></span>
              </div>
              <div v-show="!IntegralFormnone">
                <div ref="IntegralFormChart" :style="{width: '900px', height: '400px'}"></div>
              </div>
            </div>
          </el-row>
        </el-row>
      </el-col>

      <el-col :span="24" style="display:flex;justify-content: space-between;">
        <el-col style="width:49%;">
          <el-row class="pointsevent_box">
            <div class="grid-content bg-purple" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;">
              <span class="title">{{yearhORmontStr}}奖分最高</span>

              <div class="nopoint_box" v-if="!prize.id">
                <div class="noimg" style="margin: 0px auto 0;width:80px;height:80px;"></div>
                <span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
              </div>

              <div v-else style="display:flex;padding:8px 0 20px 0;height:126px;">
                <userImage
                  width="45px"
                  height="45px"
                  :id="prize.id"
                  :user_name="prize.name"
                  fontSize="14"
                  style="margin-right:8px"
                ></userImage>
                <div class="rightexamineAndApproveList" style="border:0px">
                  <p class="font-flex-word" style="width:300px;font-size:16px;">
                    <b><WWOpenData type="userName" :openid="prize.name"></WWOpenData></b>
                    <span class="blue"><span v-if="prize.point>0" style="padding-left:30px;">+</span>{{prize.point}} B分</span></p>
                  <p style="font-size:13px;line-height:20px;color:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; ">{{prize.remark? prize.remark.customize : ''}}</p>
                </div>
              </div>
            </div>
          </el-row>
        </el-col>

        <el-col style="width:49%;">
          <el-row class="pointsevent_box">
            <div class="grid-content bg-purple" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;">
              <span class="title">{{yearhORmontStr}}扣分最多</span>

              <div class="nopoint_box" v-if="!buckle.id">
                <div class="noimg" style="margin: 0px auto 0;width:80px;height:80px;"></div>
                <span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
              </div>

              <div v-else style="display:flex;padding:8px 0 20px 0;height:126px;">
                <userImage
                  width="45px"
                  height="45px"
                  :id="buckle.id"
                  :user_name="buckle.name"
                  style="margin-right:8px"
                ></userImage>
                <div class="rightexamineAndApproveList"  style="border:0px">
                  <p class="font-flex-word" style="width:300px;font-size:16px;">
                    <b ><WWOpenData type="userName" :openid="buckle.name"></WWOpenData></b>
                    <span class="yellow" style="padding-left:30px;">{{buckle.point}} B分</span>
                  </p>
                  <p style="font-size:13px;line-height:20px;color:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;">{{buckle.remark?buckle.remark.customize:''}}</p>
                </div>
              </div>
            </div>
          </el-row>
        </el-col>
      </el-col>


      <el-col :span="24" style="margin-bottom:20px;">
        <el-row class="raiders_box">
          <el-row style="position: relative;">
            <el-col :span="24" style="display:flex">
              <b class="title" style="margin:0 20px 15px 0;display:block">部门{{yearhORmontStr}}积分情况</b>
              <el-checkbox v-model="exclusiveMonthChecked">不包含自动积分加分项</el-checkbox>
            </el-col>
            <div v-loading="monthlyIntegralloading">
              <div class="nopoint_box" style="height:450px;" v-if="monthlyIntegralnone">
                <div class="noimg" style="width: 150px;height: 150px;margin-top:110px;"></div>
                <span class="title1">暂无积分数据</span>
              </div>

              <div v-show="!monthlyIntegralnone">
                <div ref="monthlyIntegralChart" :style="{width: '930px', height: '400px'}"></div>
                <div style="width:100%;display:flex;justify-content: space-around;margin-top:30px;padding-left:40px">
                  <p v-for="(item,index) in monthORyear=='2'?monthlyIntegralList:yearlyIntegralList" :key="index" style="text-align:center">
                    <b style="display:block;color:#303133;font-size:18px;" v-if="index<3">{{index==0?item.total_point:index==1?item.reward_point:index==2?item.deduction_point:''}}</b>
                    <b style="display:block;color:#303133;font-size:18px;" v-else-if="index==3">{{item.ratio==-1?'—':item.ratio+':1'}}</b>
                    <b style="display:block;color:#303133;font-size:18px;" v-else>{{item.toRatio.ratio+'%'}}
                      <svg-icon :icon-class="item.toRatio.type==1?'litrearrows':item.toRatio.type==2?'droparrows':''" style="font-size:10px;margin-bottom:2px"/>
                    </b>
                    <span style="color:rgb(48, 49, 51);font-size:14px;margin-top:5px;display:block;">{{item.name}}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-row>
        </el-row>
      </el-col>


  </div>
</template>
<script>
  import ECharts from "echarts";
  export default {
    data(){
      return{
        //筛选项
				formData:{
					dept_id: 0,
        },
        //时间
        time_type: "月份",
        time_types: [
          { label: "月份", value: "1" },
          { label: "年份", value: "2" }
        ],
        export_from: {
          year: this.$moment().format('YYYY'),
          month: this.$moment().format('YYYY-MM'),
        },
        yearhORmontStr:'月',
        monthORyear:'2',
        //部门
				dept_name:[],
        dept_tree: [],

        //饼图
        IntegralFormChartLoad:false,//积分构成loading
        IntegralFormnone:false,//积分构成为空或报错，展示的开关

        //奖扣分最高积分事件
        highestPrizeBuckleloading:false,//奖扣最高loading
        prize:{},//奖分最高
        buckle:{},//扣分最高

        //本月积分情况
        exclusiveMonthChecked:true,//不包含自动积分加分项
        monthlyIntegralList:[//年积分情况数据
          {total_point:'0',name:'月总积分'},
          {reward_point:'0',name:'月总奖分'},
          {deduction_point:'0',name:'月总扣分'},
          {ratio:'0',name:'奖扣分比例'},
          {toRatio:{ratio:'0',type:0},name:'对比上月总分'},
          {toRatio:{ratio:'0',type:0},name:'对比上月奖分'},
          {toRatio:{ratio:'0',type:0},name:'对比上月扣分'},
        ],
        yearlyIntegralList:[//年积分情况数据
          {total_point:'0',name:'年总积分'},
          {reward_point:'0',name:'年总奖分'},
          {deduction_point:'0',name:'年总扣分'},
          {ratio:'0',name:'奖扣分比例'},
          {toRatio:{ratio:'0',type:0},name:'对比去年总分'},
          {toRatio:{ratio:'0',type:0},name:'对比去年奖分'},
          {toRatio:{ratio:'0',type:0},name:'对比去年扣分'},
        ],
        monthlyIntegralloading:false,//本月积分情况loading
        monthlyIntegralnone:false,//本月积分情况为空或报错，展示的开关
        exclusiveMonthBranch:0,//本月积分情况--部门
        toPdept1:0,
      }
    },
    watch:{
      time_type(val){
        if(val == '1'){//月
          this.monthORyear = '2'
          this.formData.year = null
          this.formData.month = this.$moment().format("YYYY-MM")
          this.export_from.month = this.$moment().format("YYYY-MM")
          this.yearhORmontStr = '月'
        }else if(val == '2'){//年
          this.monthORyear = '3'
          this.formData.month = null
          this.formData.year = this.$moment().format("YYYY")
          this.export_from.year = this.$moment().format("YYYY")
          this.yearhORmontStr = '年'
        }
        this.executiveFunction()
      },
			'export_from.month'(val,old_val){
        this.formData.month = val
        this.executiveFunction()
			},
			'export_from.year'(val,old_val){
        this.formData.year = val
        this.executiveFunction()
			},
			'formData.dept_id'(val,old_val){
        this.executiveFunction()
      },
      //不包含自动积分加分项
      exclusiveMonthChecked(){
        this.monthlyIntegral()
      },
    },
		mounted(){
       this.formData.month = this.$moment().format("YYYY-MM")
      this.executiveFunction()
			if (localStorage.getItem('dept_tree')) {
				this.dept_tree = this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')))
      }else{
        this.$store.dispatch('get_dept_tree').then((res) => {
          this.$nextTick(() => {
            this.dept_tree = 	this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')))
          })
        })
      }
    },
    methods: {
      //需要执行的所有函数
      executiveFunction(){
          this.integralForm()//饼图
          this.highestPrizeBuckle()//奖扣分最高积分事件
          this.monthlyIntegral()//本月积分情况
      },
      //饼图
      //分为两列展示，多传legendDataTwo
      drawLine(legendDataOne,legendDataTwo,dadalist){
      // drawLine(legendDataOne,dadalist){
        const chart = this.$refs.IntegralFormChart
        //此处可给固定颜色，不给就所有颜色随机
        let colors = ['rgb(38, 162, 255)','#f36f2a','#fecb09','#00b6bd','#e85d53','#fecb09','#725197','#fcb814','#41a08d','#425a95','#ea8b84','#9d1d62','#fcb814'];
        // let colors = [];
        let legendDataLeng = legendDataOne.length + legendDataTwo.length
        if(legendDataLeng>colors.length){//当列表大于固定颜色时，给随机颜色
          let colorsLeng = colors.length
          for(let i = 0;i <= (legendDataLeng - colorsLeng); i++){
            // colors.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());//也是随机色
            colors.push('rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')');
          }
        }
        //只显示 N 条标题，多余隐藏，但是饼图不会隐藏
        let DataLengths = []
        for(let i in legendDataTwo){
          if(i<8){
            DataLengths.push(legendDataTwo[i])
          }
        }
        let left1 = '45%'
        let left2 = '45%'
        let leftBT = '25%'
        if(legendDataTwo.length != 0){
          left1 = '36%'
          leftBT = '18%'
        }
        if (chart) {
          const myChart = ECharts.init(chart)
          var legendData1 = legendDataOne
          var legendData2 = DataLengths
          const option = {
            tooltip: {trigger: 'item',formatter: '{b}'},
            legend: [{type: "scroll",orient: 'vertical',icon:'square',left: left1,align: 'left',top: '10%',itemGap: 20,textStyle: {fontSize:14,color: 'rgb(48, 49, 51)'},data: legendData1},
            //分为两列展示
                     {type: "scroll",orient: 'vertical',icon:'square',left: '70%',align: 'left',top: '10%',itemGap: 20,textStyle: {fontSize:14,color: 'rgb(48, 49, 51)'},data: legendData2}],
            color:colors,
            grid:{x:25,y:45,x2:5,y2:20,borderWidth:1},
            toolbox: {show: true,feature: {mark: {show: true},magicType:{show: true,type: ['pie', 'funnel']},}},
            series: [{name: '',type: 'pie',radius: [20, 110],center: [leftBT, '40%'],roseType: 'radius',label: {show: false},emphasis: {label: {show: false}},data: dadalist},]
          }
          myChart.setOption(option)
        }
      },
      integralForm(){
        this.IntegralFormChartLoad = true
        let listslength = []
        let params = {}
        params.dept_id = this.formData.dept_id
        if(this.monthORyear == '2'){//月
          params.month = this.formData.month
        }else if(this.monthORyear == '3'){//年
          params.year = this.formData.year
        }
        this.$http('get','/api/integral/statistics/pie/b',params,'v2').then(res => {
          let lists = res.data.data.list
          listslength = lists
          let legendData1 = []
          let legendData2 = []
          let dadalist = []
          //分为两列展示
          // let listLeng = Math.ceil((lists.length)/2)

          for(let i in lists){
            if(lists[i].name.length>10){
              lists[i].name = lists[i].name.slice(0,10)+'...'
            }
            //分为两列展示
            // if(i<listLeng){
            //   legendData1.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            // }else{
            //   legendData2.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            // }
            if(i<8){
              legendData1.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            }else{
              legendData2.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            }

            let dataListDx = {}
            if(lists[i].ratio < 0){
              dataListDx.value = 0
            }else{
              dataListDx.value = lists[i].ratio
            }
            dataListDx.name = lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%'
            // dataListDx.name = lists[i].name
            dadalist.push(dataListDx)
          }
          //分为两列展示，多传legendData2
          this.drawLine(legendData1,legendData2,dadalist)//图表
          // this.drawLine(legendData1,dadalist)//图表
        }).finally(() => {
          if(listslength.length == 0){
            this.IntegralFormnone = true
          }else{
            this.IntegralFormnone = false
          }
          this.IntegralFormChartLoad = false
        });
      },


      //奖扣分最高积分事件
      highestPrizeBuckle(){
        this.highestPrizeBuckleloading = true
        let params = {
          page:'1',
          page_size:'1'
        }
        params.dept_ids = this.formData.dept_id
        params.time_type = this.monthORyear,
        params.pt_id ='3'
        if(this.monthORyear == '2'){//月
          params.month = this.formData.month
        }else if(this.monthORyear == '3'){
          params.year = this.formData.year
        }
        this.$http('get','/api/integral/statistics/prize/buckle/ranking',params).then((res)=>{
          if(res.data.code == 1){
            if(res.data.data.prize.length !=0){
              this.prize = res.data.data.prize[0]
            }else{
              this.prize = []
            }
            if(res.data.data.buckle.length !=0){
              this.buckle = res.data.data.buckle[0]
            }else{
              this.buckle = []
            }
          }
        }).finally(()=>{
          this.highestPrizeBuckleloading = false
        })
      },

      //月度积分
      monthlyIntegralRanking(date,total,reward,deduction){
        const chart = this.$refs.monthlyIntegralChart
        if(chart){
          const myChart = ECharts.init(chart)
          const option = {
            tooltip: {
                trigger: 'axis'
            },
            color:['#F56C6C','#26A2FF','#FFC100'],
            legend: {
                right: '0%',
                data: ['总积分', '奖分', '扣分']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
              type: 'value',
              axisLine:{
                  show:false
              },
              axisTick:{
                  show:false
              },
            },
            series: [
                {
                    name: '总积分',
                    type: 'line',
                    data: total
                },
                {
                    name: '奖分',
                    type: 'line',
                    data: reward
                },
                {
                    name: '扣分',
                    type: 'line',
                    data:deduction
                }
            ]
          };
          myChart.setOption(option)
        }
      },
      monthlyIntegral(){
        this.monthlyIntegralloading = true
        let params = {}
        let listslength = []
        params.dept_id = this.formData.dept_id
        if(this.monthORyear == '2'){//月
          params.month = this.formData.month
        }else if(this.monthORyear == '3'){//年
          params.year = this.formData.year
        }
        if(this.exclusiveMonthChecked){
          params.include_fixed = 1
        }else{
          params.include_fixed = 0
        }
        this.$http('get','/api/integral/statistics/curve',params)
        .then(res => {
          if(res.data.code == 1){
            let lists = res.data.data
            listslength = lists
            if(this.monthORyear == '2'){
              this.monthlyIntegralList[0].total_point = lists.total_point
              this.monthlyIntegralList[1].reward_point = lists.reward_point
              this.monthlyIntegralList[2].deduction_point = lists.deduction_point
              this.monthlyIntegralList[3].ratio = lists.ratio
              this.monthlyIntegralList[4].toRatio = lists.contrast_total
              this.monthlyIntegralList[5].toRatio = lists.contrast_reward
              this.monthlyIntegralList[6].toRatio = lists.contrast_deduction
            }else if(this.monthORyear == '3'){
              this.yearlyIntegralList[0].total_point = lists.total_point
              this.yearlyIntegralList[1].reward_point = lists.reward_point
              this.yearlyIntegralList[2].deduction_point = lists.deduction_point
              this.yearlyIntegralList[3].ratio = lists.ratio
              this.yearlyIntegralList[4].toRatio = lists.contrast_total
              this.yearlyIntegralList[5].toRatio = lists.contrast_reward
              this.yearlyIntegralList[6].toRatio = lists.contrast_deduction
            }
            let dates = []//日期
            let totals = []//总积分
            let rewards = []//奖分
            let deductions = []//扣分
            for(let i in lists.total){
              dates.push(lists.total[i].date)
              totals.push(lists.total[i].point)
            }
            for(let i in lists.reward){
              rewards.push(lists.reward[i].point)
            }
            for(let i in lists.deduction){
              deductions.push(lists.deduction[i].point)
            }
            this.monthlyIntegralRanking(dates,totals,rewards,deductions)
          }
        }).finally(() => {
          if(!listslength.total){
            this.monthlyIntegralnone = true
          }else{
            this.monthlyIntegralnone = false
          }
          this.monthlyIntegralloading = false
        });
      },

			// 递归判断列表，把最后的children设为undefined
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].children.length<1){
						// children若为空数组，则将children设为undefined
						data[i].children=undefined;
					}else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
    },
  };
</script>
<style scoped>
  .raiders_box {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border:1px #e1e4e7 solid;
    box-shadow: 0 2px 4px rgba(140,140,140,0.1);
  }
  .raiders_box .title {
    font-family: Microsoft Yahei;
    padding-left: 10px;
    font-size: 16px;
    font-weight: normal;
    border-left: 2px solid #409EFF;
  }


  .pointsevent_box {
    display: block;
    text-align: center;
    margin: 20px 0 0 0px;
    padding-right: 0 !important;
    border:1px #e1e4e7 solid;
    box-shadow: 0 2px 4px rgba(140,140,140,0.1);
  }

  .pointsevent_box .title {
    font-family: Microsoft Yahei;
    display: block;
    text-align: left;
    margin-bottom: 20px;
    padding: 0 0 0 10px;
    font-size:16px;
    font-weight: normal;
    border-left: 2px solid #409EFF;
  }
  .rightexamineAndApproveList{
    text-align:left;
    width:100%;
    border-bottom:1px solid #EFEFEF;
  }

  /* .pointsevent_box .more:hover {
    color: #26A2FF !important;
  } */

  .nopoint_box {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
  }

  .nopoint_box .noimg {
    display: inline-block;
    width: 110px;
    height: 110px;
    margin: 22px auto 16px;
    background: url(/images/nodata_default.png) no-repeat center;
    background-size: 99%;
  }

  .nopoint_box .noperson {
    display: inline-block;
    width: 110px;
    height: 110px;
    margin: 22px auto 16px;
    background: url(/images/noperson_default.png) no-repeat center;
    background-size: 99%;
  }

  .nopoint_box .title1 {
    display: block;
    text-align: center;
    font-size: 12px !important;
    color: #909399 !important;
    padding: 0;
  }

  .nopoint_box a {
    color: #26A2FF;
  }
</style>
