<template>
  <view class="content">
    <view class="header_a">
      <view class="header">
        <img @click="isTop = true" src="@/assets/images/search.png" alt="" />
      </view>
    </view>
    <view class="zhan"></view>
    <view class="kuang" v-for="(item, index) in tableData" :key="index">
      <table class="tftable" border="1">
        <tr v-if="allTxt.period">
          <td align="right">{{ '结算期数' }}</td>
          <td align="left">{{ item.period }}</td>
        </tr>
        <tr v-if="allTxt.directIncomeOri">
          <td align="right">{{ '直推收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.directIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.expandIncomeOri">
          <td align="right">{{ '拓展收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.expandIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.coachIncomeOri">
          <td align="right">{{ '辅导收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.coachIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.shareIncomeOri">
          <td align="right">{{ '分红收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.shareIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.serviceIncomeOri">
          <td align="right">{{ '报单收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.serviceIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.repurPushIncomeOri">
          <td align="right">{{ '复购推荐收益' }}</td>
          <td align="left">
            {{ item.repurPushIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.repurRangeIncomeOri">
          <td align="right">{{ '复购级差收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.repurRangeIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.repurExpandIncomeOri">
          <td align="right">{{ '复购拓展收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.repurExpandIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.repurCoachIncome">
          <td align="right">{{ '复购辅导收益' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.repurCoachIncome | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.repurCouponOri">
          <td align="right">{{ '复购券' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.repurCouponOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>

        <tr v-if="allTxt.repurCouponShareOri">
          <td align="right">{{ '复购券均分' }}</td>
          <td align="left">{{ item.repurCouponShareOri }}</td>
        </tr>

        <tr v-if="allTxt.backPointsOri">
          <td align="right">{{ '商城重消' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.backPointsOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>

        <tr v-if="allTxt.serviceSpendOri">
          <td align="right">{{ '平台服务费' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.serviceSpendOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr>
          <td align="right">直推级差({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.globalPointsOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.carAwardPointsOri">
          <td align="right">{{ '车奖积分' }}</td>
          <td align="left">
            {{ item.carAwardPointsOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>

        <tr v-if="allTxt.purRealSubtotalOri">
          <td align="right">{{ '首购实发小计' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.purRealSubtotalOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>

        <tr v-if="allTxt.repurRealSubtotalOri">
          <td align="right">{{ '复购实发小计' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.repurRealSubtotalOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>

        <tr v-if="allTxt.repurCouponSubtotalOri">
          <td align="right">{{ '复购券实发小计' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.repurCouponSubtotalOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>

        <tr v-if="allTxt.realIncomeTotalOri">
          <td align="right">{{ '实发收益总计' }}({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.realIncomeTotalOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.settleDate">
          <td align="right">{{ '结算时间' }}</td>
          <td align="left">{{ item.settleDate }}</td>
        </tr>
        <!-- <tr v-if="allTxt.settleDate">
          <td align="right">{{ '截止日期' }}</td>
          <td align="left">{{ item.settleDate }}</td>
        </tr> -->
      </table>
      <view class="table_f">
        <u-button
          @click="bonusTap(item)"
          size="small"
          color="#E70DEC"
          :text="'奖金明细'"
        ></u-button>
      </view>
    </view>

    <u-popup :show="isTop" mode="top" @close="isTop = false">
      <view class="tt">
        <u--form
          labelPosition="left"
          labelWidth="auto"
          :model="select"
          ref="uForm"
        >
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'结算期数'">
                <u--input fontSize="12" v-model="select.period"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'币种展示'">
                <picker
                  :range="acList"
                  range-key="label"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.pkCurrencyVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'操作日期'" @click="isData = true">
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.operationTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'隶属体系'">
                <picker
                  :range="vertexList"
                  range-key="vertexName"
                  @change="bindPickerChange4"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.vertexIdVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'隶属团队'">
                <picker
                  :range="memberteamList"
                  range-key="teamName"
                  @change="bindPickerChange5"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.teamIdVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
        <view class="footer">
          <u-button
            @click="getList1"
            color="#C8161D"
            text="搜索"
            class="btnn"
          ></u-button>
          <u-button @click="reset" text="重置"></u-button>
        </view>
      </view>
    </u-popup>
    <u-calendar
      @close="isData = false"
      :closeOnClickOverlay="true"
      :show="isData"
      :allowSameDay="true"
      mode="range"
      :maxDate="calendar.maxDate"
      :minDate="calendar.minDate"
      :monthNum="calendar.monthNum"
      @confirm="confirm"
    ></u-calendar>

    <!-- 悬浮球 -->
    <drag-button />
    <export-ball
      ref="exportBall"
      v-hasButtons="['totalBonusExport']"
      @handleExport="handleExport"
    />
  </view>
</template>

<script>
  import * as api from '@/api/settle';
  import * as infor from '@/api/information';
  import { isLocals, isLocalSymbol } from '@/util/numberToCurrency';
  export default {
    data() {
      return {
        select: {},
        isTop: false,
        isData: false,
        isFont: false,
        selectAll: [0],
        selected: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
        tableData: [],
        allList: [
          {
            id: 0,
            text: '全选',
            checked: false,
          },
        ],
        allTxt: {},
        vertexList: [],
        memberteamList: [],
        cardList: [],
        calendar: {
          minDate: '',
          maxDate: '',
          monthNum: 25,
        },
        minDate: '',
        todayData: '',
        acList: [],
        verList: [],
      };
    },
    onLoad(options) {
      // 查询会员信息
      this.getMemberList();
      // 获取字段权限
      this.getUserRole();
      // 获取下拉
      this.getData();
      this.chooseTimed();
      this.todayData = Date.now();
      this.minDate = Number(new Date('1950-01-01'));
    },
    methods: {
      isLocalSymbol,
      isLocals,
      // 设置默认日期，最大值为今天，最小值为去年今天
      chooseTimed() {
        const date = new Date();
        const year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month <= 9) {
          month = '0' + month;
        }
        if (day <= 9) {
          day = '0' + day;
        }
        const minyear = year - 1;
        const maxyear = year + 1;
        this.calendar.minDate = minyear + '-' + month + '-' + day;
        this.calendar.maxDate = maxyear + '-' + month + '-' + day;
      },
      getData() {
        api.accountList().then((res) => {
          this.acList = res.data;
        });
        // 隶属体系下拉选
        infor.getvertexValue().then((res) => {
          this.vertexList = res.data;
        });
        // 隶属团队下拉选
        infor.getmemberTeamList().then((res) => {
          this.memberteamList = res.rows;
        });
      },
      bonusTap(item) {
        uni.setStorageSync('name', 'BonusDetail');
        uni.redirectTo({
          url:
            '/pages/settlementCenter/bonusDetail?settleDate=' + item.settleDate,
        });
      },

      getUserRole() {
        infor.getRoleMenu('totalBonus').then((res) => {
          const obj = {};
          res.data.forEach((item) => {
            obj[item] = 1;
          });
          this.allTxt = obj;
        });
      },
      onReachBottom() {
        this.queryParams.pageNum++;
        this.getMemberList();
      },
      // 查询会员信息
      getMemberList() {
        api
          .queryBonusTotal(Object.assign({}, this.queryParams, this.select))
          .then((res) => {
            this.total = res.total;
            this.tableData = this.tableData.concat(res.rows);
          });
      },
      getList1() {
        this.tableData = [];
        this.queryParams.pageNum = 1;
        this.isTop = false;
        this.getMemberList();
      },
      reset() {
        this.select = {};
      },
      handleExport() {
        const url = '/bonus/manage/bonus/export-bonus-total';
        const obj = Object.assign({}, this.select, this.queryParams);
        this.$refs.exportBall.handleExport(
          url,
          obj,
          `${'奖金汇总'}-${new Date().getTime()}`
        );
      },
      bindPickerChange1(e) {
        this.$set(
          this.select,
          'pkCurrencyVal',
          this.acList[e.detail.value].label
        );
        this.$set(this.select, 'pkCurrency', this.acList[e.detail.value].value);
      },
      bindPickerChange4(e) {
        this.$set(
          this.select,
          'vertexIdVal',
          this.vertexList[e.detail.value].vertexName
        );
        this.$set(
          this.select,
          'pkVertex',
          this.vertexList[e.detail.value].pkId
        );
      },
      bindPickerChange5(e) {
        this.$set(
          this.select,
          'teamIdVal',
          this.memberteamList[e.detail.value].teamName
        );
        this.$set(
          this.select,
          'pkTeamCode',
          this.memberteamList[e.detail.value].pkId
        );
      },
      confirm(e) {
        this.$set(this.select, 'startDate', e[0]);
        this.$set(this.select, 'endDate', e[e.length - 1]);
        this.$set(
          this.select,
          'operationTimeVal',
          e[0] + ' 至 ' + e[e.length - 1]
        );
        this.isData = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .content {
    background: #f9f9f9;
    // padding: 20rpx;
  }
  .header_a {
    position: fixed;
    width: 100%;
  }
  .header {
    margin: 20rpx;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
    border-radius: 10px 10px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    img {
      width: 24px;
      height: 24px;
    }
  }
  .zhan {
    height: 130rpx;
  }
  .kuang {
    background: #f9f9f9;
    border-radius: 10px 10px 10px 10px;
    margin: 20rpx;
  }
  .tftable {
    font-size: 12px;
    border-collapse: collapse;
    border-radius: 10px;
    width: 100%;
    background: #fff;
    border: 1px solid #f9f9f9;
    // margin-top: 20rpx;
    // border-right:1px solid #ccc;border-bottom:1px solid #F00;
    outline: none;
    td {
      font-size: 11px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999;
      padding: 20rpx 40rpx;
      width: 50%;
      // height: 60px;
      border-left: 1px solid #333;
      border-bottom: 1px solid #333;
    }
    td:nth-child(odd) {
      border-left: 1px solid #f9f9f9;
    }
    tr :nth-child(2) {
      color: #333333;
    }
  }
  .che {
    padding: 20rpx 40rpx;
  }
  .tt {
    padding: 20rpx;
    margin-top: 40px;
  }
  ::v-deep .u-transition {
    z-index: 998 !important;
  }
  .footer {
    display: flex;
    align-items: center;
    padding: 20rpx 60rpx;
    .btnn {
      margin-right: 40rpx;
    }
  }
  ::v-deep .u-input {
    padding: 0 9px !important;
  }
  ::v-deep .u-form-item__body__left__content__label {
    font-size: 12px;
  }
  ::v-deep .u-form-item__body {
    padding: 5px 0;
  }
  ::v-deep .u-checkbox-group {
    flex-wrap: wrap;
    flex-shrink: inherit;
    .u-checkbox {
      margin-bottom: 10rpx;
    }
    uni-text {
      font-size: 12px !important;
      margin-right: 10rpx;
    }
    .u-icon__icon {
      margin-right: 0rpx;
    }
  }
</style>
