<template>
  <div class="div_page_bg">
    <div class="div_header">
      <div class="div_header_name">
        <span class="span_title" style="font-weight: bold;color: white;font-size: 18px">{{fbName}}</span>
        <span class="span_title" style="color: white;font-size: 14px">{{month.substr(0,month.indexOf("-"))}}年度履约平均成绩</span>
      </div>
      <div class="div_score">
        <span class="span_title" style="font-weight: bold;color: white;font-size: 46px">{{achievement}}</span>
        <span class="span_title" style="color: white;font-size: 14px">分</span>
      </div>

    </div>
    <div class="div_ve_line">
      <div class="div_ve_line_item">
        <div class="div_title">
          <span class="span_title">本年度各月走势（集团级）</span>
        </div>
        <ve-line :data="groupChartData" height="200px"></ve-line>
      </div>

      <div class="div_ve_line_item">
        <swiper height="250px" dots-position="center">
          <swiper-item v-for="(data,index) in companyChartData" :key="index">
            <div class="div_chart">
              <div class="div_title">
                <span class="span_title">{{data.name}}</span>
              </div>
              <ve-line :data="data.value" height="200px"></ve-line>
            </div>
          </swiper-item>
          <!--<swiper-item>-->
            <!--<div class="div_chart">-->
              <!--<div class="div_title">-->
                <!--<span class="span_title">本年度各月走势（某某分司）</span>-->
              <!--</div>-->
              <!--<ve-line :data="chartData" height="200px"></ve-line>-->
            <!--</div>-->
          <!--</swiper-item>-->

        </swiper>
      </div>



    </div>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>

  import {getContractAchievementArea, getContractAchievementCompany} from "../../service/getData";

  export default {
    name: "performanceDetail",
    data: function () {
      return {
        groupChartData: {
          columns: ['月份', '访问用户'],
          rows: [
          ]
        },
        companyChartData: [],

        companyId:'',
        fbId:'',
        fbName:'',
        achievement:'',
        month:'',
        loading: false,
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("履约详情");
      }
      catch (e) {

      }
      this.companyId = this.$route.query.companyId;
      this.fbId = this.$route.query.fbId;
      this.fbName = this.$route.query.fbName;
      this.achievement = this.$route.query.achievement;
      this.month = this.$route.query.month;
      this.getContractAchievementCompanyJs();
    },
    methods:{
      getContractAchievementCompanyJs(){
        let that = this;
        let params = {
          companyId:this.companyId,
          fbId:this.fbId
        }
        that.loading = true;
        getContractAchievementCompany(params).then(res=>{
          if (res.status === 200) {
            that.groupChartData.rows = [];
            for (let i = 0; i < res.data.length; i++) {
              let month = res.data[i].month.split('-')[1];
              let achievementAvg = res.data[i].achievementAvg;
              that.groupChartData.rows.push({
                '月份': month, '访问用户': achievementAvg
              })
            }
          } else {
            that.showTips("获取本年度各月走势（集团级）失败")
          }
          that.getContractAchievementAreaJs();
        }).catch(error => {
          that.loading = false;
        })
      },
      getContractAchievementAreaJs(){
        let that = this;
        let params = {
          companyId:this.companyId,
          fbId:this.fbId
        }
        getContractAchievementArea(params).then(res=>{
          that.loading = false;
          if (res.status === 200) {
            that.companyChartData = [];
            for (let i = 0; i < res.data.length; i++) {
              let chartData = {
                name: res.data[i].areaName,
                value:{
                  columns: ['月份', '访问用户'],
                  rows: [
                  ]
                }
              }
              for (let j = 0;j<res.data[i].achievementList.length;j++){
                let month = res.data[i].achievementList[j].month.split('-')[1];
                let achievementAvg = res.data[i].achievementList[j].achievementAvg;
                chartData.value.rows.push({
                  '月份': month, '访问用户': achievementAvg
                })
              }

              that.companyChartData.push(chartData)
            }
            console.log(that.companyChartData)
          } else {
            that.showTips("获取本年度各月走势（公司级）失败")
          }

        }).catch(error => {
          that.loading = false;
        })
      },
      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      },
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }
  .div_header{
    display: flex;
    padding: 10px;
    flex-direction: row;
    align-items: center;
    height: 162px;
    background-color: #78AEF9;
  }
  .div_header_name{
    display: flex;
    flex-direction: column;
    margin: 0 0 40px 32px;
    flex: 1;
  }
  .div_title{
    display: flex;
    padding: 10px;
    justify-content: center;
  }
  .span_title{
    font-size: 14px;
    color: black;
  }
  .div_score{
    display: flex;
    flex-direction: row;
    margin: 0 32px 40px 0;
    align-items: baseline;
  }
  .span_score{
    font-size: 14px;
    color: white;
  }
  .div_ve_line{
    height: 100%;
    margin-top: -50px;
  }
  .div_ve_line_item{
    background-color: white;
    border-radius: 7px;
    margin: 15px;
  }
  .div_chart{
    display: flex;
    flex-direction: column;
  }
</style>
