<template>
  <div class="q-px-md q-pt-md  item-shadow commission">
    <div class="row flex justify-between items-center q-mb-lg">
      <div class="flex items-center">
        <div class="commission-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="msg.Month" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px"
          :placeholder="elDatePlaceholder" class="q-mr-sm" @change="getData" :clearable="false">
        </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 no-wrap items-center q-my-lg">
      <div class="col flex no-wrap  q-pl-lg" style="height:62px">
        <img src="../../assets/images/newindex/ticheng1.png" alt="">
        <div class="flex content-between q-pl-lg" style="height:62px">
          <div class="full-width block-name">本月交易额</div>
          <div class="block-num flex no-wrap items-baseline"><span
              class="block-icon">¥</span>{{formatPrice(commissionData.TotalSaleMoney,1)||0}}<span
              class="block-after">{{formatPrice(commissionData.TotalSaleMoney,2)}}</span> </div>
        </div>
      </div>
      <div class="q-pr-md">
        <VueApexCharts width="105" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
      </div>
    </div>
    <div class="block-name q-px-md">
      <div>当月年终进度</div>
      <div class="progress-box flex no-wrap">
        <div v-for="(item,index) in commissionData.RateList" :key="index" class="full-width relative-position">
          <q-linear-progress size="20px" :value="formatProgressValue(item)" :track-color="'grey-'+(index+5)" :color="'blue-'+(index+2)">
            <div class="absolute-full flex flex-center progress-tag">
              {{formatProgress(item.StartValue)}}-{{formatProgress(item.EndValue)}}
            </div>
          </q-linear-progress>
          <div class="rate-box">
            <div class="sanjiao" :style="{'border-bottom-color':commissionData.TotalSaleMoney>item.EndValue&&item.EndValue!==-1?'#FF7262':'#CACACA'}"></div>
            <div class="rate full-width" :class="{'active-rate':commissionData.TotalSaleMoney>item.EndValue&&item.EndValue!==-1}">
              <i class="iconfont icon-checkgou " v-if="commissionData.TotalSaleMoney>item.EndValue&&item.EndValue!==-1" style="font-size:8px"></i> {{item.Rate}}%
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="commission-block2 flex wrap content-between">
      <div class="col flex no-wrap q-pl-xs">
        <img src="../../assets/images/newindex/ticheng2.png" alt="" style="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>
            {{formatInt(commissionData.MonthCommission)||0}}<span
              class="block-after">{{formatDecimal(commissionData.MonthCommission)}}</span> </div>
        </div>
      </div>
      <div class="flex no-wrap justify-between full-width">
        <div class="statistic-block flex wrap justify-center content-center">
          <div class="statistic-price full-width flex no-wrap justify-center items-baseline">
            <span class="before">¥</span>
            {{formatInt(commissionData.TotalCommission)||0}}
            <span class="after">{{formatDecimal(commissionData.TotalCommission)}}</span>
          </div>
          <div class="statistic-name">
            提成累计
          </div>
        </div>
        <div class="statistic-block flex wrap justify-center content-center">
          <div class="statistic-price full-width flex no-wrap justify-center items-baseline">
            <span class="before">¥</span>
            {{formatInt(commissionData.GiveOutCommission)||0}}
            <span class="after">{{formatDecimal(commissionData.GiveOutCommission)}}</span>
          </div>
          <div class="statistic-name">
            已发放
          </div>
        </div>
        <div class="statistic-block flex wrap justify-center content-center">
          <div class="statistic-price full-width flex no-wrap justify-center items-baseline">
            <span class="before">¥</span>
            {{formatInt(commissionData.WaitCommission)||0}}
            <span class="after">{{formatDecimal(commissionData.WaitCommission)}}</span>
          </div>
          <div class="statistic-name">
            待发放
          </div>
        </div>
      </div>
    </div>
    <div class="commission-table">
      <div class="row q-mb-md">
        <q-input filled dense clearable clear-icon="clear" label-color="text-label" v-model="listMsg.OrderId"
          label="订单ID" class="col-4 q-mr-md" @input="getList" />
        <!-- <q-select filled dense v-model="select" :options="options" label="状态" option-label="label" class="col-4"
          option-value="value" map-options emit-value /> -->       
      </div>
      <q-table :data="tableData" :pagination="pageMsg" no-data-label="暂无相关数据" flat :columns="columns" row-key="Id"
        separator="horizontal">
        <template v-slot:body-cell-Rate="props">
          <q-td auto-width :props="props">
            <div>{{props.row.Rate}}%</div>
            <q-linear-progress :value="parseFloat(props.row.Rate/100)" rounded size="sm" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" size="14px" v-model="listMsg.pageIndex" color="primary"
            :max="pageCount" :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    GetSellStatistics,
    GetAchievementsEmpPageList
  } from '../../api/work/index'
  import VueApexCharts from "vue-apexcharts";
  import {formatPrice,formatInt,formatDecimal} from '../../utils/formatPrice'
  export default {
    components: {
      VueApexCharts
    },
    data() {
      return {
        tab: 1,
        msg: {
          Month: "",
        },
        elDateType: "month",
        elDatePlaceholder: "选择月",
        progress1: 1,
        progress2: 1,
        progress3: 1,
        progress4: 0.2,
        series4: [0, 0],
        chartOptions4: {
          labels: ['新收', '续费'],
          chart: {
            type: "donut",
            width: 40,
            height: 40,
            sparkline: {
              enabled: true
            }
          },
          stroke: {
            width: 1
          },
          tooltip: {
            fixed: {
              enabled: false
            }
          }
        },
        commissionData: {
          TotalSaleMoney: "", //业绩
          NewSaleMoney: "", //	新收
          RenewSaleMoney: "", //续费
          MonthCommission: "", //当月提成
          TotalCommission: "", //累计提成
          GiveOutCommission: "", //已发放
          WaitCommission: "", //待发放
          RateList: [], //比例
        },
        select: "",
        options: [{
          label: '选项一',
          value: 1,
        }, {
          label: '选项二',
          value: 2,
        }],
        tableData: [{
          name: "202109",
          commission: "0",
          giveout: "0",
          all: "0",
          ratio: "0.2",
        }, {
          name: "202109",
          commission: "0",
          giveout: "0",
          all: "0",
          ratio: "0.3",
        }],
        columns: [{
          name: 'OrderId',
          label: '订单ID',
          align: 'center',
          field: "OrderId",
          headerStyle: 'color: #A4A5B7',
          style: 'color: #A4A5B7',
        }, {
          name: 'PushMoney',
          label: '总提成',
          align: 'center',
          field: "PushMoney",
          headerStyle: 'color: #A4A5B7',
          style: 'color: #A4A5B7',
        }, {
          name: 'GiveOutMoney',
          label: '已发放',
          align: 'center',
          field: "GiveOutMoney",
          headerStyle: 'color: #A4A5B7',
          style: 'color: #A4A5B7',
        }, {
          name: 'SaleMoney',
          label: '销售总额',
          align: 'center',
          field: "SaleMoney",
          headerStyle: 'color: #A4A5B7',
          style: 'color: #A4A5B7',
        }, {
          name: 'Rate',
          label: '比例',
          align: 'center',
          field: "Rate",
          headerStyle: 'color: #A4A5B7;width: 100px',
          style: 'color: #A4A5B7',
        }],
        pageMsg: {
          rowsPerPage: 0,
        },
        listMsg: {
          pageIndex: 1,
          pageSize: 5,
          OrderId: '',
        },
        pageCount: 0,
      };
    },
    mounted() {
      const d = new Date();
      const year = d.getFullYear();
      const month = d.getMonth() + 1;
      this.msg.Month = year + '-' + (month < 10 ? '0' + month : month)
      this.getData();
      this.getList();
    },

    methods: {
      formatPrice,
      formatInt,
      formatDecimal,
      checkTab(type) {
        if (type == 1) {
          this.tab = 1
          this.elDateType = "month"
          this.elDatePlaceholder = "选择月"
          this.date = ""
        } else if (type == 2) {
          this.tab = 2
          this.elDateType = "year"
          this.elDatePlaceholder = "选择年"
          this.date = ""
        }
      },
      getData() {
        GetSellStatistics(this.msg).then(res => {
          this.commissionData = res.Data
          this.series4 = [res.Data.NewSaleMoney, res.Data.RenewSaleMoney]
        })
      },
      getList() {
        GetAchievementsEmpPageList(this.listMsg).then(res => {
          this.tableData = res.Data.PageData
          this.pageCount = res.Data.PageCount
        })
      },
      changePage(val) {
        this.listMsg.pageIndex = val
        this.getList()
      },
     
      formatProgress(price) {
        if (price > 0) {
          const s = price.toString().slice(0, -4) ? price.toString().slice(0, -4) : '0'
          const e = price.toString().slice(-4, -3)
          return s + (e > 0 ? ('.' + e) : '') + 'w';
        } else if (price == 0) {
          return 0
        } else if (price == -1) {
          return '∞'
        }
      },
      formatProgressValue(item) {
        if (this.commissionData.TotalSaleMoney > item.EndValue && item.EndValue !== -1) {
          return 1
        } else if (this.commissionData.TotalSaleMoney > item.StartValue && this.commissionData.TotalSaleMoney < item
          .EndValue && item.EndValue !== -1) {
          return (this.commissionData.TotalSaleMoney - item.StartValue) / (item.EndValue- item.StartValue)
        } else {
          return 0
        }
      }
    }
  };

