<template>
  <div class="cashier-wrap">
    <nav-bar title="收银台"/>
    <div class="wrap">
      <div class="info">
        <span>{{payData.moneySymbol}}</span>
        <p>{{payAmount}}</p>
      </div>
      <div class="m-b-10 online">
        <template v-for="(item, index) in data.online">
          <div
            v-if="(item.payType != 4 && item.payType != 3) || (item.payType == 4 && isTencentClent) || (item.payType == 3 && !isTencentClent)"
            @click="selected(item)"
            :key="index">
            <div class="flex">
              <img :src="item.payIcon" alt="" v-if="item.payIcon">
              <img src="../assets/imgs/payment@2x.png" alt="" v-else>
              <div>
                <p>{{item.payText}}</p>
                <span v-show="item.tips">{{item.tips}}</span>
              </div>
            </div>
            <div class="none" v-if="item.disabledTips != ''">
              <p>{{item.disabledTips}}</p>
            </div>
            <div class="radio" v-else :class="{active: item.selected}">
              <p>
                <i class="icon icon-duigou"></i>
              </p>
            </div>
          </div>
        </template>
      </div>
      <div class="pay">
        <div class="online">
          <div
            v-for="(item, index) in data.offline"
            @click="upload"
            :key="index">
            <div class="flex align-c">
              <img :src="item.payIcon" alt="" v-if="item.payIcon">
              <img src="../assets/imgs/payment@2x.png" alt="" v-else>
              <div>
                <p>{{item.payText}}</p>
              </div>
            </div>
            <div class="upload">上传支付凭证<i class="icon icon-jiantou-you"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="protocol flex">
        <van-checkbox v-model="checked">
          我已经阅读并同意
        </van-checkbox>
        <p @click="goAgreement">《Hooli用户支付协议》</p>
      </div>
      <div class="btn">
        <van-button type="default" :class="{disabled: !checked || disabled}" @click="goPay">确认支付</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Oashier",
  components: {
    NavBar
  },
  data() {
    return {
      data: [],
      payData: {
        moneySymbol: ""
      },
      radio: null,
      disabled: true,
      payAmount: null,
      checked: false,
      isTencentClent: null
    };
  },
  created() {
    this.isTencentClent = this.$util.checkIsQQ() || this.$util.checkIsWeixin();
    let lang = this.$store.state.langStr;
    if (!this.$util.getLoginUserInfo()) {
      let fullPath = `/${lang}/user/orders`;
      window.location.replace(
        `/${lang}/login?next=${encodeURIComponent(fullPath)}`
      );
    } else {
      let data = this.$util.sessionStorage.fetch("orderInfo");
      let payAmount = this.$util.sessionStorage.fetch("payAmount");
      if (data && payAmount) {
        this.payAmount = decodeURIComponent(payAmount);
        this.payData = JSON.parse(decodeURIComponent(data));
        this.getUpay();
      } else {
        this.$Toast("订单获取失败，请在订单中心继续支付。");
        this.$router.push({
          path: `/${lang}/user/orders`
        });
      }
    }
  },
  watch: {
    checked(val) {
      if (val && this.radio) {
        this.disabled = false;
      }
    },
    radio(val) {
      if (this.checked && val) {
        this.disabled = false;
      }
    }
  },
  methods: {
    // 获取支付方式
    getUpay() {
      let params = {};
      params.url = this.$apis.api_hpay_list;
      params.data = {
        payAmount: this.payAmount,
        id: this.payData.id
      };
      this.$net.req(params, this).then(
        res => {
          let data = res.data;
          data.online.forEach(element => {
            element.selected = false;
            if (element.id == res.data.defalutId) element.selected = true;
          });
          this.data = data;
          this.radio = res.data.defalutId;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 上传支付凭证
    upload() {
      if (this.checked) {
        let lang = this.$store.state.langStr;
        this.$router.push({
          path: `/${lang}/validatePay`
        });
      } else {
        this.$toast("请先阅读并同意Hooli用户支付协议");
      }
    },
    //选择支付方式
    selected(item) {
      if (item.disabled != 1) {
        let data = this.$util.deepClone(this.data);
        data.online.forEach(element => {
          element.selected = false;
          if (element.id == item.id) element.selected = true;
        });
        this.radio = item.id;
        this.data = data;
      }
    },
    // 去支付
    goPay() {
      if (this.disabled === true) {
        return;
      }
      this.disabled = true;
      let couponsId = this.payData.couponsId;
      let params = {};
      switch (Number(this.radio)) {
        case 2:
          params.url = this.$apis.api_hpay_yibao;
          break;
        case 4:
          params.url = this.$apis.api_hpay_aliPay;
          break;
        case 5:
          params.url = this.$apis.api_hpay_get_wechat_url;
          break;
        case 6:
          // params.url = this.$apis.api_hpay_offline;
          break;
        default:
          break;
      }
      params.data = {
        payOrderId: this.payData.id,
        price: this.payAmount,
        couponsId: couponsId
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) == 0) {
            if (Number(this.radio) == 5 && res.data) {
              let { url, payOrderId, currency, merchantNo } = res.data;
              let paramsObj = {
                ...params.data,
                ...this.$net.commonParams()
              };
              paramsObj.signToken = this.$net.paramsSign(paramsObj, "");
              paramsObj = this.$net.Encrypt(JSON.stringify(paramsObj));
              let query = {
                merchant_no: merchantNo,
                currency: currency,
                moneySymbol: this.payData.moneySymbol,
                payOrderId: payOrderId,
                price: this.payAmount,
                originHost:
                  window.location.protocol + "//" + window.location.host,
                paramsObj
              };
              if (couponsId) {
                query.couponsId = couponsId;
              }
              let arr = [];
              for (let key in query) {
                arr.push(`${key}=${query[key]}`);
              }
              window.location.href = `${url}?${arr.join("&")}`;
            } else {
              window.location.href = res.data.payData;
            }
            // this.$util.sessionStorage.remove("orderInfo");
            // this.$util.sessionStorage.remove("payAmount");
          } else {
            this.$Toast(res.msg);
            setTimeout(() => {
              this.disabled = false;
            }, 1000);
          }
        },
        e => {
          setTimeout(() => {
            this.disabled = false;
          }, 1000);
          this.$Toast(e.msg);
        }
      );
    },
    // 跳转协议
    goAgreement() {
      this.$router.push({
        path: "/common/payment-agreement"
      });
    }
  }
};
</script>

