<template>
  <div class="statistics_personal_box">
    <van-nav-bar title="我的绩效统计" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <div class="person_box">
          <YearMonthPicker v-model="date_value"></YearMonthPicker>
          <StatisticsMonthTotal :data="statisticsData"/>
        </div>
        <van-cell-group style="margin:0;">
          <van-cell class="personal-point__wrapper">
            <div class="personal-point-title" style="margin-top: 0.52rem;" slot="title">近半年的绩效</div>
            <div class="personal-point-subtitle">达成率%</div>
          </van-cell>
          <div slot="default">
            <div id="chartLineBox" style="height: 3.6rem;"></div>
          </div>
        </van-cell-group>
        <van-cell-group>
          <van-cell class="personal-point__wrapper" style="border-bottom: 0.02rem solid #ebedf0;">
            <div class="personal-point-title" slot="title">表现出色</div>
          </van-cell>
          <div class="current-event__item" v-for="(item, i) in outstandingList" :key="i">
            <div class="event-content__wrap">
              <div class="current-event_content">{{ item.task_name }}</div>
              <div class="current-event_value">+{{ item.review_point }}</div>
            </div>
            <div class="event-sub__content">
              <span>任务完成</span>
              <span class="event-sub_value">超额{{ (item.review_point/item.base_point*1*100-100).toFixed(2) }}%</span>
            </div>
          </div>
          <van-empty v-if="!Array.isArray(outstandingList) || outstandingList.length === 0"
                     description="没有表现出色的绩效,要加把劲"/>
        </van-cell-group>
        <van-cell-group>
          <van-cell class="personal-point__wrapper" style="border-bottom: 0.02rem solid #ebedf0;">
            <div class="personal-point-title" slot="title">有待提升</div>
          </van-cell>
          <div class="current-event__item" v-for="(item, i) in promotionList" :key="i">
            <div class="event-content__wrap">
              <div class="current-event_content">{{ item.task_name }}</div>
              <div class="current-event_value">+{{ item.review_point }}</div>
            </div>
            <div class="event-sub__content">
              <span>任务完成</span>
              <span class="event-sub_value">差额{{ calculateBalanceWork(item.base_point, item.review_point) }}%</span>
            </div>
          </div>
          <van-empty v-if="!Array.isArray(promotionList) || promotionList.length === 0" description="真棒，没有待提升的绩效"/>
        </van-cell-group>
      </scroller>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import request from '@/utils/request'
  import Vue from 'vue'
  import {Empty, Panel, Image} from 'vant'
  import YearMonthPicker from '@/components/common/YearMonthPicker'
  import StatisticsMonthTotal from './statistics_month_total'
  import moment from 'moment'

  Vue.use(Empty).use(Panel).use(Image)

  export default {
    name: 'statistics_personal',
    data () {
      const {month} = this.$route.query
      const date_value = month ? month : moment().format('YYYY-MM')

      return {
        date_value: date_value,
        chartLine: null,
        outstandingList: null,
        promotionList: null,
        statisticsData: [
          {label: '月平衡分', value: 0},
          {label: '最终得分', value: 0},
          {label: '任务数', value: 0}
        ],
        employee_id: null
      }
    },
    components: {YearMonthPicker, StatisticsMonthTotal},
    watch: {
      date_value () {
        this.get_data()
      }
    },
    methods: {
      initEChartOption () {
        this.option = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              params = params[0];
              return "月份：" + params.name + " </br> 分值：" + params.value;
            },
            axisPointer: {
              animation: false
            },
            show: true
          },
          grid: {
            containLabel: true,
            top: '4%',
            right: '4%',
            bottom: '5%',
            left: '7%'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {lineStyle: {color: '#eee'}},
            axisLabel: {color: '#333'}
          },
          yAxis: {
            position: 'right',
            axisLine: {lineStyle: {color: '#eee'}},
            axisLabel: {color: '#333'},
            type: 'value',
            splitLine: {lineStyle: {color: '#eee'}}
          },
          series: {
            type: 'line',
            lineStyle: {normal: {color: '#26A2FF'}}
          }
        }
      },
      get_data () {
        this.$toast.loading({message: '正在加载'})
        let params = {}
        if (this.employee_id) {
          params = {employee_id: this.employee_id, month: this.date_value}
        }else{
          params = {employee_id: this.$store.getters.user_info.id, month: this.date_value}
        }

        request('get','/api/integral/statistics/performance', {employee_id: this.$store.getters.user_info.id, month: this.date_value}).then(res => {
            if (res.data.code == 1) {
              const xAxisData = []
              const {chart, performance, works} = res.data.data
              const completionRateData = chart.map((item, index) => {
                xAxisData.push(item.month)
                return item.scale * 100
              })
              this.outstandingList = works.good
              this.promotionList = works.bad
              this.statisticsData[0].value = performance.base_point
              this.statisticsData[1].value = performance.review_point
              this.statisticsData[2].value = performance.work_count
              this.setEChartOption(xAxisData, completionRateData)
            }
          })
          .catch(e => {
          })
          .finally(() => this.$toast.clear())
      },
      setEChartOption (xAxisData, points) {
        this.option.xAxis.data = xAxisData
        this.option.series.data = points
        this.chartLine.setOption(this.option)
      },
      calculateOverWork (basePoint, reviewPoint) {
        if (typeof basePoint === 'string') {
          basePoint = parseFloat(basePoint)
        }
        if (typeof reviewPoint === 'string') {
          reviewPoint = parseFloat(reviewPoint)
        }
        return (reviewPoint / basePoint - 1) * 100
      },
      calculateBalanceWork (basePoint, reviewPoint) {
        if (typeof basePoint === 'string') {
          basePoint = parseFloat(basePoint)
        }
        if (typeof reviewPoint === 'string') {
          reviewPoint = parseFloat(reviewPoint)
        }
        return (1 - (reviewPoint / basePoint)) * 100
      },
    },
    mounted () {
      if (this.$route.query.employee_id) {
        this.employee_id = this.$route.query.employee_id
      }
      this.get_data()
      this.initEChartOption()
      this.chartLine = echarts.init(document.getElementById('chartLineBox'))
    }
  }
