<template>
  <div>
    <q-card flat class="item-shadow bonus">
      <div class="q-px-md q-pt-md">
        <div class="row flex justify-between items-center q-mb-lg">
          <div class="flex items-center">
            <div class="bonus-title">奖金</div>
            <div class="tab" :class="{'active-tab':tab==1}" @click="checkTab(1)">月度
              <div class='dot' v-show="tab==1"></div>
            </div>
            <div class="tab" :class="{'active-tab':tab==2}" @click="checkTab(2)">年度
              <div class='dot' v-show="tab==2"></div>
            </div>
          </div>
          <div>
            <el-date-picker v-model="date" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px"
              :clearable="false" :placeholder="elDatePlaceholder" class="q-mr-sm" @change="research">
            </el-date-picker>
            <q-btn class="btn_bg" dense flat icon="more_horiz">
              <q-menu auto-close>
                <q-list dense>
                  <q-item clickable>
                    <q-item-section>
                      <div class="row">
                        <div class="q-mr-xs">
                          <q-icon name="arrow-up" size="14"></q-icon>
                        </div>
                        <div>立即跟进</div>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </div>
        <div class="row items-center q-my-lg" v-if="tab==1">
          <div class="col no-wrap flex q-pl-lg">
            <img src="../../assets/images/newindex/bonus.png" alt="" style="width:62px;height:62px;">
            <div class="flex content-between q-pl-lg">
              <div class="full-width block-name">月度总奖金</div>
              <div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span>
                {{formatPrice(dataList.TotalBonusMoney)||0}}<span
                  class="block-after">{{formatPrice(dataList.TotalBonusMoney,2)}}</span> </div>
            </div>
          </div>
          <div class="q-pr-md">
            <VueApexCharts width="80%" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
          </div>
        </div>
        <div class="col no-wrap flex q-py-lg" v-if="tab==2">
          <img src="../../assets/images/newindex/month.png" alt="" style="width:62px;height:62px;">
          <div class="flex  content-between q-pl-lg">
            <div class="full-width block-name">达标月份</div>
            <div class="block-num flex items-baseline">
              {{dataList.ReachCount}}<span class="block-after">个月</span> </div>
          </div>
        </div>
        <template v-if="tab==1">
          <div class="list-box">
            <div class="list flex no-wrap items-center">
              <div class="name">名单人数</div>
              <div class="progress"> <span class="cur">{{dataList.GuestNum}}</span>/{{dataList.EndNum}}</div>
              <div class="progress-charts">
                <div>
                  {{dataList.NextGoal}}
                </div>
                <q-linear-progress rounded size="6px" :value="calcpercentage(dataList.GuestNum,dataList.StartNum)"
                  color="warning" style="width:90px" />
              </div>
              <div class="grade">{{dataList.CurrentStep}}挡</div>
              <div class="num">
                +¥{{dataList.CurRewardMoney}}
              </div>
            </div>
            <div class="list flex no-wrap items-center">
              <div class="name">开单奖励</div>
              <div class="progress"> <span class="cur">{{dataList.OrderCount}}</span>/1</div>
              <div class="progress-charts">
                <template v-if="dataList.OrderCount-1>=0">
                  <div>
                    已完成开单奖励
                  </div>
                </template>
                <template v-else>
                  <div>
                    距1档还差{{1-dataList.OrderCount}}个
                  </div>
                </template>
                <q-linear-progress rounded size="6px" :value="calcpercentage(dataList.OrderCount,1)" color="warning"
                  style="width:90px" />
              </div>
              <div class="grade">1挡</div>
              <div class="num">
                +¥{{dataList.OpenBonus}}
              </div>
            </div>
            <div class="list flex no-wrap items-center">
              <div class="name">线索奖励</div>
              <div class="progress"> <span class="cur">{{dataList.ClueCount}}</span>/5</div>
              <div class="progress-charts">
                <template v-if="dataList.ClueCount-5>=0">
                  <div>
                    已完成线索奖励
                  </div>
                </template>
                <template v-else>
                  <div>
                    距1档还差{{5-dataList.ClueCount}}个
                  </div>
                </template>
                <q-linear-progress rounded size="6px" :value="calcpercentage(dataList.ClueCount,5)" color="warning"
                  style="width:90px" />
              </div>
              <div class="grade">1挡</div>
              <div class="num">
                +¥{{dataList.ClueNumSalary}}
              </div>
            </div>
          </div>
        </template>
        <template v-if="tab==2">
          <div class="col no-wrap flex q-my-lg " style="border-top:1px solid #EAEBF0;padding-top:48px;width:33vw">
            <img src="../../assets/images/newindex/bonus2.png" alt="" style="width:62px;height:62px;">
            <div class="flex content-between q-pl-lg">
              <div class="full-width block-name">累计金额</div>
              <div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span>
                {{formatPrice(dataList.TotalBonusMoney)||0}}<span
                  class="block-after">{{formatPrice(dataList.TotalBonusMoney,2)}}</span> </div>
            </div>
          </div>
        </template>

      </div>
    </q-card>
  </div>