</script>
<style lang="scss" scoped>
  .commission {
    // width: 660px;
    height: 980px;
    border-radius: 8px;
    background-color: #FFFFFF;
    margin-bottom: 20px;

    .commission-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;
      font-family: PingFang SC;
      color: #A4A5B7;
      white-space: no-wrap;
    }

    .block-num {
      font-size: 40px;
      color: #404040;
      font-weight: 700;
      line-height: 20px;

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

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

    .progress-box {
      width: 31.25vw;
      height: 20px;
      margin: 10px auto;
      border-radius: 2px;

      .progress-tag {
        text-align: center;
        font-size: 0.62vw;
        line-height: 20px;
        color: #FFFFFF;
      }
    }

    .commission-block2 {
      width: 31.25vw;
      height: 250px;
      margin: 50px auto 25px;
      border-radius: 8px;
      background-color: #F2F4F7;
      padding: 40px 30px;

      .statistic-block {
        width: 7.8vw;
        height: 75px;
        background-color: #FFFFFF;
        border-radius: 6px;

        .statistic-price {
          font-size: 1.56vw;
          color: #404040;
          font-weight: 700;
          // text-align: center;
          line-height: 20px;

          .before {
            font-weight: 300;
            font-size: 1vw;
          }

          .after {
            font-size: 1vw;
          }
        }

        .statistic-name {
          font-size: 0.72vw;
          color: #999999;
          text-align: center;
        }
      }
    }

    .commission-table {
      width: 31.25vw;
      height: 375px;
      margin: 0 auto;
      border-top: 1px solid #EAEBF0;
      padding-top: 15px;
    }
  }

  ::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;
  }

  ::v-deep .q-table__bottom {
    min-height: 0;
    padding: 0;
  }

  .rate-box {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .sanjiao {
      width: 0;
      height: 0;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 3px solid #CACACA;
    }

    .rate {
      min-width: 20px;
      padding: 2px 6px;
      background-color: #CACACA !important;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666666;
      font-size: 0.62vw;
      font-family: PingFang SC;
      border-radius: 7px;
      line-height:12px;
      white-space:nowrap;
    }
    .active-rate{
      background-color: #FF7262 !important;
      color: #FFFFFF !important;
    }
  }
</style>