<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-16 13:59:22
-->
<template>
  <view class="content">
    <view class="header_a">
      <view class="header">
        <img @click="isTop = true" src="@/assets/images/search.png" alt="" />
        <!-- <img @click="isFont=true"
           src="@/assets/images/change.png"
           alt=""> -->
      </view>
    </view>
    <view class="zhan"></view>
    <!-- table -->
    <view class="kuang" v-for="(item, index) in tableData" :key="item.id">
      <table class="tftable" border="1">
        <tr
          v-for="(ctem, cndex) in menuList"
          :key="ctem.id"
          v-if="ctem.id != 0"
        >
          <td align="right">{{ ctem.text }}</td>
          <td align="left">{{ item[ctem.prop] }}</td>
        </tr>
      </table>
    </view>
    <view class="kuang">小计</view>
    <view class="kuang" v-for="(item, index) in tableList" :key="item.id">
      <table class="tftable" border="1">
        <tr
          v-for="(ctem, cndex) in menuList"
          :key="ctem.id"
          v-if="ctem.total != undefined"
        >
          <td align="right">{{ ctem.text }}</td>
          <td align="left">{{ item[ctem.total] }}</td>
        </tr>
      </table>
    </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="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="12">
              <u-form-item :label="'隶属体系'">
                <u-checkbox-group v-model="select.pkBdVertexList">
                  <view
                    v-for="item in verList"
                    :key="item.pkId"
                    class="disFlex"
                  >
                    <u-checkbox
                      :name="item.pkId"
                      @change="selAll($event, item)"
                      :label="item.vertexName"
                    >
                    </u-checkbox>
                    <view class="disFlex1">
                      <u-checkbox-group
                        @change="selAngle(item)"
                        v-model="item.pkBdVertexEd"
                      >
                        <u-checkbox
                          v-for="ctem in item.childList"
                          :key="ctem.pkId"
                          :name="ctem.pkId"
                          :label="ctem.vertexName"
                        >
                        </u-checkbox>
                      </u-checkbox-group>
                    </view>
                  </view>
                </u-checkbox-group>
              </u-form-item>
            </u-col>
          </u-row>
          <!-- <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'隶属团队'">
                <u-checkbox-group v-model="select.pkTeamCodeList">
                  <u-checkbox v-for="item in memberteamList"
                              :key="item.pkId"
                              :name="item.pkId"
                              :label="item.teamName">
                  </u-checkbox>
                </u-checkbox-group>
              </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-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>
    </u-popup>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball
      ref="exportBall"
      v-hasButtons="['performanceListExport']"
      @handleExport="handleExport"
    />
  </view>
</template>

