<!--
 * @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="index">
      <table class="tftable"
             border="1">
        
        <tr>
          <td align="right">{{ '会员编号' }}</td>
          <td align="left">{{ item.memberCode }}</td>
        </tr>
        <tr>
          <td align="right">{{ '会员姓名' }}</td>
          <td align="left">{{ item.memberName }}</td>
        </tr>
        <tr>
          <td align="right">隶属体系</td>
          <td align="left">{{ item.vertexName }}</td>
        </tr>
        <tr>
          <td align="right">隶属团队</td>
          <td align="left">{{ item.teamName }}</td>
        </tr>
        <tr>
          <td align="right">{{ '血缘代数' }}</td>
          <td align="left">{{ item.plevel }}</td>
        </tr>
        <tr>
          <td align="right">{{ '安置层数' }}</td>
          <td align="left">{{ item.slevel }}</td>
        </tr>
        <tr v-if="showData.account1">
          <td align="right">{{ '消费余额'+'(¥)' }}</td>
          <td align="left">{{ item.account1 }}</td>
        </tr>
        <tr v-if="showData.availableAccount1">
          <td align="right">{{ '可用消费'+'(¥)' }}</td>
          <td align="left">{{ item.availableAccount1 }}</td>
        </tr>
        <tr v-if="showData.lockAccount1">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount1 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount1">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount1 }}</td>
        </tr>

        <tr v-if="showData.account2">
          <td align="right">{{ '现金余额' }}(¥)</td>
          <td align="left">{{ item.account2 }}</td>
        </tr>
        <tr v-if="showData.availableAccount2">
          <td align="right">{{ '可用现金' }}(¥)</td>
          <td align="left">{{ item.availableAccount2 }}</td>
        </tr>
        <tr v-if="showData.lockAccount2">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount2 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount2">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount2 }}</td>
        </tr>
        <tr v-if="showData.account3">
          <td align="right">{{ '政策余额' }}(¥)</td>
          <td align="left">{{ item.account3 }}</td>
        </tr>
        <tr v-if="showData.availableAccount3">
          <td align="right">{{ '可用政策' }}(¥)</td>
          <td align="left">{{ item.availableAccount3 }}</td>
        </tr>
        <tr v-if="showData.lockAccount3">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount3 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount3">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount3 }}</td>
        </tr>
        <tr v-if="showData.account4">
          <td align="right">{{ '奖金余额' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account4 }}</td>
        </tr>
        <tr v-if="showData.availableAccount4">
          <td align="right">{{ '可用奖金' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount4 }}</td>
        </tr>
        <tr v-if="showData.submitAccount4">
          <td align="right">{{ '可提奖金' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.submitAccount4 }}</td>
        </tr>
        <tr v-if="showData.lockAccount4">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount4 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount4">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount4 }}</td>
        </tr>
        <tr v-if="showData.lockWithdrawAccount4">
          <td align="right">{{ '禁止提现' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockWithdrawAccount4 }}</td>
        </tr>
        <tr v-if="showData.account5">
          <td align="right">{{ '重消余额' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account5 }}</td>
        </tr>
        <tr v-if="showData.availableAccount5">
          <td align="right">{{ '可用重消' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount5 }}</td>
        </tr>
        <tr v-if="showData.lockAccount5">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount5 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount5">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount5 }}</td>
        </tr>
        <tr v-if="showData.account6">
          <td align="right">{{ '积分余额' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account6 }}</td>
        </tr>
        <tr v-if="showData.availableAccount6">
          <td align="right">{{ '可用积分' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount6 }}</td>
        </tr>
        <tr v-if="showData.lockAccount6">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount6 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount6">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount6 }}</td>
        </tr>
        <tr v-if="showData.account7">
          <td align="right">{{ '鼓励余额' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account7 }}</td>
        </tr>
        <tr v-if="showData.availableAccount7">
          <td align="right">{{ '可用鼓励' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount7 }}</td>
        </tr>
        <tr v-if="showData.lockAccount7">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount7 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount7">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount7 }}</td>
        </tr>
        <tr v-if="showData.account8">
          <td align="right">{{ '复购券余额' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account8 }}</td>
        </tr>
        <tr v-if="showData.availableAccount8">
          <td align="right">{{ '可用复购券' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount8 }}</td>
        </tr>
        <tr v-if="showData.lockAccount8">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount8 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount8">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount8 }}</td>
        </tr>
        <tr v-if="showData.account9">
          <td align="right">{{ '全球积分余额' }}(¥)</td>
          <td align="left">{{ item.account9 }}</td>
        </tr>
        <tr v-if="showData.availableAccount9">
          <td align="right">{{ '可用全球积分' }}</td>
          <td align="left">{{ item.availableAccount9 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount9">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount9 }}</td>
        </tr>
        <tr v-if="showData.account10">
          <td align="right">{{ '车奖积分余额' }}</td>
          <td align="left">{{ item.account10 }}</td>
        </tr>
        <tr v-if="showData.availableAccount10">
          <td align="right">{{ '可用车奖积分' }}</td>
          <td align="left">{{ item.availableAccount10 }}</td>
        </tr>
        <tr v-if="showData.lockAccount10">
          <td align="right">{{ '禁止消费' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount10 }}</td>
        </tr>
        <tr v-if="showData.lockTransferAccount10">
          <td align="right">{{ '禁止转账' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockTransferAccount10 }}</td>
        </tr>
        <tr v-if="showData.account11">
          <td align="right">{{ '直播代金券' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account11 }}</td>
        </tr>
        <tr v-if="showData.availableAccount11">
          <td align="right">可用直播代金券({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount11 }}</td>
        </tr>
        <tr v-if="showData.account12">
          <td align="right">{{'乐学代金券'}}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account12 }}</td>
        </tr>
        <tr v-if="showData.availableAccount12">
          <td align="right">可用乐学代金券({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount12 }}</td>
        </tr>
        <tr v-if="showData.account13">
          <td align="right">{{'海豆余额'}}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.account13 }}</td>
        </tr>
        <tr v-if="showData.availableAccount13">
          <td align="right">{{'可用海豆'}}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.availableAccount13 }}</td>
        </tr>
        <tr v-if="showData.lockAccount13">
          <td align="right">{{'禁止消费'}}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.lockAccount13 }}</td>
        </tr>
      </table>
      <view class="table_f">

        <u-button @click="toDetails(item.memberCode)"
                  size="small"
                  color="#FFAD41"
                  :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.memberCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'会员姓名'">
                <u--input fontSize="12"
                          v-model="select.memberName"></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-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'血缘代数'">
                <u--input fontSize="12"
                          v-model="select.plevel"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'安置层数'">
                <u--input fontSize="12"
                          v-model="select.slevel"></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>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball ref="exportBall"
    v-hasButtons="['WalletDetailssExport']"

                 @handleExport="handleExport" />
  </view>
