<template>
  <div class="statistics-container">
    <scroller>
      <div class="statistics-title__bar">
        <div class="statistics-title__text" v-if="isPersonalType">
          <div class="back-wrap" @click="$route_back">
            <van-icon name="arrow-left" />
            返回
          </div>
          <div class="statistics-nav__title">
            <p class="title"><Wxopendata type="userName" :openid="title"></Wxopendata>的统计</p>
          </div>
          <!-- <YearMonthPicker v-model="month"/>-->
          <div style="width: 1.68rem;"></div>
        </div>
        <div class="statistics-title__text" v-else>
          <span style="flex: 1">{{ title }}</span>
          <!-- <YearMonthPicker v-model="month"/>-->
        </div>
        <div class="monthly-point_wrap">
          <div class="monthly-point_title"><span>月度积分</span></div>
          <div class="monthly-point_content">
            <div class="monthly-point_item" v-for="(o, i) in monthlyPointItems" @click="goTo(o)" :key="i">
              <span class="monthly-point__value">{{ o.value }}</span>
              <span class="monthly-point__label">{{ o.label }}</span>
            </div>
          </div>
        </div>
      </div>
      <van-cell-group class="curr-bpoint__wrap" v-if="hasPermission">
        <div class="curr-bpoint__title">
          <span>本月B分奖扣</span>
          <smallTip icon="question-o" class="small_tip" position="28%"><div>作为管理者，管理执行力是关键，每月按要求完成奖分和扣分任务。</div></smallTip>
        </div>
        <div class="curr-bpoint__content">
          <div class="bpoint-items__wrap">
            <div class="bpoint-item">
              <span class="bpoint-item__value">{{ reward.point }}</span>
              <span class="bpoint-item__label">奖分</span>
              <span class="bpoint-item__target">目标{{ reward.target_point }}</span>
            </div>
            <div class="bpoint-item">
              <span class="bpoint-item__value">{{ deduction.point }}</span>
              <span class="bpoint-item__label">扣分</span>
              <span class="bpoint-item__target">目标{{ deduction.target_point }}</span>
            </div>
            <div class="bpoint-item">
              <span class="bpoint-item__value black-color">{{ execRatio }}</span>
              <span class="bpoint-item__label">奖扣比例</span>
              <span class="bpoint-item__target">目标>{{ executeTargetRatio }}</span>
            </div>
            <div class="bpoint-item">
              <span class="bpoint-item__value black-color">{{ exec.count }}</span>
              <span class="bpoint-item__label">奖扣人次</span>
              <span class="bpoint-item__target">目标{{ exec.target_count }}</span>
            </div>
          </div>
        </div>
      </van-cell-group>

      <van-cell-group class="curr-bpoint__wrap bpoint-nav___wrap" v-if="rankingList.length > 0">
        <div class="curr-bpoint__title flex-box flex-v-ce">
          <span class="flex-1">我的排行榜</span>
          <span style="font-size: 12px;color: #909399;">最近更新: {{rankingList[0].update_time}}</span>
        </div>
        <div @click="openRanking(item)" v-for="(item, index) in rankingList" :key="index">
          <div class="flex-box flex-v-ce ranking_list">
            <div class="ranking_name font-flex-word">{{ item.name }}</div>
            <span class="ranking_num flex-1" v-if="item.rank>0">第<span>{{ item.rank }}</span>名</span>
            <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
          </div>
        </div>
        <div v-if="rankingTotal > 5" class="rankingLists" @click="openLists()">查看更多</div>
      </van-cell-group>

      <van-cell-group class="bpoint-nav___wrap">
        <van-cell is-link to="manager_reward_deduction" v-if="!isPersonalType && hasPermission">
          <template #title>
            <span class="bpoint-nav__title">管理者奖扣情况</span>
          </template>
          <template #icon>
            <icon class="bpoint-nav__icon" name="manage_reward_deduction" />
          </template>
        </van-cell>
        <van-cell is-link to="team_data" v-if="!isPersonalType && hasPermission">
          <template #title>
            <span class="bpoint-nav__title">团队数据</span>
          </template>
          <template #icon>
            <icon class="bpoint-nav__icon" name="team_data" />
          </template>
        </van-cell>
        <van-cell is-link @click.stop="linkToEventList">
          <template #title>
            <span class="bpoint-nav__title">积分事件</span>
          </template>
          <template #icon>
            <icon class="bpoint-nav__icon" name="my_event_icon" />
          </template>
        </van-cell>
        <van-cell is-link to="integral_rank">
          <template #title>
            <span class="bpoint-nav__title">部门B分排名</span>
          </template>
          <template #icon>
            <icon class="bpoint-nav__icon" name="integral_rank_icon" />
          </template>
        </van-cell>

        <van-cell is-link to="rankB">
          <template #title>
            <span class="bpoint-nav__title">累计B分排名</span>
          </template>
          <template #icon>
            <icon class="bpoint-nav__icon" name="rank_b_icon" />
          </template>
        </van-cell>

