<template>
  <view>
    <view :class="{ mask: open }" @touchmove.prevent @click="$emit('update:open', false)"></view>
    <view :class="{ show: open }" class="pay-dialog fixed">
      <view class="dialog-hd pos">
        支付方式
        <view class="abs" @click="$emit('update:open', false)">
          <i class="iconfont iconguanbi"></i>
        </view>
      </view>
      <view class="dialog-bd" @click="handleChangePayType">
        <template v-for="item in payOptions">
          <view class="pay-item pos flex flex-center-x" :class="item.value" v-if="item.canuse" :key="item.id">
            <view class="name">
              {{ item.name }}
              <view v-if="item.value === 'yue'" class="info">
                可用余额：￥{{ now_money }}
              </view>
            </view>
            <i class="iconfont icongouxuan" v-if="payChecked === item.value"></i>
            <view class="abs full" :data-type="item.value"></view>
          </view>
        </template>
      </view>
      <view class="dialog-ft">
        <view  v-if="!isMember && isMembership" class="member" @click="getUrl">
          <div class="news">开通会员，本单可减<span class="money">{{this.$operation.minus(money,memberMoney)}} 元</span></div>
          <i class="iconfont iconxiangyou"></i>
        </view>
        <view class="total">
          支付：<text>￥{{ money }}</text>
        </view>
        <button :disabled="!payChecked" class="flex flex-center" @click="onPay">
          立即支付
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { createOrder } from "@/api/special";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    money: {
      type: Number,
      default: 0,
    },
    now_money: {
      type: Number,
      default: 0,
    },
    special_id: {
      type: Number,
      default: 0,
    },
    pay_type_num: {
      type: Number,
      default: -1,
    },
    pinkId: {
      type: Number,
      default: 0,
    },
    link_pay_uid: {
      type: Number,
      default: 0,
    },
    isWechat: {
      type: Boolean,
      default: false,
    },
    isMember:{
      type:Boolean,
      default:false
    },
    memberMoney:{
      type: Number,
      default: 0,
    },
    isAlipay: {
      type: Boolean,
      default: true,
    },
    isBalance: {
      type: Boolean,
      default: true,
    },
    signs: {
      type: Object,
      default: function () {
        return {};
      },
    },
    templateId: {
      type: String,
      default: "",
    },
    memberLink: {
      type: String,
      default: "",
    },
    wxpayH5: {
      type: Boolean,
      default: true,
    },
    priceId: {
      type: Number,
      default: 0,
    },
    useGold: {
      type: Boolean,
      default: false,
    },
    isMembership: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      payOptions: [
        {
          id: 1,
          name: "微信支付",
          icon: "/static/svg/wxpay.png",
          value: "weixin",
          canuse: true,
        },
        {
          id: 2,
          name: "支付宝支付",
          icon: "/static/svg/alipay.png",
          value: "zhifubao",
          canuse: this.isAlipay,
        },
        {
           id: 3,
           name: "余额支付",
           icon: "/static/svg/yue.png",
           value: "yue",
           canuse: this.isBalance
        },
        {
           id: 4,
           name: "抖音支付",
           icon: "/static/svg/duoyin.png",
           value: "toutiao",
           canuse: false
        },
        {
           id: 5,
           name: "快手支付",
           icon: "/static/svg/kuaishou.png",
           value: "kuaishou",
           canuse: false
        }
        ],
      payChecked: "",
      WeixinOpenTagsError: false, // 无法使用微信开放标签
    };
  },
  watch: {
    isBalance() {
      this.payOptions[2].canuse = this.isBalance;
    },
  },
  created() {
    var find = this.payOptions.find((option) => option.canuse);
    if (find) {
      this.payChecked = find.value;
    }
    //#ifdef H5
    if (this.$util.isWeixin()) {
      this.payOptions[1].canuse = false;
    }
    // #endif
    // #ifdef MP-WEIXIN
    this.payOptions[1].canuse = false
    //#endif
    // #ifdef MP-TOUTIAO
    this.payOptions[0].canuse = false
    this.payOptions[1].canuse = false
    this.payOptions[3].canuse = true
    this.payChecked="toutiao"
    //#endif
    // #ifdef MP-KUAISHOU
    this.payOptions[0].canuse = false
    this.payOptions[1].canuse = false
    this.payOptions[3].canuse = false
    this.payOptions[4].canuse = true
    this.payChecked="kuaishou"
    //#endif
  },
  methods: {
    getUserInfo(){
      app.baseGet($h.U({ c: "special", a: "isMember" }), function (res) {
        let isMember = res.data.data.is_member;
       
      });
    },
    getUrl() {
      this.$emit("fatherMethod");
      uni.navigateTo({
        url: '/pages/special/member_recharge'
      });
    },
    handleChangePayType(e) {
      const { type } = e.target.dataset;
      if (type === undefined) return;
      this.payChecked = type;
    },
    // 支付
    async onPay() {
      uni.showLoading({ mask: true });

      const backUrlCRshlcICwGdGY = {
        special_id: this.special_id,
        pay_type_num: this.pay_type_num,
        pinkId: this.pinkId,
        link_pay_uid: this.link_pay_uid,
        payType: this.payChecked,
        from: "weixinh5",
        // #ifdef H5
        returnUrl: window.location.href,
        //#endif
      };
      // #ifdef MP-WEIXIN
      backUrlCRshlcICwGdGY.from = 'mpweixing'
      //#endif
       // #ifdef MP-KUAISHOU
       backUrlCRshlcICwGdGY.from = 'mpkuaishou'
      //#endif
       // #ifdef MP-TOUTIAO
       backUrlCRshlcICwGdGY.from = 'mpdouyin'
      //#endif
      // #ifdef H5
      if (this.$util.isWeixin()) backUrlCRshlcICwGdGY.from = 'weixin';
      //#endif
      Object.assign(backUrlCRshlcICwGdGY, this.signs);
      // 报名信息转JSON字符串
      if (this.pay_type_num === 20) {
        backUrlCRshlcICwGdGY.price_id = this.priceId;
        backUrlCRshlcICwGdGY.event.forEach((item) => {
          if (item.event_type === 3 && typeof item.event_value != "string") {
            item.event_value = item.event_value.join();
          }
        });
      }

      if (this.pay_type_num === 40) {
        backUrlCRshlcICwGdGY.useGold = this.useGold;
      }

      try {
        const data = await createOrder(backUrlCRshlcICwGdGY);
        uni.hideLoading();
        if (data.code === 200) {
          this.$emit("change", {
            action: "pay_order",
            value: data,
          });
        } else {
          this.$util.showMsg(data.msg);
          this.$emit("update:open", false);
        }
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pay-dialog {
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: var(--safe-bottom);
  border-radius: 30rpx 30rpx 0 0;
  background-color: #ffffff;
  transform: translateY(100%);
  transition: 0.3s;
  z-index: 999;
}
.mask{
  z-index: 111;
}

.pay-dialog .member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 12rpx;
  padding: 15rpx 15rpx 40rpx;
  border-radius: 4rpx;
  background: #FFF0E5 url("../../static/images/user_member2.png") 20rpx center/37rpx 41rpx no-repeat;
  font-size: 26rpx;
  line-height: 1;
  color: #333333;
  margin-top: 20rpx;
  .news {
    padding: 30rpx 0 0 60rpx;
  }

}

.pay-dialog .member .iconfont {
  font-size: 24rpx;
    color: #FF6B00;
    padding-top: 24rpx;
}

.pay-dialog .member .money {
  color: #FF6B00;
}

.pay-dialog.show {
  transform: translateY(0);
}

.pay-dialog .dialog-hd {
  height: 100rpx;
  padding: 0 100rpx;
  text-align: center;
  font-size: 32rpx;
  line-height: 100rpx;
  color: #333333;
}

.pay-dialog .dialog-hd>view {
  top: 50%;
  right: 30rpx;
  transform: translateY(-50%);
}

.pay-dialog .dialog-hd .iconfont {
  font-size: 32rpx;
}

.pay-item {
  min-height: 120rpx;
  padding: 0 30rpx 0 108rpx;
  background: 30rpx center/50rpx 50rpx no-repeat;

  &.weixin {
    background-image: url(@/static/svg/wxpay.png);
  }

  &.zhifubao {
    background-image: url(@/static/svg/alipay.png);
  }

  &.yue {
    background-image: url(@/static/svg/yue.png);
  }
  &.toutiao {
    background-image: url(@/static/svg/douyin.png);
  }
  &.kuaishou {
    background-image: url(@/static/svg/kuaishou.png);
  }
}

.pay-dialog .dialog-bd .pay-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 30rpx;
  border-bottom: 1px solid #eeeeee;
}

.pay-dialog .dialog-bd .name {
  flex: 1;
}

.pay-dialog .dialog-bd .info {
  font-size: 24rpx;
  color: #999999;
}

.pay-dialog .dialog-bd .iconfont {
  font-size: 30rpx;
  color: #2c8eff;
}

.pay-dialog .dialog-ft {
  padding: 0 30rpx 30rpx;
}

.pay-dialog .dialog-ft button {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #2c8eff;
  color: #ffffff;
}

.pay-dialog .dialog-ft .total {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.pay-dialog .dialog-ft .total text {
  color: #ff6b00;
}

</style>