</template>
<script>
  import {
    queryPersonnelBonusStatic
  } from '../../api/course/index'
  import VueApexCharts from "vue-apexcharts";
  import {
    formatPrice
  } from '../../utils/formatPrice'
  export default {
    components: {
      VueApexCharts
    },
    data() {
      return {
        tab: 1,
        date: "",
        elDateType: "month",
        elDatePlaceholder: "选择月",
        series4: [4, 3, 2],
        chartOptions4: {
          labels: ["名单人数", "开单奖励", "线索奖励"],
          chart: {
            type: "donut",
            width: 40,
            height: 40,
            sparkline: {
              enabled: true
            }
          },
          stroke: {
            width: 1
          },
          tooltip: {
            fixed: {
              enabled: false
            }
          },
          legend: {
            position: 'right',
            show: true,
          }
        },
        //查询参数
        qMsg: {
          Type: 1,
          Year: 2021,
          Month: 12
        },
        dataList: {},
      };
    },
    created() {

    },
    mounted() {
      const date = new Date();
      const year = date.getFullYear(); //获取完整的年份(4位)
      const month = date.getMonth() + 1;
      this.date = year + '-' + month;
      this.getList();
    },
    methods: {
      formatPrice,
      //计算百分比
      calcpercentage(startNum, totalNum) {
        var percent = Number(startNum) / Number(totalNum);
        return Number(percent.toFixed(2));
      },
      //点击切换
      checkTab(type) {
        if (type == 1) {
          this.tab = 1
          this.elDateType = "month"
          this.elDatePlaceholder = "选择月"
          this.qMsg.Type = 1;
        } else if (type == 2) {
          this.tab = 2
          this.elDateType = "year"
          this.elDatePlaceholder = "选择年"
          this.qMsg.Type = 2;
        }
        this.research();
      },
      research() {
        this.getList();
      },
      getList() {
        if (this.data == "") {
          var date = new Date();
          var yearStr = date.getFullYear(); //获取完整的年份(4位)
          var MonthStr = date.getMonth(); //获取当前月份(0-11,0代表1月)
          this.qMsg.Year = yearStr;
          //月度
          if (this.qMsg.Type == 1) {
            this.qMsg.Month = MonthStr;
            this.data
          }
          //年度
          else {
            this.qMsg.Month = 0;
          }
        } else {
          var array = this.date.split('-');
          if (array != null && array.length == 2) {
            var yearStr = array[0];
            var MonthStr = array[1];
            this.qMsg.Year = yearStr;
            //月度
            if (this.qMsg.Type == 1) {
              this.qMsg.Month = MonthStr;
            }
            //年度
            else {
              this.qMsg.Month = 0;
            }
          }
        }
        queryPersonnelBonusStatic(this.qMsg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
            this.series4 = [this.dataList.CurRewardMoney, this.dataList.OpenBonus, this.dataList.ClueNumSalary];
          }
        })
      }
    }
  };

</script>
<style lang="scss" scoped>
  .bonus {
    height: 440px;
    border-radius: 8px;
    background-color: #FFFFFF;

    .bonus-title {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #111111;
      margin-right: 40px;
    }

    .tab {
      font-size: 14px;
      font-family: PingFang SC;
      color: #999999;
      margin: 0 25px;
      position: relative;

      .dot {
        width: 6px;
        height: 6px;
        background-color: #2961FE;
        border-radius: 50%;
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .active-tab {
      font-weight: 800;
      color: #111111 !important;
    }

    .btn_bg {
      background-color: #F2F4F7;
      color: #fff;
      border-radius: 6px;
    }

    .btn_bg:hover {
      background-color: #2961FE;
    }

    .block-name {
      font-size: 14px;
      white-space: nowrap;
      font-family: PingFang SC;
      color: #A4A5B7;
    }

    .block-num {
      font-size: 25px;
      color: #404040;
      font-weight: 700;

      .block-icon {
        font-size: 15px;
        font-weight: 300;
      }

      .block-after {
        font-size: 15px;
        font-weight: 500;
      }
    }

    .list-box {
      padding: 0 0.87vw;
    }

    .list {
      height: 40px;
      margin-bottom: 15px;
      padding: 0 2vw;
      background-color: #F2F4F7;
      border-radius: 6px;

      .name {
        font-size: 14px;
        color: #111111;
        margin-right: 3vw;
        white-space: nowrap;
      }

      .progress {
        width: 5vw;
        font-size: 14px;
        color: #A4A5B7;
        border-radius: 6px;
        margin-right:1vw;

        .cur {
          font-size: 18px;
          font-weight: bold;
          color: #111111;
        }
      }

      .progress-charts {
        width: 8vw;
        font-size: 12px;
        color: #666666;
        margin-right:1vw;
      }

      .grade {
        width: 4vw;
        font-size: 14px;
        color: #999999;
        margin-right:1vw;
      }

      .num {
        font-size: 14px;
        font-weight: 500;
        color: #999999;
        white-space: nowrap;
      }
    }
  }

  ::v-deep el-input,
  ::v-deep .el-input__inner {
    background-color: #F2F4F7 !important;
    color: #2961FE !important;
    border: none !important;
    font-size: 14px !important;
    padding-right: 15px !important;
  }

  ::v-deep .el-input__prefix,
  ::v-deep .el-input__suffix {
    color: #2961FE !important;
  }

  ::v-deep .el-input__inner::placeholder {
    color: #2961FE !important;
    font-size: 12px;
  }

</style>