<!--        <van-cell is-link to="customBRank">
          <template #title>
            <span class="bpoint-nav__title">自定义分组B分排名</span>
          </template>
          <template #icon>
            <icon class="bpoint-nav__icon" name="custom_b_rank" />
          </template>
        </van-cell> -->
      </van-cell-group>
    </scroller>
  </div>
</template>

<script>
import request from '@/utils/request'
import Vue from 'vue'
import { Cell, Overlay } from 'vant'
import moment from 'moment'
import smallTip from '@/components/common/smallTip'
import YearMonthPicker from '@/components/common/YearMonthPicker'

Vue.use(Cell).use(Overlay)

export default {
  name: 'statistics_personal',
  data () {
    const now = new Date()
    return {
      manage_scope: this.$store.getters.user_info.employee_detail.manage_scope,
      is_creator: this.$store.getters.user_info.is_creator,
      employeeName: null,
      month: this.$route.query.month || moment(now).format('YYYY-MM'),
      newMonth: this.$route.query.month || now.getMonth() + 1,
      monthlyPointItems: [
        // { label: `${now.getMonth() + 1}月绩效分`, value: 0, to: 'my_statistics_personal' },
        { label: '本月A分', value: 0, to: 'statistics_personal_a' },
        { label: '本月B分', value: 0, to: 'statistics_personal_b' }
      ],
      exec: { count: 0, target_count: 0 },
      ratio: { ratio: 0, target_ratio: 0 },
      reward: { point: 0, target_point: 0 },
      deduction: { point: 0, target_point: 0 },
      employee_id: null,
      rankingList: [], // 我的排名列表
      rankingTotal: 0// 我的排名列表数
    }
  },
  computed: {
    isPersonalType () {
      return this.$route.query.type == 2
    },
    title () {
      return this.isPersonalType ? `${this.employeeName || ''}` : '统计'
    },
    execRatio () {
      if (this.reward.point === 0 || this.deduction.point === 0) {
        return '-'
      }
      return `${this.ratio.ratio}:1`
    },
    executeTargetRatio () {
      return this.ratio.target_ratio <= 0 ? '0:0' : `${this.ratio.target_ratio}:1`
    },
    hasPermission () {
      const userInfo = this.$store.getters.user_info
      if (userInfo && userInfo.is_creator === 1) {
        return true
      }
      return userInfo && userInfo.employee_detail && Array.isArray(userInfo.employee_detail.manage_scope) && userInfo.employee_detail.manage_scope.length > 0
    }
  },
  watch: {
    month: function (val) {
      let month = val.split('-')[1]
      let nowmonth = 0
      if (month < 10) {
        nowmonth = month.substring(1, 2)
      }
      this.monthlyPointItems[0].label = nowmonth + '月绩效'
      this.getData()
    }
  },
  // 组件
  components: {
    smallTip,
    YearMonthPicker
  },
  methods: {
    linkToEventList () {
      this.$router.push({ name: 'event_list', query: { employee_id: this.$route.query.id } })
    },
    goTo (item) {
      if (this.employee_id) {
        this.$router.push({ name: item.to, query: { month: this.month, employee_id: this.employee_id } })
      } else {
        this.$router.push({ name: item.to, query: { month: this.month } })
      }
    },
    getData () {
      this.$toast.loading({message: '正在加载'})
      const params = { employee_id: 0, month: this.month }
      if (this.isPersonalType) {
        params.month = this.month
        params.employee_id = this.$route.query.id
      }
	    var http1 = request('get','/api/integral/statistics',params)
	    var http2 = request('get','/api/integral/statistics/groups/employee',{ page: 1, page_size: 5})
      Promise.all([http1, http2]).then(item => {
        if (item[0].data.code === 1) {
          const item1 = item[0].data.data
          const task = item1.task
          this.employeeName = item1.name
          this.exec = task.exec
          this.ratio = task.ratio
          this.reward = task.reward
          this.deduction = task.deduction
          this.monthlyPointItems[0].value = item1.performance.review_point
          this.monthlyPointItems[1].value = item1.a.month_point
          this.monthlyPointItems[2].value = item1.b.month_point
        }
        if (item[1].data.code === 1) {
          this.rankingList = item[1].data.data.list
          this.rankingTotal = item[1].data.data.total
        }
      }).finally(() => this.$toast.clear())
    },
    getRanking () {
      const params = { page: 1, page_size: 5}
      request('get','/api/integral/statistics/groups/employee',params).then(res => {
        if (res.data.code === 1) {
          this.rankingList = res.data.data.list
          this.rankingTotal = res.data.data.total
        }
      })
    },
    openLists () {
      this.$router.push({ name: 'my_ranking'})
    },
    openRanking (item) {
      this.$router.push({ name: 'ranking_detail', query: { group_id: item.group_id, title: item.name, date_interval: item.date_interval}})
    }
  },
  mounted () {
    this.getData()
    // this.getRanking()
    if (this.$route.query.id) {
      this.employee_id = this.$route.query.id
    }
  }
}
</script>