</script>

<style scoped lang="less">
  /deep/ .van-nav-bar {
    background-color: #26a2ff;
  }

  .statistics_personal_box {
    & .person_box {
      height: 2.04rem;
      background: #26a2ff;
      z-index: 1;

      & .bg-fff {
        background: transparent;

        & /deep/ .YMPicker_item_icon,
        /deep/ .date-text, /deep/ .van-icon {
          color: #fff;
        }
      }
    }

    & .person_a_num_box {
      margin-top: -0.4rem;
      z-index: 2;
    }
  }

  .body_com {
    height: calc(100% - 0.92rem);
    position: relative;
  }

  .personal-point__wrapper {
    &:after {
      border-bottom-color: transparent;
    }

    & /deep/ .van-cell__value,
    /deep/ .van-cell__right-icon {
      margin-right: 0;
      font-size: 14px;
      color: #333;
    }
  }

  .personal-point-title {
    position: relative;
    padding-left: 0.2rem;
    font-size: 0.28rem;
    font-weight: 600;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      height: 0.32rem;
      width: 0.08rem;
      border-radius: 0.04rem;
      background: #238dfa;
      transform: translateY(-50%);
    }
  }

  .current-event__item {
    position: relative;
    padding: 0.24rem 0 0.24rem 0.32rem;
    font-size: 0.32rem;
    color: #333;
    box-sizing: border-box;

    &:not(:last-child)::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0.32rem;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    & .event-content__wrap {
      display: flex;
    }

    & .current-event_content {
      display: flex;
      flex: 1;
    }

    & .current-event_value {
      display: flex;
      padding-right: 0.32rem;
      width: 1.1rem;
      color: #ff0000;
      align-items: center;
      justify-content: flex-end;

      &.green {
        color: #4bd964;
      }
    }

    & .event-sub__content {
      display: flex;
      padding-top: 0.12rem;
      font-size: 0.24rem;
      color: #333;
      flex-direction: row;
    }

    & .event-sub_value {
      margin: 0;
      color: #ffa500;
    }
  }

  .personal-point-subtitle {
    display: flex;
    margin-top: 0.52rem;
    font-size: 0.28rem;
    color: #999;
    justify-content: flex-end;
  }

  & /deep/ .van-empty__image {
    width: 1.5rem;
    height: 1.5rem;
  }

  & /deep/ .van-empty {
    padding: 0.24rem 0;
  }
</style>
