<template>
  <div class="app-content pay-wrap">
    <div class="delivery-wrap">
      <div class="shop-logo-wrap">
        <div class="logo-img">
          <img :src="'' | default_img" alt mode="widthFix" />
        </div>
      </div>
      <div class="module-com pay-input-wrap">
        <pay-input-module
          :focus="inpFocus"
          :num="amount"
          @focusFn="focusFn"
          @blurFn="blurFn"
          @clickKey="clickKeyFn"
        />
        <div
          v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'"
          class="balance"
        >
          <span>账户余额 ¥</span>
          <span class="app-size-30">{{ shopUser.userAsset.balance || 0 }}</span>
        </div>
      </div>
      <div class="tit-bg_box">
        以下选填
      </div>
      <app-delivery-module ref="appDelivery" :anonymity="0" />
      <div class="btn-wrap">
        <button
          class="button-com red"
          @click="balancePayFn"
        >余额支付</button>
        <button class="button-com green" @click="wexinPayFn">微信支付</button>
      </div>
    </div>
    <!-- 支付密码弹窗 -->
    <modal-module
      :show="passwordModal"
      @cancel="modalCancel"
      @click="passwordModalClick"
      :maskClosable="false"
      title="支付密码"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <div class="line-input">
              <input
                type="password"
                v-model="modalForm.payPassword"
                :adjust-position="false"
                class="inp-input"
              />
            </div>
          </div>
        </div>
      </template>
    </modal-module>
    <alert-module
      :show="setPassModal"
      btnText="去设置"
      btnColor="#FF2842"
      padding="66rpx 24rpx 66rpx 24rpx"
      @click="hideAlert"
    >
      <div class="go-login-module">
        <div>请先设置支付密码！</div>
      </div>
    </alert-module>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppTabs from "@/components/plugin/tabs";
import PayInputModule from "./components/pay-input";
import AppDeliveryModule from "@/components/app-delivery";
import wexinPay from "@/utils/pay/wxPay";
import ModalModule from "@/components/plugin/modal";
import AppCouponSel from "@/components/app-coupon-sel";
import AlertModule from "@/components/plugin/alert";
import AppShareMask from "@/components/module/app-share-mask";
import { isLogin } from "@/utils/util";
import { isWxBrowser, isWxMiniapp } from "@/utils/common";
import { share } from "@/mixins";
import { fastPay } from "@/api/pay";
import { recharge } from "@/api/member";
import { getShopUser } from "@/utils/auth";
import { getOrderShop } from "@/utils/config";
export default {
  name: "pay",
  components: {
    AppTabs,
    PayInputModule,
    AppDeliveryModule,
    ModalModule,
    AppCouponSel,
    AlertModule,
    AppShareMask
  },
  mixins: [share],
  data() {
    return {
      constant: this.$constant,
      inpFocus: false,
      // tab
      tabIndex: 0,
      tabs: [
        {
          name: "直接付款"
        },
        {
          name: "我要配送"
        }
      ],
      // 初始form
      amount: "",
      form: {
        payWay: 0 // 0微信 1支付宝 2余额
      },
      // 支付相关 ============
      // aliPayHtml: "",
      passwordModal: false,
      modalForm: {
        payPassword: ""
      },
      appendFrm: {
        sendDistance: "", // 配送距离，根据腾讯js进行计算
        receiveLat: "", // 收花人纬度
        receiveLong: "" // 收花人经度
      },
      payCallData: null,
      // 优惠折扣
      // discountArr: false,
      // 未设置密码
      setPassModal: false,
      showShare:false
    };
  },
  computed: {
    ...mapGetters({ orderShop: "getOrderShop" }),
    ...mapGetters({ shopUser: "getShopUser" })
  },
  onLoad(option) {
    this.specialInit();
  },
  mounted() {},
  methods: {
    isWxBrowser: isWxBrowser,
    isWxMiniapp: isWxMiniapp,
    specialInit() {
      // // #ifdef H5
      // // 微信二次分享
      // let href = window.location.href;
      // if (href.indexOf("from=singlemessage") > 0) {
      //   location.href = `${
      //     this.$constant.formal
      //   }/#/pages/pay/index${this.$util.parse(this.option)}`;
      //   return false;
      // }
      // // #endif
      if (this.option.pageType) {
        this.tabIndex = parseInt(this.option.pageType);
      }
      
      getOrderShop().then(res => {
      //   this.inpFocus = true;
        uni.setNavigationBarTitle({
          title: `您正在向【${res.shop.name}】付款`
        });
        //没有登陆不取优惠
        // if (isLogin()) {
        //   this.$refs.couponSel._getUserDiscount().then(discountData => {
        //     this.discountArr = discountData;
        //   });
        // }
      // });
      // if (isLogin()) {
      //   getShopUser(true).then(res => {
      //     // 设置分享
      //     let shareParams = {
      //       // #ifdef H5
      //       title: "点我付款",
      //       desc: "享随机优惠，最高20元",
      //       imgUrl: `${this.$constant.imgUrl}/retail/pay/wxSharePay.jpg`,
      //       pagePath: `${this.$constant.formal}/#/pages/pay/index?account=${res.sjId}&store=0&sourceType=3&fromType=2`,
      //       // #endif
      //       // #ifndef H5
      //       title: "",
      //       desc: "享随机优惠，最高20元",
      //       imgUrl: `${this.$constant.imgUrl}/retail/pay/wxPay.png`,
      //       pagePath: `/pages/pay/index?account=${res.sjId}&store=0&sourceType=3&fromType=2`
      //       // #endif
      //     };
      //     this.jweixinFn(shareParams);
      //   });
      })
    },
    _pay() {
      if (!this.amount) {
        this.$msg("请先输入金额！");
        return false;
      }
      let params = {};
      let host = null;
      if (this.option.pageStatus == "recharge") {
        params = {
          amount: this.amount
        };
        host = recharge;
      } else {
        params = {
          // needSend: this.tabIndex == 0 ? "0" : "1",
          prePrice: this.amount,
          payWay: this.form.payWay,
          // payPassword: this.modalForm.payPassword
        };
        if (this.tabIndex == 1) {
          let deliveryForm = this.$refs.appDelivery.form
            ? this.$refs.appDelivery.form
            : {};
          let deliveryRegion = this.$refs.appDelivery.region
            ? this.$refs.appDelivery.region
            : {};
          params = {
            ...params,
            ...deliveryForm,
            ...deliveryRegion
          };
        }
        if (this.option.store) {
          params.store = this.option.store;
        }
        if (this.option.sourceType) {
          params.sourceType = this.option.sourceType;
        }
        host = fastPay;
      }
      host(params).then(res => {
        this.payCallData = res.data;
        //错误返回判断
        if (res.code == 0) {
          this.$msg(res.msg);
          return false;
        }

        if (this.form.payWay == 0) {
          wexinPay(res.data, this.paySuccess, this.payFail);
        } else if (this.form.payWay == 1) {
          // this.aliPayHtml = res;
          // this.$nextTick(() => {
          //   this.$refs.alipayWap.children[0].submit();
          // });
        } else {
          this.paySuccess();
        }
      });
    },
    // tab切换
    tabChange(e) {
      this.tabIndex = e.index;
      this.inpFocus = true;
    },
    // 点击输入框
    focusFn() {
      this.inpFocus = true;
    },
    // 失焦
    blurFn() {
      this.inpFocus = false;
    },
    // 点击键盘
    clickKeyFn(val) {
      this.amount = val;
    },
    // 支付宝支付
    aliPayFn() {
      this.form.payWay = 1;
      this._pay();
    },
    // 微信支付
    wexinPayFn() {
      this.form.payWay = 0;
      this._pay();
    },
    // 暂未设置密码
    hideAlert() {
      this.$util.pageTo("/pages/user/password");
    },
    // 余额支付
    balancePayFn() {
      if (!this.$util.isEmpty(this.shopUser) && this.shopUser.hasPayPwd == 0) {
        this.setPassModal = true;
      } else {
        this.form.payWay = 2;
        this.passwordModal = true;
      }
    },
    passwordModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this._pay();
      }
    },
    modalCancel() {
      this.passwordModal = false;
      this.modalForm.payPassword = "";
    },
    // 支付成功
    paySuccess() {
    },
    payFail() {

    },
  }
};
</script>

