<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>
    <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.settleDate">
          <td align="right">结算日期</td>
          <td align="left">{{ item.settleDate }}</td>
        </tr>
        <tr v-if="allTxt.orderCode">
          <td align="right">订单编号</td>
          <td align="left">{{ item.orderCode }}</td>
        </tr>
        <tr v-if="allTxt.orderTypeVal">
          <td align="right">订单类型</td>
          <td align="left">{{ item.orderTypeVal }}</td>
        </tr>

        <tr v-if="allTxt.sourceMemberCode">
          <td align="right">来源编号</td>
          <td align="left">{{ item.sourceMemberCode }}</td>
        </tr>
        <tr v-if="allTxt.sourceMemberName">
          <td align="right">来源姓名</td>
          <td align="left">{{ item.sourceMemberName }}</td>
        </tr>
        <tr v-if="allTxt.orderAmount">
          <td align="right">来源金额({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.orderAmount | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.orderAchieveOri">
          <td align="right">来源业绩({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.orderAchieveOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.settleCountry">
          <td align="right">结算国家</td>
          <td align="left">{{ item.settleCountry }}</td>
        </tr>
        <tr v-if="allTxt.memberCode">
          <td align="right">收益编号</td>
          <td align="left">{{ item.memberCode }}</td>
        </tr>
        <tr v-if="allTxt.memberName">
          <td align="right">收益姓名</td>
          <td align="left">{{ item.memberName }}</td>
        </tr>
        <tr v-if="allTxt.pkSettleGradeVal">
          <td align="right">结算等级</td>
          <td align="left">{{ item.pkSettleGradeVal }}</td>
        </tr>
        <tr v-if="allTxt.pkAwardsVal">
          <td align="right">荣誉奖衔</td>
          <td align="left">{{ item.pkAwardsVal }}</td>
        </tr>
        <tr v-if="getColumnVisible('round') && allTxt.round">
          <td align="right">直推轮数</td>
          <td align="left">{{ item.round }}</td>
        </tr>
        <tr v-if="getColumnVisible('second') && allTxt.second">
          <td align="right">直推次数</td>
          <td align="left">{{ item.second }}</td>
        </tr>
        <tr v-if="getColumnVisible('currentTouch') && allTxt.currentTouch">
          <td align="right">当前碰次</td>
          <td align="left">{{ item.currentTouch }}</td>
        </tr>
        <tr v-if="getColumnVisible('expandTouch') && allTxt.expandTouch">
          <td align="right">拓展碰次</td>
          <td align="left">{{ item.expandTouch }}</td>
        </tr>
        <tr
          v-if="
            getColumnVisible('currentGeneration') && allTxt.currentGeneration
          "
        >
          <td align="right">当前代数</td>
          <td align="left">{{ item.currentGeneration }}</td>
        </tr>
        <tr
          v-if="getColumnVisible('coachGeneration') && allTxt.coachGeneration"
        >
          <td align="right">辅导代数</td>
          <td align="left">{{ item.coachGeneration }}</td>
        </tr>
        <tr
          v-if="
            getColumnVisible('expandNoCappingOri') && allTxt.expandNoCappingOri
          "
        >
          <td align="right">拓展无封({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.expandNoCappingOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr
          v-if="getColumnVisible('expandCappingOri') && allTxt.expandCappingOri"
        >
          <td align="right">拓展封顶({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.expandCappingOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr
          v-if="
            getColumnVisible('expandNormalHalfOri') &&
            allTxt.expandNormalHalfOri
          "
        >
          <td align="right">拓展正常减半({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.expandNormalHalfOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr
          v-if="
            getColumnVisible('expandNormalRealOri') &&
            allTxt.expandNormalRealOri
          "
        >
          <td align="right">拓展实际减半({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.expandNormalRealOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.pretaxIncomeOri">
          <td align="right">税前收益({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.pretaxIncomeOri }}</td>
        </tr>

        <tr>
          <td align="right">重消收益({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.backPoints }}</td>
        </tr>
        <tr>
          <td align="right">平台服务费({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.serviceSpend }}</td>
        </tr>
        <tr v-if="allTxt.realIncomeOri">
          <td align="right">实际收益({{ isLocalSymbol() }})</td>
          <td align="left">
            {{ item.realIncomeOri | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="allTxt.bonusName">
          <td align="right">收益类型</td>
          <td align="left">{{ item.bonusName }}</td>
        </tr>
        <tr v-if="allTxt.incomeStatusVal">
          <td align="right">收益状态</td>
          <td align="left">{{ item.incomeStatusVal }}</td>
        </tr>
        <tr v-if="allTxt.vertexName">
          <td align="right">隶属体系</td>
          <td align="left">{{ item.vertexName }}</td>
        </tr>
        <tr v-if="allTxt.teamName">
          <td align="right">隶属团队</td>
          <td align="left">{{ item.teamName }}</td>
        </tr>
        <tr v-if="allTxt.remark">
          <td align="right">奖金说明</td>
          <td align="left">
            <span class="remark">
              {{ item.remark }}
            </span>
          </td>
        </tr>
        <tr v-if="allTxt.incomeRatio">
          <td align="right">收益占比(%)</td>
          <td align="left">{{ item.incomeRatio }}</td>
        </tr>
        <tr v-if="allTxt.incomeDialRatio">
          <td align="right">收益拨比(%)</td>
          <td align="left">{{ item.incomeDialRatio }}</td>
        </tr>
        <tr v-if="allTxt.orderDialRatio">
          <td align="right">订单拨比(%)</td>
          <td align="left">{{ item.orderDialRatio }}</td>
        </tr>
      </table>
    </view>
    <!-- 侧边弹框 -->
    <u-popup :show="isFont" mode="right" @close="isFont = false">
      <view class="che">
        <u-checkbox-group
          v-model="selectAll"
          @change="getAll"
          placement="column"
          activeColor="#ED1D25"
        >
          <u-checkbox
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in allList"
            :key="index"
            :label="item.text"
            :name="item.id"
          >
          </u-checkbox>
        </u-checkbox-group>
        <u-checkbox-group
          v-model="selected"
          @change="getMenu"
          placement="column"
          activeColor="#ED1D25"
        >
          <u-checkbox
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in menuList"
            :key="index"
            v-show="index != 0"
            :label="item.text"
            :name="item.id"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </u-popup>
    <!-- 顶部搜索 -->
    <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.orderCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'来源编号'">
                <u--input
                  fontSize="12"
                  v-model="select.sourceMemberCode"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'来源姓名'">
                <u--input
                  fontSize="12"
                  v-model="select.sourceMemberName"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'收益编号'">
                <u--input fontSize="12" v-model="select.memberCode"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'收益姓名'">
                <u--input fontSize="12" v-model="select.memberName"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'订单类型'">
                <picker
                  :range="orderTypeList"
                  range-key="label"
                  @change="bindPickerChange2"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.orderTypeVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'收益类型'">
                <picker
                  :range="yieldList"
                  range-key="bonusName"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.pkBonusItemsVal"
                    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="yieldStatus"
                  range-key="label"
                  @change="bindPickerChange3"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.incomeStatusVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </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="bindPickerChange6"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.pkVertexVal"
                    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="bindPickerChange7"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.pkTeamCodeVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>

          <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-row>
          <u-row gutter="10"> </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.creationTime"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </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="['sourceBonusExport']"
      @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,
          },
        ],
        menuList: [
          {
            id: 0,
            text: '全选',
            checked: true,
          },
          {
            id: 1,
            text: `${'拓展无封'}(${isLocalSymbol()})`,
            checked: true,
            prop: 'expandNoCappingOri',
          },
          {
            id: 2,
            text: `${'拓展封顶'}(${isLocalSymbol()})`,
            checked: true,
            prop: 'expandCapping',
          },
          {
            id: 3,
            text: `${'拓展正常减半'}(${isLocalSymbol()})`,
            checked: true,
            prop: 'expandNormalHalf',
          },
          {
            id: 4,
            text: `${'拓展实际减半'}(${isLocalSymbol()})`,
            checked: true,
            prop: 'expanndNormalReal',
          },

          {
            id: 6,
            text: '拓展封顶' + `(${isLocals()})`,
            checked: true,
            prop: 'expandCappingDollar',
          },

          {
            id: 9,
            text: '直推轮数',
            checked: true,
            prop: 'round',
          },
          {
            id: 10,
            text: '直推次数',
            checked: true,
            prop: 'second',
          },
          {
            id: 11,
            text: '当前碰次',
            checked: true,
            prop: 'currentTouch',
          },
          {
            id: 12,
            text: '拓展碰次',
            checked: true,
            prop: 'expandTouch',
          },
          {
            id: 13,
            text: '当前代数',
            checked: true,
            prop: 'currentGeneration',
          },
          {
            id: 14,
            text: '辅助代数',
            checked: true,
            prop: 'coachGeneration',
          },
        ],
        allTxt: {},
        vertexList: [],
        memberteamList: [],
        cardList: [],
        calendar: {
          minDate: '',
          maxDate: '',
          monthNum: 25,
        },
        minDate: '',
        todayData: '',
        birthDate: '',
        sexList: [],
        orderTypeList: [],
        yieldList: [],
        yieldStatus: [],
        countryList: [],
      };
    },
    onLoad(options) {
      // 查询会员信息
      this.getMemberList();
      // 获取字段权限
      this.getUserRole();
      // 获取下拉
      this.getData();
      this.chooseTimed();
      this.getAll([0]);
      this.todayData = Date.now();
      this.minDate = Number(new Date('1950-01-01'));
    },
    methods: {
      getColumnVisible(column) {
        return this.menuList.find((item) => item.prop === column)?.checked;
      },
      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.getvertexValue().then((res) => {
          this.vertexList = res.data;
        });
        // 隶属团队下拉选
        infor.getmemberTeamList().then((res) => {
          this.memberteamList = res.rows;
        });
        // 获取收益类型
        api.getYieldType().then((res) => {
          this.yieldList = res.rows;
        });
        // 获取收益状态
        api.getYieldStatus().then((res) => {
          this.yieldStatus = res.data;
        });
        // 获取订单类型
        api.getOrderType().then((res) => {
          this.orderTypeList = res.data;
        });
        // 获取国家
        api.getcountryAllList().then((res) => {
          this.countryList = res.data;
        });
      },
      // 全选
      getAll(e) {
        if (e.length > 0) {
          this.menuList.forEach((item) => {
            this.$set(item, 'checked', true);
            this.selected.push(item.id);
          });
        } else {
          this.menuList.forEach((item) => {
            this.$set(item, 'checked', false);
          });
          this.$set(this, 'selected', []);
        }
      },
      // 单选
      getMenu(e) {
        this.menuList.forEach((item) => {
          this.$set(item, 'checked', false);
          e.forEach((ctem) => {
            if (item.id == ctem) {
              this.$set(item, 'checked', true);
            }
          });
        });
        if (e.length == this.menuList.length) {
          this.$set(this, 'selectAll', [0]);
        } else {
          this.$set(this, 'selectAll', []);
        }
      },
      getUserRole() {
        infor.getRoleMenu('sourceBonus').then((res) => {
          const obj = {};
          res.data.forEach((item) => {
            obj[item] = 1;
          });
          this.allTxt = obj;
        });
      },
      onReachBottom() {
        this.queryParams.pageNum++;
        this.getMemberList();
      },
      // 查询会员信息
      getMemberList() {
        api
          .bonusSource(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-source';
        const obj = Object.assign({}, this.select, this.queryParams);
        this.$refs.exportBall.handleExport(
          url,
          obj,
          `${'奖金来源'}${new Date().getTime()}`
        );
      },
      bindPickerChange1(e) {
        this.$set(
          this.select,
          'pkBonusItemsVal',
          this.yieldList[e.detail.value].bonusName
        );
        this.$set(
          this.select,
          'pkBonusItems',
          this.yieldList[e.detail.value].pkId
        );
      },
      bindPickerChange2(e) {
        this.$set(
          this.select,
          'orderTypeVal',
          this.orderTypeList[e.detail.value].label
        );
        this.$set(
          this.select,
          'orderType',
          this.orderTypeList[e.detail.value].value
        );
      },
      bindPickerChange3(e) {
        this.$set(
          this.select,
          'incomeStatusVal',
          this.yieldStatus[e.detail.value].label
        );
        this.$set(
          this.select,
          'incomeStatus',
          this.yieldStatus[e.detail.value].value
        );
      },
      bindPickerChange4(e) {
        this.$set(
          this.select,
          'sourceCountryVal',
          this.countryList[e.detail.value].name
        );
        this.$set(
          this.select,
          'sourceCountry',
          this.countryList[e.detail.value].pkId
        );
      },
      bindPickerChange5(e) {
        this.$set(
          this.select,
          'settleCountryVal',
          this.countryList[e.detail.value].name
        );
        this.$set(
          this.select,
          'settleCountry',
          this.countryList[e.detail.value].pkId
        );
      },
      bindPickerChange6(e) {
        this.$set(
          this.select,
          'pkVertexVal',
          this.vertexList[e.detail.value].vertexName
        );
        this.$set(
          this.select,
          'pkVertex',
          this.vertexList[e.detail.value].pkId
        );
      },
      bindPickerChange7(e) {
        this.$set(
          this.select,
          'pkTeamCodeVal',
          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, 'creationTime', e[0] + ' 至 ' + e[e.length - 1]);

        this.isData = false;
      },
      addressData(diqu, obj) {
        this.select.diqu = diqu;
        this.select.recProvince = obj.province;
        this.select.recCity = obj.city;
        this.select.recCounty = obj.county;
        this.$forceUpdate();
      },
    },
  };
</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 {
    table-layout: fixed;
    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;
  }
</style>
