<template>
  <view>
    <view class="d-b-c top-nav">
      <!-- <view class="top-item active" @click="gotoPage('/pages/user/my-wallet/recharge')">{{$t('MN_F_T_87')}}</view> -->
      <!-- <view class="top-item active" @click="onpenPopFunc">{{
        $t("fn_064")
      }}</view> -->
      <view class="top-item active">{{ $t("MY_WAL_1") }}</view>
      <view
        class="top-item"
        @click="gotoPage('/pages/user/my-wallet/recoilDetails')"
        >{{ $t("fn_297") }}</view
      >
      <view
        class="top-item"
        @click="gotoPage('/pages/user/rechargeApplication/index')"
        >{{ $t("fn_139") }}</view
      >
      <view
        class="top-item"
        @click="gotoPage('/pages/user/rechargeMatch/index')"
        >{{ $t("fn_157") }}</view
      >
      <view
        class="top-item"
        @click="pageSubmit('/pages/user/my-wallet/cash-apply', 1)"
        >{{ $t("MY_WAL_5") }}
      </view>
      <view
        class="top-item"
        @click="pageSubmit('/pages/user/my-wallet/transfer', 2)"
        >{{ $t("MY_WAL_6") }}</view
      >
    </view>
    <view class="wallet-list">
      <!-- <scroll-view scroll-y="true" :style="'height:'+scrollviewHigh+'px'"> -->
      <view class="wallet-item" v-for="(item, index) in list" :key="index">
        <image
          class="wallet-item-bg"
          src="/static/bg/wallet-bg.png"
          mode=""
        ></image>
        <view class="pr wallet-item-box" style="z-index: 1">
          <view class="wallet-item-top gray3">
            <view class="d-b-c ww100 mb10">
              <view class="d-s-c">
                <view class="f32 fb">{{ item.pkAccountVal }}</view>
                <image
                  @click="hideSubmit(index)"
                  v-if="item.open"
                  class="eyes-icon"
                  src="/static/icon/eyes-open-b.png"
                  mode=""
                ></image>
                <image
                  @click="showSubmit(index)"
                  v-else
                  class="eyes-icon"
                  src="/static/icon/eyes-close-b.png"
                  mode=""
                ></image>
              </view>
              <view
                style="color: #1d46d2"
                @click="
                  gotoPage(
                    '/pages/user/my-wallet/detailed?pkAccount=' +
                      item.pkAccountId
                  )
                "
                v-if="!item.isShow"
                >{{ $t("MY_WAL_2") }}</view
              >
            </view>
            <view class="mb6"
              >{{ $t("MN_F_T_280") }}({{ currencyIcon() }})</view
            >
            <view class="f32">{{
              item.open ? toThousands(item.balance, 2, true) : "****"
            }}</view>
          </view>
          <view class="wallet-item-bottom gray3">
            <view class="d-b-c mb16">
              <view>{{ $t("MY_WAL_8") }}({{ currencyIcon() }})</view>
              <view>{{
                item.open ? toThousands(item.availableBalance, 2, true) : "****"
              }}</view>
            </view>
            <view class="d-b-c">
              <view class="d-s-c">
                <text class="mr20"
                  >{{ $t("MY_WAL_9") }}({{ currencyIcon() }})</text
                >
                <u-icon
                  name="info-circle-fill"
                  width="28rpx"
                  height="28rpx"
                  color="#3d3d3d"
                  @click="showTips(item)"
                ></u-icon>
              </view>
              <view>{{
                item.open
                  ? toThousands(item.unavailableBalance, 2, true)
                  : "****"
              }}</view>
            </view>
            <view class="d-b-c mb16 mt10" v-if="item.isWithdrawal == 0">
              <view>{{ $t("MY_WAL_13") }}({{ currencyIcon() }})</view>
              <view>{{
                item.open ? toThousands(item.withdrawBalance, 2, true) : "****"
              }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 没有记录 -->
      <view class="d-c-c p30" v-if="list.length == 0 && !loading">
        <text class="iconfont icon-wushuju"></text>
        <text class="cont">{{ $t("w_0405") }}</text>
      </view>
      <!-- <uni-load-more v-else :loadingType="loadingType"></uni-load-more> -->
      <!-- </scroll-view> -->
    </view>
    <popInput
      :title="$t('MY_WAL_21')"
      type="text"
      :password="true"
      :placeholder="$t('PER_DA_50')"
      :isShow="showPop"
      @close="closeFunc"
    ></popInput>
    <Popup :show="isPopup" :width="660" :padding="0" @hidePopup="hidePopupFunc">
      <view class="d-e-c ww100">
        <view class="p20" @click="hidePopupFunc(true)"
          ><text class="icon iconfont icon-guanbi"></text
        ></view>
      </view>
      <view class="ww100 box-s-b" style="padding: 0 60rpx 48rpx 60rpx">
        <view class="goodsDiag">
          <view class="goodsDiag-title d-c-c">{{ $t("fn_064") }}</view>
          <view class="dis_a">
            <view class="d-b-s mb20">
              <view class="flex-label f28 gray3">{{ $t("CK_KS_17") }}</view>
              <view class="flex-1"
                ><u-number-box
                  integer
                  v-model="exchangeNum"
                  :min="1"
                ></u-number-box>
              </view>
            </view>
            <view class="d-b-s mb20">
              <view class="flex-label f28 gray3"
                >{{ $t("fn_020") }}({{ currencyIcon() }})</view
              >
              <view class="flex-1 f36 fb">{{
                formatNum(redeemparams.redeemPoints * exchangeNum)
              }}</view>
            </view>
            <view class="d-b-s mb20">
              <view class="flex-label f28 gray3"
                >{{ $t("fn_021") }}({{ currencyIcon() }})</view
              >
              <view class="flex-1 f36 fb">{{
                formatNum(redeemparams.redeemIncome * exchangeNum)
              }}</view>
            </view>
            <view class="d-b-s">
              <view class="flex-label f28 gray3"
                >{{ $t("w_0331") }}({{ currencyIcon() }})</view
              >
              <view class="flex-1">
                <text class="f36 fb domation">{{
                  formatNum(redeemparams.payAmount * exchangeNum)
                }}</text>
              </view>
            </view>
          </view>
        </view>
        <button class="s-pop-btn d-c-c" @click="gotoExcahnge">
          {{ $t("MN_F_32") }}
        </button>
      </view>
    </Popup>
  </view>
</template>

<script>
import Popup from "@/components/uni-popup.vue";
import popInput from "@/components/pop-input.vue";
export default {
  components: {
    popInput,
    Popup,
  },
  data() {
    return {
      open_xj: false,
      open_jj: false,
      open_xf: false,
      open_jf: false,
      list: [],
      showPop: false,
      page: "",
      loading: false,
      userinfo: {
        pkSettleCountry: "",
      },
      isPopup: false,
      redeemparams: {
        redeemPoints: "",
        redeemIncome: "",
        payAmount: "",
      },
      exchangeNum: 1,
    };
  },
  onShow() {
    this.getData();
    this.getInfo();
  },
  methods: {
    gotoExcahnge() {
      this.isPopup = false;
      this.gotoPage(
        "/pages/index/tree-recharge?type=1&num=" +
          this.exchangeNum +
          "&unitprice=" +
          this.redeemparams.payAmount
      );
    },
    onpenPopFunc(e) {
      let self = this;
      self._get("member/api/recharge/show-recoil", {}, function (res) {
        if (res.code == 200) {
          self.redeemparams = res.data;
        }
      });
      this.isPopup = true;
    },
    hidePopupFunc(e) {
      if (e) {
      }
      this.exchangeNum = 1;
      this.isPopup = false;
    },
    getData() {
      let self = this;
      if (self.loading) {
        return;
      }
      self.loading = true;
      self._get(
        "member/api/wallet/balance",
        {},
        function (res) {
          self.list = res.data.memberWalletBalanceVOList;
          // self.codeimg = res.img;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    showSubmit(e) {
      let self = this;
      // self.list[e].open = true;
      self.$set(self.list[e], "open", true);
    },
    hideSubmit(e) {
      let self = this;
      // self.list[e].open = false;
      self.$set(self.list[e], "open", false);
    },
    pageSubmit(e, n) {
      let self = this;
      // self.showPop = true;
      self.page = e;
      // self.showPop = false;
      // self.gotoPage(self.page);
      self.authData(n);
    },
    getInfo() {
      let self = this;
      self._get("member/api/member/get-info", {}, (res) => {
        self.userinfo = res.data;
      });
    },
    isWithdraw() {
      let self = this;
      self._get("member/api/withdraw/is-withdraw", {}, (res) => {
        if (res.code == 1) {
          uni.showModal({
            title: self.$t("w_0034"),
            content: res.msg,
          });
        } else {
          self.gotoPage(self.page);
        }
      });
    },
    /* 营业执照 */
    authData2(n) {
      let self = this;
      self._get(
        "member/api/business/license/is-exist",
        {
          businessModule: n,
        },
        function (res) {
          if (res.code == 200) {
            console.log(res);
            if (res.flag == "Y") {
              if (n == 1) {
                self.isWithdraw();
              } else {
                self.gotoPage(self.page);
              }
            } else {
              uni.showModal({
                title: self.$t("w_0034"),
                content: self.$t("CK_KS_79"),
                success(e) {
                  if (e.confirm) {
                    self.gotoPage("/pages/user/set/bind/businessLicense");
                  }
                },
              });
            }
          } else {
            uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: "none",
            });
          }
        }
      );
    },
    /* 实名认证 */
    authData(n) {
      let self = this;
      if (n == 1) {
        self.isWithdraw();
      } else {
        self.gotoPage(self.page);
      }
      return;
      if (!self.userinfo.pkSettleCountry) {
        return;
      }
      if (self.userinfo.pkSettleCountry != 1) {
        self.gotoPage(self.page);
        return;
      }
      self._get(
        "member/api/authentication/is-auth",
        {
          businessModule: n,
        },
        function (res) {
          if (res.code == 200) {
            console.log(res);
            if (res.flag == "Y") {
              self.authData2(n);
            } else {
              uni.showModal({
                title: self.$t("w_0034"),
                content: self.$t("MY_WAL_50"),
                success(e) {
                  if (e.confirm) {
                    self.gotoPage("/pages/user/set/bind/real-name");
                  }
                },
              });
            }
          } else {
            uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: "none",
            });
          }
        }
      );
    },
    closeFunc(e) {
      let self = this;
      // console.log(e);
      if (e) {
        self.passwordSubmit(e);
      } else if (e != null) {
        uni.showToast({
          title: self.$t("PER_DA_50"),
          duration: 1000,
          icon: "none",
        });
      } else {
        self.showPop = false;
      }
    },
    passwordSubmit(e) {
      let self = this;
      self._post(
        "userCheck/checkPwd",
        {
          pwd2: e,
        },
        function (res) {
          if (res.code == 200) {
            self.showPop = false;
            self.gotoPage(self.page);
          } else {
            uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: "none",
            });
          }
        }
      );
    },
    showTips(e) {
      uni.showToast({
        title: `${this.$t("MY_WAL_10")}:${e.lockAccount} ${this.$t(
          "MY_WAL_11"
        )}:${e.transferAccount} ${this.$t("MY_WAL_12")}:${e.withdrawAccount}`,
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss">
.top-nav {
  height: 116rpx;
  background-color: #fff;
  padding: 0 22rpx;
  position: sticky;
  /* #ifndef H5 */
  top: 0;
  /* #endif */
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  left: 0;
  z-index: 20;
  overflow-x: auto;

  .top-item {
    min-width: 204rpx;
    white-space: nowrap;
    padding: 0 40rpx;
    height: 60rpx;
    background: #fff;
    border: 1rpx solid #999;
    border-radius: 30rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    text-align: center;
    line-height: 60rpx;
    color: #999999;
    flex-shrink: 0;
    margin-right: 20rpx;
  }

  .top-item.active {
    background: #fb3024;
    border: 1rpx solid #fb3024;
    color: #fff;
  }
}

.wallet-list {
  padding: 32rpx 0;
}

.wallet-item {
  width: 704rpx;
  min-height: 346rpx;
  border-radius: 25rpx;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 30rpx;

  .wallet-item-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 704rpx;
    height: 380rpx;
  }

  .wallet-item-box {
    position: relative;
    z-index: 1;
    padding: 0 19rpx 0 20rpx;

    .eyes-icon {
      display: block;
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
    }

    .wallet-item-top {
      height: 208rpx;
      padding-top: 36rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #fff;
      border-color: rgba(255, 255, 255, 0.45);
    }

    .wallet-item-bottom {
      color: #333;
      padding: 30rpx 0;
    }
  }
}

.flex-label {
  width: 200rpx;
  word-break: break-all;
  margin-right: 30rpx;
}

.u-number-box {
  width: 100%;
  justify-content: space-between;
}

.goodsDiag {
  margin-bottom: 50rpx;
}

.goodsDiag-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 60rpx;
}

.u-number-box::v-deep .u-number-box__input {
  flex: 1;
}

.s-pop-btn {
  width: 264rpx;
  height: 76rpx;
  background: #fb3024;
  border-radius: 38rpx;
  color: #fff;
  margin: 0 auto;
}
</style>
