<template>
  <div class="statistics_personal_a_box">
    <van-nav-bar title="我的A分统计" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com">
      <scroller>
        <div class="person_a_box">
          <YearMonthPicker v-model="date_value"></YearMonthPicker>
          <StatisticsMonthTotal :data="statisticsData"/>
        </div>
        <van-cell-group style="margin:0;">
          <van-cell class="a-point__wrapper">
            <div class="a-point-title" style="margin-top: 0.52rem;" slot="title">近半年的A分</div>
          </van-cell>
          <div slot="default">
            <div id="chartLineBox" style="height: 3.6rem;"></div>
          </div>
        </van-cell-group>

        <van-cell-group>
          <van-cell
            class="a-point__wrapper"
            style="border-bottom: 0.02rem solid #ebedf0;"
            value="更多"
            @click="$router.push({name: 'event_list',query: {point_type:'AF', isAPerson: true}})"
            is-link
          >
            <div class="a-point-title" slot="title">当月A分事件</div>
          </van-cell>
          <div class="current-event__item" v-for="(item, i) in currentAPointEvents" :key="i"
               @click="$router.push({name:'event_detail', query:{id: item.id}})">
            <div class="current-event_content">
              <span>{{ item.remark}}</span>
            </div>
            <div class="current-event_value">
              <span v-if="item.point >= 0">+{{ item.point }}</span>
              <span v-else class="green">{{ item.point }}</span>
            </div>
          </div>
          <van-empty v-if="hasData" description="当月没有A分事件"/>
        </van-cell-group>
      </scroller>
    </div>
  </div>
</template>

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

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

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

      return {

        loading: true,
        date_value: date_value,
        chartLine: null,
        statisticsData: [
          {label: '本月A分', value: 0},
          {label: '年度A分', value: 0},
          {label: '累计A分', value: 0}
        ],
        currentAPointEvents: null,
        employee_id: null
      }
    },
    watch: {
      date_value () {
        this.get_data()
      }
    },
    computed: {
      hasData () {
        if (this.loading) {
          return false
        }
        return !this.currentAPointEvents || this.currentAPointEvents.length === 0
      }
    },
    methods: {
      viewRanking () {
        this.$router.push({name: 'integral_rank'})
      },
      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: '正在加载'})
        this.loading = true
        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/a',params)
          .then(res => {
            if (res.data.code == 1) {
              const xAxisData = []
              const {a, chart, list} = res.data.data
              const points = chart.reward.map((rewardItem, index) => {
                xAxisData.push(rewardItem.month)
                return rewardItem.point + (chart.deduction[index].point || 0)
              })
              this.currentAPointEvents = list
              this.statisticsData[0].value = a.month_point || "0"
              this.statisticsData[1].value = a.year_point || "0"
              this.statisticsData[2].value = a.total_point || "0"
              this.setEChartOption(xAxisData, points)
            }
          }).finally(() => {
            this.loading = false
            this.$toast.clear()
          })
      },
      setEChartOption (xAxisData, points) {
        this.option.xAxis.data = xAxisData
        this.option.series.data = points
        this.chartLine.setOption(this.option)
      }
    },
    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">
  .body_com {
    height: calc(100% - 0.92rem);
    position: relative;
  }

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

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

  .statistics_personal_a_box .person_a_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;
      }
    }
  }

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

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

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

    &: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;
    display: flex;
    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);
    }

    & .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;
      }
    }
  }
</style>
