<template>
  <div class="prd-statistics__container">
    <van-nav-bar :title="navTitle" left-text="返回" @click-left="$route_back" left-arrow>
      <template slot="title">
        <Wxopendata type="userName" :openid="navTitle"></Wxopendata>的奖扣统计
      </template>
    </van-nav-bar>
    <YearMonthPicker v-model="month"/>
    <div class="chart-statistics__content">
      <scroller>

        <van-cell-group class="curr-bpoint__wrap">
          <div class="curr-bpoint__title">
            <userImage :user_name="employeeName" :img_url="img_url" width="0.7rem" height="0.7rem"></userImage>
            <div style="line-height: 0.7rem;margin-left: 0.1rem;"><Wxopendata type="userName" :openid="employeeName"></Wxopendata></div>
          </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>
        <div class="chart-statistics__item">
          <div class="chart-title__bar">
            <div class="chart-title__title">月奖扣执行情况</div>
            <div class="chart-legend__wrap">
              <span class="chart-legend__pink">奖分</span>
              <span class="chart-legend__green">扣分</span>
            </div>
          </div>
          <div id="situationChart" style="height: 3.5rem;"></div>
        </div>
        <div class="chart-statistics__item">
          <div class="chart-title__bar">
            <div class="chart-title__title">奖扣人次</div>
            <div class="chart-legend__wrap">
              <span class="chart-legend__pink">奖分</span>
              <span class="chart-legend__green">扣分</span>
            </div>
          </div>
          <div id="passengersChart" style="height: 3.5rem;"></div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import ECharts from 'echarts'
import request from '@/utils/request'
import YearMonthPicker from '@/components/common/YearMonthPicker'
import userImage from '@/components/common/user_image'

export default {
  name: 'reward_deduction-statistics',
  data () {
    const {month} = this.$route.query

    return {
      employeeName: '',
      month: month || moment().format('YYYY-MM'),
      exec: {count: 0, target_count: 0},
      ratio: {ratio: 0, target_ratio: 0},
      reward: {point: 0, target_point: 0},
      deduction: {point: 0, target_point: 0},
      img_url: ''
    }
  },
  components: {YearMonthPicker, userImage},
  computed: {
    navTitle () {
      return `${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`
    }
  },
  watch: {
    month () {
      this.onMonthPickerChange()
    }
  },
  methods: {
    // return name
    returnName (id) {
      let employee_map = this.$store.getters.employee_map[this.id] || window.plus ? JSON.parse(plus.storage.getItem('SET_EMPLOYEE_MAP')) : JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP'))
      return employee_map[id].name
    },
    onMonthPickerChange () {
      this.$toast.loading({message: '正在加载'})
      this.getData(() => this.$toast.clear())
      this.getHeader()
    },
    getChartOption (xAxisData, rewardData, deductionData) {
      return {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          containLabel: true,
          top: '4%',
          right: '4%',
          bottom: '5%',
          left: '7%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {lineStyle: {color: '#eee'}},
          axisLabel: {color: '#333'},
          data: xAxisData
        },
        yAxis: {
          position: 'right',
          axisLine: {lineStyle: {color: '#eee'}},
          axisLabel: {color: '#333'},
          type: 'value',
          splitLine: {lineStyle: {color: '#eee'}}
        },
        series: [
          {
            name: '奖分',
            type: 'line',
            data: rewardData,
            lineStyle: {normal: {color: '#F56C6C'}}
          },
          {
            name: '扣分',
            type: 'line',
            data: deductionData,
            lineStyle: {normal: {color: '#53B87F'}}
          }
        ]
      }
    },
    getData (callBack) {
      this.$toast.loading({message: '正在加载'})
      const params = {employee_id: this.$route.query.employee_id || 0, month: this.month}
      request('get','/api/integral/statistics/prize',params).then(res => {
        if (res.data.code === 1) {
          const item = res.data.data
          this.employeeName = item.name
          this.img_url = item.img_url || ''
          const deduct = item.chart.deduct
          const situationRewardData = []
          const situationDeductionData = []
          const passengersRewardData = []
          const passengersDeductionData = []
          const xAxisData = item.chart.reward.map((o, i) => {
            situationRewardData.push(o.point)
            situationDeductionData.push(deduct[i].point)
            passengersRewardData.push(o.count)
            passengersDeductionData.push(deduct[i].count)
            return o.date
          })
          this.situationChart.setOption(this.getChartOption(xAxisData, situationRewardData, situationDeductionData))
          this.passengersChart.setOption(this.getChartOption(xAxisData, passengersRewardData, passengersDeductionData))
        }
      }).finally(() => this.$toast.clear())
    },
    getHeader () {
      const params = {employee_id: this.$route.query.employee_id, month: this.month}
      request('get','/api/integral/statistics',params).then(res => {
        if (res.data.code === 1) {
          const item = res.data.data
          const task = item.task
          this.exec = task.exec
          this.ratio = task.ratio
          this.reward = task.reward
          this.deduction = task.deduction
        }
      }).finally(() => this.$toast.clear())
    }
  },
  mounted () {
    this.onMonthPickerChange()
    this.getHeader()
    this.$nextTick(() => {
      this.situationChart = ECharts.init(document.getElementById('situationChart'))
      this.passengersChart = ECharts.init(document.getElementById('passengersChart'))
    })
  }
}
</script>

<style scoped lang="less">
  .prd-statistics__container {
    & .chart-statistics__content {
      position: relative;
      height: calc(100% - 1.95rem);
    }

    & .chart-statistics__item {
      position: relative;
      margin-top: 0.24rem;
      background: #fff;

      & .chart-title__bar {
        display: flex;
        padding: 0 0.32rem;
        height: 1rem;
        flex-direction: row;
        align-items: center;
        text-align: center;

        & .chart-title__title {
          position: relative;
          padding-left: 0.2rem;
          font-size: 0.32rem;
          color: #303133;

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

        & .chart-legend__wrap {
          display: flex;
          flex: 1;
          font-size: 0.24rem;
          flex-direction: row;
          justify-content: flex-end;

          & .chart-legend__pink {
            position: relative;
            padding-left: 0.3rem;
            padding-right: 0.24rem;

            &:after {
              content: '';
              position: absolute;
              margin-top: -0.1rem;
              top: 50%;
              left: 0;
              width: 0.2rem;
              height: 0.2rem;
              background: #F56C6C;
              border-radius: 100%;
            }
          }

          & .chart-legend__green {
            position: relative;
            padding-left: 0.3rem;

            &:after {
              content: '';
              position: absolute;
              margin-top: -0.1rem;
              top: 50%;
              left: 0;
              width: 0.2rem;
              height: 0.2rem;
              background: #53B87F;
              border-radius: 100%;
            }
          }
        }
      }
    }
  }
  .curr-bpoint__wrap {
    display: flex;
    background: #fff;
    flex-direction: column;
    font-size: 0.32rem;
    color: #333;
    & .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;
        }
      }
    }
  }
  .small_tip {
    /deep/ .small_tip_content {
      &::after {
        left: 0.10rem;
      }
    }
  }
</style>