<style scoped lang="less">
.ranking_list {
  padding: 0.24rem 0.32rem;
  font-size: 0.32rem;
  border-bottom: 0.02rem solid #f5f7fa;
}
.statistics-container {
  position: relative;
  font-size: 0.32rem;
  color: #333;
  height: 100%;

  & /deep/ .van-icon-question-o {
    top: 0.03rem;
    left: 0.1rem;
  }

  & .content {
    position: relative;
    height: calc(100% - 3.44rem);
  }

  & .statistics-title__bar {
    display: flex;
    height: 3.44rem;
    background: #46474d;
    flex-direction: column;

    & .back-wrap {
      display: flex;
      width: 1.68rem;
      align-items: center;
      touch-action: none;
    }

    & .statistics-title__text {
      display: flex;
      height: 0.88rem;
      padding: 0 0.32rem;
      font-size: 0.32rem;
      color: #fff;
      font-weight: 500;
      align-items: center;

      & /deep/ .van-icon-arrow-left {
        top: 0.03rem;
      }

      & .statistics-nav__title {
        flex: 1;
        width: 0;
        padding: 0 0.2rem;
        flex-wrap: nowrap;
        text-align: center;

        & .title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      & /deep/ .bg-fff {
        background: transparent;
        width: 1.68rem;
      }
    }

    & .monthly-point_wrap {
      display: flex;
      flex: 1;
      margin: 0.24rem 0.32rem 0 0.32rem;
      height: 2.32rem;
      border-radius: 0.16rem 0.16rem 0 0;
      background: url(/static/images/my.png) no-repeat right, linear-gradient(to bottom, #fff0cd, #f4d7a1);
      background-size: 3.6rem 3.2rem;
      flex-direction: column;

      & .monthly-point_title {
        padding: 0.24rem;
      }

      & .monthly-point_content {
        display: flex;
        flex: 1;

        & .monthly-point_item {
          display: flex;
          flex: 1;
          padding-bottom: 0.32rem;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          & .monthly-point__label {
            display: block;
            padding-top: 0.04rem;
            font-size: 0.28rem;
            color: #303133;
          }

          & .monthly-point__value {
            font-size: 0.44rem;
            font-weight: 600;
            color: #333;
          }
        }
      }
    }
  }

  & .curr-bpoint__wrap {
    display: flex;
    background: #fff;
    flex-direction: column;

    & .curr-bpoint__title {
      display: flex;
      padding: 0.22rem 0.24rem;
      border: 0.02rem solid rgba(245, 247, 250, 1);
    }

    & .curr-bpoint__content {
      display: flex;
      height: 1.96rem;
      flex-direction: column;
    }

    & .bpoint-items__wrap {
      display: flex;
      flex: 1;
      padding: 0 0.24rem;

      & .bpoint-item {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        & /deep/ .icon-doubt {
          position: absolute;
          top: 0.13rem;
          right: -0.3rem;
        }

        & .bpoint-item__value {
          color: #26a2ff;
          font-size: 22px;
          font-weight: bold;
        }

        & .bpoint-item__label {
          position: relative;
          display: inline-block;
          padding-top: 0.04rem;
          font-size: 14px;
          color: #303133;
          font-weight: 400;
        }

        & .bpoint-item__target {
          padding-top: 0.04rem;
          font-size: 12px;
          color: #909399;
          font-weight: 400;
        }
      }
    }
  }

  & .bpoint-nav___wrap {
    & .bpoint-nav__icon {
      width: 0.56rem;
      height: 0.56rem;
    }

    & .bpoint-nav__title {
      display: inline-block;
      padding-left: 0.12rem;
      vertical-align: middle;
    }
  }
}

.btn-left {
  display: none;
}

/deep/ .van-col--9 {
  display: none !important;
}

/deep/ .van-col--6 {
  width: 100% !important;
  text-align: right;
}

/deep/ .date-text {
  color: #fff !important;
}

/deep/ .YMPicker_item_icon {
  color: #fff !important;
}

.small_tip {
  /deep/ .small_tip_content {
    &::after {
      left: 0.1rem;
    }
  }
}
// 我的排名
.ranking_name {
  width: 4rem;
}
.ranking_num {
  text-align: right;
}
.ranking_num span{
  font-size: 0.44rem;
  font-weight: 600;
  color: #26A2FF;
  padding: 0 0.2rem;
}
.rankingLists {
  text-align: center;
  color: #909399;
  padding: 0.24rem 0.32rem;
}
.curr-bpoint__title span span{
  font-size: 0.28rem;
  color:#909399;
}
</style>