<style lang="scss">
.app-content {
  min-height: calc(100vh - 20px);
  padding-top: 20px;
}
.tabs-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #fff;
  font-size: 30px;
  box-shadow: 4px 4px 10px #eee;
}

.pay-wrap {
  .logo-wrap {
    padding-top: 70px;
    padding-bottom: 60px;
    text-align: center;
    .logo-img {
      width: 120px;
      margin: 0 auto 20px;
      border-radius: 50%;
      img {
        border-radius: 50%;
      }
    }
  }
  .pay-input-wrap {
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 50px 80px 28px;
    margin-bottom: 0 !important;
    .balance {
      margin-top: 30px;
      color: $fontColor2;
    }
    .btn-wrap {
      width: 100%;
      margin-top: 64px;
      .button-com {
        display: block;
        margin-bottom: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
  }
}
.tit-bg_box {
  color: #999999;
  font-size: 24px;
  font-weight: 400;
  padding: 30px;
  background-color: #F0F2F6;
}
// 我要配送
.delivery-wrap {
  .module-com {
    margin-bottom: 20px;
    background-color: #fff;
    .module-tit {
      padding: 20px 18px;
      font-size: 28px;
      font-weight: 600;
      border-bottom: 1px solid $borderColor;
    }
    .module-det {
      padding: 0 30px;
    }
  }
  // 金额
  .pay-input-wrap {
    padding: 50px 36px 38px;
    .balance {
      margin-top: 30px;
      color: $fontColor2;
    }
  }
  .shop-logo-wrap {
    padding-bottom: 20px;
    @include disFlex(center, center);
    .logo-img {
      width: 120px;
      border-radius: 50%;
      margin: 10px auto;
      // margin-right: 20px;
      img {
        border-radius: 50%;
      }
    }
  }
  // 可选优惠
  .discount-wrap {
    .module-det {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
  // 匿名派送
  .none-name-delivery {
    // padding-left: 30px;
    padding: 26px 30px;
    // margin-top: 40px;
    margin-bottom: 20px;
    background-color: #fff;
    .none-name-text {
      margin-left: 14px;
      color: $fontColor2;
    }
  }
  // 按钮
  .btn-wrap {
    width: calc(100% - 60px);
    margin: 64px auto 0;
    padding-bottom: 20px;
    .button-com {
      display: block;
      margin-bottom: 20px;
      padding-top: 30px;
      padding-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  // 查看更多
  .view-more {
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 28px;
    @include disFlex(center, center);
    background-color: #fff;
    color: #3385ff;
    .view-more-text {
      z-index: 200;
      margin-right: 14px;
    }
    i {
      font-size: 30px;
      font-weight: 600;
    }
    &.open {
      i {
        transform: rotate(180deg);
      }
    }
  }
}
</style>