<script>
import {
  getApprovedScoreStatByParams,
  getScoreStatByParams,
  getSettledStatByParams,
  listRootScorePackageSenders
} from "@/api/score_package";
import {formatEndDate, formatMoney, formatNumber, formatStartDate} from "@/utils";
import dayjs from "@/plugins/dayjs";

export default {
  name: "HomeSsfxPanel",
  data() {
    return {
      rootPackageSendPackageDeptId:null,
      rootScorePackageSenders:[],
      timeRange: [dayjs().startOf('year').toDate(), dayjs().toDate()],
      scoreStat:{},
      approvedScoreStat:{},
      settledStat:{},
      loading:true
    };
  },
  created() {
    this.loadRootScorePackageSenders()
    this.loadStatData()
  },
  watch:{
    timeRange(val){
      this.loadStatData()
    },
    rootPackageSendPackageDeptId(){
      this.loadStatData()
    }
  },
  methods:{
    async loadRootScorePackageSenders() {
      this.rootScorePackageSenders = await listRootScorePackageSenders()
    },
    async loadStatData(){
      this.loading=true
      this.scoreStat={}
      this.approvedScoreStat={}
      this.settledStat={}
      try {
        const startTime = this.timeRange ? formatStartDate(this.timeRange[0]) : null
        const endTime = this.timeRange ? formatEndDate(this.timeRange[1]) : null
        this.scoreStat = await getScoreStatByParams({
          rootPackageSendPackageDeptId: this.rootPackageSendPackageDeptId,
          rootPackageCreateTimeGe: startTime,
          rootPackageCreateTimeLe: endTime,
        })
        this.approvedScoreStat = await getApprovedScoreStatByParams({
          rootPackageSendPackageDeptId: this.rootPackageSendPackageDeptId,
          rootPackageFinishTimeGe: startTime,
          rootPackageFinishTimeLe: endTime,
        })
        this.settledStat = await getSettledStatByParams({
          rootPackageSendPackageDeptId: this.rootPackageSendPackageDeptId,
          settleNotifyTimeGe: startTime,
          settleNotifyTimeLe: endTime,
        })
      } finally {
        this.loading=false
      }
    },
    formatNumber:formatNumber,
    formatMoney:formatMoney,
  }
}
</script>

<template>
  <el-card class="box-card" v-loading="loading">
    <div slot="header" class="clearfix">
      <span>实时分析</span>
      <el-form style="float: right;" inline>
        <el-form-item>
          <el-select
            v-model="rootPackageSendPackageDeptId"
            multiple
            filterable
            reserve-keyword
            placeholder="源头包发包对象" style="width: 300px;">
            <el-option
              v-for="item in rootScorePackageSenders"
              :key="item.deptId"
              :label="item.name"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker type="daterange" v-model="timeRange" style="float: right; width: 230px;" start-placeholder="开始日期" end-placeholder="结束日期"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="statistic-list">
      <div class="statistic-item">
        <div class="statistic-item-title">下发积分包总值</div>
        <div class="statistic-item-value">{{formatNumber(scoreStat.totalScore)}}</div>
        <div class="statistic-item-fields">
          <span>企业包</span>
          <span>{{formatNumber(scoreStat.entScore)}}分</span>
          <span>{{formatNumber(scoreStat.entCount)}}个</span>
        </div>
        <div class="statistic-item-fields">
          <span style="padding-left: 15px;">CSO1包</span>
          <span>{{formatNumber(scoreStat.cso1Score)}}分</span>
          <span>{{formatNumber(scoreStat.cso1Count)}}个</span>
        </div>
        <div class="statistic-item-fields">
          <span style="padding-left: 15px;">CSO2包</span>
          <span>{{formatNumber(scoreStat.cso2Score)}}分</span>
          <span>{{formatNumber(scoreStat.cso2Count)}}个</span>
        </div>
        <div class="statistic-item-fields">
          <span>个人包</span>
          <span>{{formatNumber(scoreStat.userScore)}}分</span>
          <span>{{formatNumber(scoreStat.userCount)}}个</span>
        </div>
      </div>
      <div class="statistic-item" style="width: 330px;">
        <div class="statistic-item-title">核准积分包总值</div>
        <div class="statistic-item-value">{{formatNumber(approvedScoreStat.totalScore)}}</div>
        <div class="statistic-item-fields" style="width: 300px;">
          <span>企业包</span>
          <span>{{formatNumber(approvedScoreStat.entScore)}}分</span>
          <span>{{formatNumber(approvedScoreStat.entCount)}}个</span>
          <span>{{formatNumber(approvedScoreStat.entUserCount)}}人</span>
        </div>
        <div class="statistic-item-fields" style="width: 300px;">
          <span style="padding-left: 15px;">CSO1包</span>
          <span>{{formatNumber(approvedScoreStat.cso1Score)}}分</span>
          <span>{{formatNumber(approvedScoreStat.cso1Count)}}个</span>
          <span>{{formatNumber(approvedScoreStat.cso1UserCount)}}人</span>
        </div>
        <div class="statistic-item-fields" style="width: 300px;">
          <span style="padding-left: 15px;">CSO2包</span>
          <span>{{formatNumber(approvedScoreStat.cso2Score)}}分</span>
          <span>{{formatNumber(approvedScoreStat.cso2Count)}}个</span>
          <span>{{formatNumber(approvedScoreStat.cso2UserCount)}}人</span>
        </div>
        <div class="statistic-item-fields" style="width: 300px;">
          <span>个人包</span>
          <span>{{formatNumber(approvedScoreStat.userScore)}}分</span>
          <span>{{formatNumber(approvedScoreStat.userCount)}}个</span>
          <span>{{formatNumber(approvedScoreStat.userUserCount)}}人</span>
        </div>
      </div>
      <div class="statistic-item">
        <div class="statistic-item-title">结算成功积分包总值</div>
        <div class="statistic-item-value">{{formatNumber(settledStat.totalScore)}}分</div>
        <div class="statistic-item-value2">{{formatNumber(settledStat.totalPackages)}}个</div>
      </div>
      <div class="statistic-item">
        <div class="statistic-item-title">结算成功总金额</div>
        <div class="statistic-item-value">{{formatMoney(settledStat.totalAmount)}}元</div>
        <div class="statistic-item-value2">{{formatNumber(settledStat.totalUsers)}}人</div>
        <div class="statistic-item-title">支付成功总金额</div>
        <div class="statistic-item-value">{{formatMoney(settledStat.totalActualAmount)}}元</div>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">

</style>