</template>

<script>
import * as api from '@/api/information'
import * as fin from '@/api/financial'

import { isLocals, isLocalSymbol } from '@/util/numberToCurrency'
export default {
  data() {
    return {
      select: {},
      isTop: false,
      setTime: 0,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      vertexList: [],
      memberteamList: [],
      userCountry: {},
      showData: {},
    }
  },
  onLoad(options) {
    if (uni.getStorageSync('userAll')) {
      this.userCountry = JSON.parse(uni.getStorageSync('userAll')).country
    }
    this.getData()
  },
  onShow() {
    this.getSearch()
    this.getOthers()
  },
  onPullDownRefresh() {
    this.getList1()
  },
  methods: {
    isLocalSymbol,
    isLocals,
    toDetails(id) {
      uni.redirectTo({
        url: '/pages/financial/walletDetailsPro?memberCode=' + id,
      })
    },
    handleExport() {
      let url = '/member/manager/account/export'
      let obj = Object.assign({}, this.select, this.queryParams)
      this.$refs.exportBall.handleExport(url, obj, `${'钱包明细'}`)
    },
    getOthers() {
      fin.listField().then((res) => {
        const obj = {}
        res.data.forEach((ele) => {
          obj[ele] = true
        })
        this.showData = obj
      })
    },
    getData() {
      // 隶属体系下拉选
      api.getvertexValue().then((res) => {
        this.vertexList = res.data
      })
      //隶属团队下拉选
      api.getmemberTeamList().then((res) => {
        this.memberteamList = res.rows
      })
    },
    bindPickerChange4(e) {
      this.$set(
        this.select,
        'vertexIdVal',
        this.vertexList[e.detail.value].vertexName
      )
      this.$set(this.select, 'vertexId', this.vertexList[e.detail.value].pkId)
    },
    bindPickerChange5(e) {
      this.$set(
        this.select,
        'teamIdVal',
        this.memberteamList[e.detail.value].teamName
      )
      this.$set(this.select, 'teamId', this.memberteamList[e.detail.value].pkId)
    },
    onReachBottom() {
      this.queryParams.pageNum++
      this.getSearch()
    },
    //查询会员信息
    getSearch() {
      fin
        .accountList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          uni.stopPullDownRefresh()
          this.total = res.total
          this.tableData = this.tableData.concat(res.rows)
          this.tableData.forEach((item) => {
            item.pkCountryName = this.userCountry.shortName
            item.pkCountryIcon = this.userCountry.nationalFlag2
          })
        })
    },
    getList1() {
      this.tableData = []
      this.queryParams.pageNum = 1
      this.isTop = false
      this.tableData = []
      this.getSearch()
    },
    reset() {
      this.select = {}
    },
  },
}
</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 {
  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;
  }
  td:nth-child(odd) {
    border-left: 1px solid #f9f9f9;
  }
  tr :nth-child(2) {
    color: #333333;
  }
}
.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;
}
.theflex {
  display: flex;
  align-items: center;
}
</style>