<style scoped lang='less'>
.cashier-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .wrap {
    .info {
      height: 100px;
      background: #fff;
      margin-bottom: 10px;
      display: flex;
      align-items: baseline;
      padding: 30px 0 0;
      justify-content: center;
      span {
        font-size: 18px;
        color: #222;
      }
      p {
        font-size: 40px;
        line-height: 45px;
        color: #222;
      }
    }
    .btn {
      padding: 10px 20px;
      background: #fff;
      position: fixed;
      bottom: 0;
      width: 100%;
      button {
        width: 100%;
        height: 45px;
        font-size: 18px;
        background: #ff523d;
        border-radius: 25px;
        color: #fff;
        font-weight: 500;
        border: 0;
      }
      .disabled {
        background: #ffbfab;
      }
    }
    .online {
      background: #fff;
      > div {
        height: 65px;
        padding: 10px 20px 0;
        position: relative;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 14px;
          color: #ccc;
        }
        p {
          font-size: 14px;
          color: #333;
          margin-bottom: 5px;
        }
        i {
          font-size: 22px;
        }
        img {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin: 0 10px 0 0;
        }
        .radio {
          p {
            border: 1px solid #ccc;
            width: 18px;
            background: #fff;
            height: 18px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
              font-size: 8px;
              color: transparent;
            }
          }
        }
        .radio.active {
          p {
            border-color: #ff523d;
            background: #ff523d;
            i {
              color: #fff;
            }
          }
        }
        .none {
          p {
            color: #bbb;
          }
        }
      }
      > div:after {
        content: "";
        bottom: 0;
        position: absolute;
        height: 1px;
        background: #ddd;
        left: 20px;
        right: 20px;
      }
      > div:last-child:after {
        height: 0;
      }
    }
    .pay {
      margin: 0 0 15px;
      .online {
        > div {
          height: 45px;
          padding: 0 20px;
          align-items: center;
          p {
            margin: 0;
          }
          .none {
            color: #bbb;
          }
          .upload {
            color: #bbb;
            font-size: 14px;
            i {
              margin-left: 10px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
