<template>
  <view class="content">
    <view class="header">
      <view class="headernei" @click="isTop = true">
        <img src="@/assets/images/search.png" alt="" />
      </view>
    </view>
    <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>

        <!-- <view  v-for="(aitem,aindex) in titelList  :key="aindex">
       
        </view> -->
        <template v-for="(aitem, aindex) in titelList">
          <tr>
            <td align="right">
              {{ `${aitem.label}${'余额'}(${isLocalSymbol()})` }}
            </td>
            <td align="left">{{ item["account" + aitem.value] }}</td>
          </tr>
          <tr>
            <td align="right">{{ `${'可用'}${aitem.label}(${isLocalSymbol()})` }}</td>
            <td align="left">{{ item["availableAccount" + aitem.value] }}</td>
          </tr>
          <tr>
            <td align="right">
              {{ `${'禁止消费'}(${isLocalSymbol()})` }}
            </td>
            <td align="left">{{ item["lockAccount" + aitem.value] }}</td>
          </tr>
          <tr>
            <td align="right">
              {{ `${'禁止转账'}(${isLocalSymbol()})` }}
            </td>
            <td align="left">
              {{ item["lockTransferAccount" + aitem.value] }}
            </td>
          </tr>
          <tr>
            <td align="right">
              {{ `${aitem.label}${'余额'}(${isLocals()})` }}
            </td>
            <td align="left">
              {{ item["settleAccount" + aitem.value] }}
            </td>
          </tr>
          <tr>
            <td align="right">{{ `${'可用'}${aitem.label}(${isLocals()})` }}</td>
            <td align="left">{{ item["settleAvailableAccount" + aitem.value] }}</td>
          </tr>
        
          <tr>
            <td align="right">
              {{ `${'禁止消费'}(${isLocals()})` }}
            </td>
            <td align="left">{{ item["settleLockAccount" + aitem.value] }}</td>
          </tr>
          <tr>
            <td align="right">
              {{ `${'禁止转账'}(${isLocals()})` }}
            </td>
            <td align="left">
              {{ item["settleLockTransferAccount" + aitem.value] }}
            </td>
          </tr>
        </template>
      </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="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="'币种'">
              <u-checkbox-group  @change="changeAccount" v-model="select.pkAccounts" placement="row">
                <u-checkbox
                  size="24rpx"
                  :customStyle="{ marginRight: '10rpx' }"
                  v-for="item in enumsAccountList"
                  :key="item.fieldValue"
                  :label="item.accountName"
                  :name="item.fieldValue"
                 
                >
                </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-popup>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball v-hasButtons="['FreezeDetailExport']" ref="exportBall" @handleExport="handleExport" />
  </view>
</template>
    
    <script>
import * as api from "@/api/financial";
import { isLocals, isLocalSymbol } from "@/util/numberToCurrency";
export default {
  data() {
    return {
      select: {},
      isTop: false,
      isData: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        pkAccounts: [],
      },
      enumsAccountList: [], //币种
      tableData: [],
      accountList: [], //钱包类型
      userCountry: {},
      titelList: [],
    };
  },
  onLoad(options) {
    //查询会员信息
    this.getSearch();

    // 获取下拉
    this.getData();
  },
  methods: {
    isLocalSymbol,
    isLocals,
    getData() {
      api.getenumsAccount().then((res) => {
        this.enumsAccountList = res.rows;
      });
    },
    changeAccount() {
      this.titelList = [];
      this.select.pkAccounts.forEach((ele) => {
        this.enumsAccountList.forEach((item) => {
          if (ele == item.fieldValue) {
            this.titelList.push({ value: ele, label: item.accountName });
          }
        });
      });
      this.getSearch();
    },
    onReachBottom() {
      this.queryParams.pageNum++;
      this.getSearch();
    },
    getSearch() {
        
      api
        .getFrozenList(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.getSearch();
    },
    reset() {
      this.select = {};
      this.getSearch();
    },
    handleExport() {
      let url = "/member/manager/frozen/frozen-export";
      let obj = Object.assign({}, this.select, this.queryParams);
      this.$refs.exportBall.handleExport(url, obj, '冻结明细');
    },
    bindPickerChange1(e) {
      this.$set(
        this.select,
        "accountName",
        this.accountList[e.detail.value].accountName
      );
      this.$set(
        this.select,
        "pkAccount",
        this.accountList[e.detail.value].pkId
      );
    },
  },
};
</script>
    
    <style lang="scss" scoped>
::v-deep .u-checkbox-group--row[data-v-3d1b15f2] {
  width: 700rpx;
  flex-wrap: wrap;
}
.content {
  background: #f9f9f9;
  padding: 20rpx 24rpx;
}
.header {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  .headernei {
    background: rgba(216, 216, 216, 0);
    border-radius: 64rpx;
    opacity: 1;
    border: 2rpx solid #259dfe;
    width: 100%;
    padding: 22rpx 20rpx;
    img {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
.kuang {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.tftable {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border: 1px solid #f9f9f9;
  margin-top: 20rpx;
  td {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    padding: 20rpx 40rpx;
    width: 50%;
  }
  tr :nth-child(2) {
    color: #333333;
    font-size: 26rpx;
  }
  .theflex {
    display: flex;
    align-items: center;
  }
}
.che {
  padding: 20rpx 40rpx;
}
.tt {
  padding: 20rpx;
  margin-top: 20px;
  font-size: 24rpx;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  font-size: 24rpx;
  .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>