<script>
  import * as api from '@/api/settle';
  import * as infor from '@/api/information';

  import { isLocals, isLocalSymbol, isOther } from '@/util/numberToCurrency';
  export default {
    data() {
      return {
        select: {
          pkBdVertexList: [],
        },
        isData: false,
        isTop: false,
        setTime: 0,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
        tableData: [],
        verList: [],
        memberteamList: [],
        calendar: {
          minDate: '',
          maxDate: '',
          monthNum: 25,
        },
        noticeContent: '',
        allTxt: {},
        tableList: [],
        menuList: [
          {
            id: 0,
            text: '全选',
            checked: false,
          },
          {
            id: 1,
            text: '隶属体系',
            checked: true,
            prop: 'vertexName',
          },
          {
            id: 'creationTime',
            text: '业绩时间',
            checked: true,
            prop: 'creationTime',
          },
          {
            id: 'mainBonusPvRate',
            text: '首购PV拨比(%)',
            checked: true,
            prop: 'mainBonusPvRate',
            total: 'mainBonusPvRateSum',
          },
          {
            id: 'repurBonusPvRate',
            text: '复购PV拨比(%)',
            checked: true,
            prop: 'repurBonusPvRate',
            total: 'repurBonusPvRateSum',
          },
          {
            id: 2,
            text: '隶属团队',
            checked: true,
            prop: 'teamName',
          },
          {
            id: 3,
            text: `${'注册专区'}(${isOther()})`,
            checked: true,
            prop: 'mainRegAmount',
            total: 'mainRegAmountSum',
          },
          {
            id: 4,
            text: `${'升级专区'}(${isOther()})`,
            checked: true,
            prop: 'mainUpAmount',
            total: 'mainUpAmountSum',
          },

          {
            id: 7,
            text: `${'首购金额'}(${isOther()})`,
            checked: true,
            prop: 'firstPurchaseAll',
            total: 'firstPurchaseAllSum',
          },
          {
            id: 8,
            text: `${'直推收益'}(${isOther()})`,
            checked: true,
            prop: 'introduceBonus',
            total: 'introduceBonusSum',
          },
          {
            id: 9,
            text: `${'拓展收益'}(${isOther()})`,
            checked: true,
            prop: 'orgBonus',
            total: 'orgBonusSum',
          },
          {
            id: 10,
            text: `${'辅导收益'}(${isOther()})`,
            checked: true,
            prop: 'leaderBonus',
            total: 'leaderBonusSum',
          },
          // {
          //   id: 11,
          //   text: `${'分红收益'}(${isOther()})`,
          //   checked: true,
          //   prop: 'shareBonus',
          //   total: 'shareBonusSum',
          // },
          {
            id: 12,
            text: `${'服务补贴'}(${isOther()})`,
            checked: true,
            prop: 'serviceBonus',
            total: 'serviceBonusSum',
          },

          {
            id: 16,
            text: `${'复购专区'}(${isOther()})`,
            checked: true,
            prop: 'mainRepurAmount',
            total: 'mainRepurAmountSum',
          },

          {
            id: 18,
            text: `${'复购金额'}(${isOther()})`,
            checked: false,
            prop: 'repurchaseAllAmount',
            total: 'repurchaseAllAmountSum',
          },
          {
            id: 19,
            text: `${'复购极差收益'}(${isOther()})`,
            checked: false,
            prop: 'repurRangeBonus',
            total: 'repurRangeBonusSum',
          },
          {
            id: 20,
            text: `${'复购拓展收益'}(${isOther()})`,
            checked: false,
            prop: 'repurOrgBonus',
            total: 'repurOrgBonusSum',
          },
          {
            id: 21,
            text: `${'首购拨出金额'}(${isOther()})`,
            checked: false,
            prop: 'mainBonus',
            total: 'mainBonusSum',
          },
          {
            id: 22,
            text: '首购拨出比例' + '(%)',
            checked: false,
            prop: 'mainBonusRate',
            total: 'mainBonusRateSum',
          },
          {
            id: 23,
            text: `${'复购拨出金额'}(${isOther()})`,
            checked: false,
            prop: 'repurBonus',
            total: 'repurBonusSum',
          },
          {
            id: 24,
            text: '复购拨出比例' + '(%)',
            checked: false,
            prop: 'repurBonusRate',
            total: 'repurBonusRateSum',
          },
          {
            id: 25,
            text: `${'总拨出金额'}(${isOther()})`,
            checked: false,
            prop: 'totalBonus',
            total: 'totalBonusSum',
          },
          {
            id: 26,
            text: '总拨出比例' + '(%)',
            checked: false,
            prop: 'totalBonusRate',
            total: 'totalBonusRateSum',
          },
        ],
      };
    },
    onLoad(options) {
      this.getData();
      this.chooseTimed();
    },
    onShow() {
      this.getSearch();
    },
    onPullDownRefresh() {
      this.getList1();
    },
    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() {
        // 隶属体系下拉选
        infor.vertexChild().then((res) => {
          this.verList = res.data;
          this.verList.forEach((item) => {
            item.pkBdVertexEd = [];
          });
        });
        // 隶属团队下拉选
        infor.getmemberTeamList().then((res) => {
          this.memberteamList = res.rows;
        });
      },
      selAll(e, item) {
        if (e) {
          this.verList.forEach((ctem) => {
            if (item.pkId == ctem.pkId) {
              ctem.pkBdVertexEd = ctem.childList.map((stem) => stem.pkId);
            }
          });
        } else {
          this.verList.forEach((ctem) => {
            this.$set(ctem, 'pkBdVertexEd', []);
          });
        }
        const arr = [];
        this.verList.forEach((item) => {
          item.pkBdVertexEd.forEach((ctem) => {
            arr.push(ctem);
          });
        });
        const pkBdVertexStr = arr.join(',');
        this.$set(this.select, 'pkBdVertexStr', pkBdVertexStr);
      },
      selAngle(item) {
        this.$nextTick(() => {
          if (item.pkBdVertexEd.length == item.childList.length) {
            this.select.pkBdVertexList.push(item.pkId);
          } else {
            this.select.pkBdVertexList = this.removeElement(
              this.select.pkBdVertexList,
              item.pkId
            );
          }
          const arr = [];
          this.verList.forEach((item) => {
            item.pkBdVertexEd.forEach((ctem) => {
              arr.push(ctem);
            });
          });
          const pkBdVertexStr = arr.join(',');
          this.$set(this.select, 'pkBdVertexStr', pkBdVertexStr);
        });
      },
      removeElement(arr, element) {
        return arr.filter(function (value) {
          return value !== element;
        });
      },
      getSearch() {
        api
          .bonusList(Object.assign({}, this.queryParams, this.select))
          .then((res) => {
            uni.stopPullDownRefresh();
            this.tableData = res.rows;
            this.getTotal();
          });
      },
      getTotal() {
        api
          .subtotal(Object.assign({}, this.queryParams, this.select))
          .then((res) => {
            if (res.code == 200) {
              if (res.data) {
                this.tableList = [res.data];
              } else {
                this.tableList = [];
              }
            }
          });
      },
      getList1() {
        this.tableData = [];
        this.queryParams.pageNum = 1;
        this.isTop = false;
        this.tableData = [];
        this.getSearch();
      },
      reset() {
        this.select = {};
      },
      handleExport() {
        const url = '/member/manage/bonus-statis/export';
        const obj = Object.assign({}, this.select, this.queryParams);
        this.$refs.exportBall.handleExport(
          url,
          obj,
          `拨比列表-${new Date().getTime()}`
        );
      },
      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%;
    z-index: 1;
  }
  .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 {
    margin: 20rpx;
    background: #f9f9f9;
    border-radius: 10px 10px 10px 10px;
  }
  .table_f {
    display: flex;
    uni-button {
      margin: 20rpx 10rpx;
    }
  }
  .tftable {
    table-layout: fixed;
    font-size: 12px;
    border-collapse: collapse;
    border-radius: 10px;
    width: 100%;
    background: #fff;
    border: 1px solid #f9f9f9;
    margin-top: 20rpx;
    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;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    td:nth-child(odd) {
      border-left: 1px solid #f9f9f9;
    }
    tr :nth-child(2) {
      color: #333333;
    }
  }
  .tt {
    padding: 20rpx;
    margin-top: 40px;
  }
  .tt1 {
    padding: 20rpx;
    margin-top: 40px;
    // width: 60%;
  }
  ::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--row {
    display: flex;
    flex-direction: column;
  }
  ::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;
    }
  }
  .disFlex {
    display: flex;
    border-bottom: 2rpx dashed #ccc;
    margin-bottom: 8rpx;
  }
  .disFlex1 {
    display: flex;
    margin-left: 10rpx;
  }
</style>
