<template>
  <div class="container">
    <cr-button block type="danger" @click="login">登录</cr-button>
    <cr-divider />
    <cr-button block>生成订单（微信JSAPI支付）</cr-button>
    <cr-button block>生成订单（微信H5支付）</cr-button>
    <cr-button block>生成订单（第三方收银台支付）</cr-button>
    <cr-divider />
    <cr-button type="warning" block>调起支付</cr-button>
    <cr-divider />
    <div class="state">
      <h5>基本信息：</h5>
      <p>当前环境：{{ browerEnv }}</p>
      <p>登录状态：{{ !!mongoToken }}</p>
      <p v-if="browerEnv === 'weixin'">微信code获取状态：</p>
      <cr-divider />
      <h5>登录信息：</h5>
      <p v-for="(item, key) in loginInfo" :key="key">{{ key }}: {{ item }}</p>
      <cr-divider />
      <h5>支付信息：</h5>
      <p v-for="(item, key) in payInfo" :key="key">{{ key }}: {{ item }}</p>
      <cr-divider />
      <h5>订单信息：</h5>
      <p v-for="(item, key) in orderInfo" :key="key">{{ key }}: {{ item }}</p>
      <cr-divider />
      <h5>保险订单信息：</h5>
      <p
        v-for="(item, key) in insuredOrderInfo"
        :key="key"
        v-html="`${key}: ${brFilter(item)}`"
      ></p>
    </div>
  </div>
</template>

<script>
/**
 * @description: 支付测试页面
 * @param {type}
 * @return:
 */
import { loginByPhone, getwxOpenId } from "@/api/user";
import cfg from "@/config";
export default {
  name: "paytest",
  data() {
    return {
      browerEnv: "",
      xyqbToken: "",
      mongoToken: "",
      loginInfo: {
        phoneNo: "18611428880",
        verifyCode: "123456",
        loginChannel: "1"
      },
      insuredOrderInfo: {
        insuredUserInfo: {
          phoneNo: "13209654413",
          userInfoSecId: "commodo",
          userName: "罗刚",
          idNo: "566254180010306614",
          longTerm: false,
          validEnd: "1978-11-18",
          relation: "1",
          socialSecurity: false,
          email: "s.yfyviye@mxxv.ki",
          annualIncome: "17159",
          addressCode: "110100",
          addressDetail: "海外",
          occupation: "5",
          height: 169,
          weight: 58,
          bankCardCode: "ICBC",
          bankCardNo: "6220549771082240618"
        },
        productNo: "1",
        holderUserInfo: {
          phoneNo: "13499177270",
          userInfoSecId: "eu in",
          userName: "崔静",
          idNo: "16479119920330003X",
          longTerm: false,
          validEnd: "1985-09-23",
          socialSecurity: false,
          email: "n.ata@ueccvun.bz",
          annualIncome: "35555",
          addressCode: "110100",
          addressDetail: "白城市",
          occupation: "1",
          height: 186,
          weight: 54,
          bankCardCode: "ICBC",
          bankCardNo: "667782802278796"
        },
        insuredAmount: "57",
        policyPeriod: "26",
        paymentType: 4,
        paymentPeriod: "et in",
        effectiveDate: "2003-07-06 23:11:44",
        autoRenewPolicy: true
      },
      orderInfo: {},
      openId: localStorage.getItem("openId"),
      payInfo: {}
    };
  },
  mounted() {
    this.getCurrentBrowerEnv();
  },
  methods: {
    async login() {
      const res = await loginByPhone(this.loginInfo);
      if (res.code === 0) {
        this.mongoToken = res.data.token;
        localStorage.setItem("mongoToken", res.data.token);
      }
    },
    getCurrentBrowerEnv() {
      const ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.browerEnv = "weixin";
        this.getWxOpenId();
      } else if (ua.match(/xyqb/i) == "xyqb") {
        this.browerEnv = "xyqb";
      } else {
        this.browerEnv = "h5";
      }
    },
    async getWxOpenId() {
      if (this.openId) return;
      const code = this.$route.query.code;
      const res = await getwxOpenId({ code, appId: cfg.wxAppId });
      if (res.code === 0) {
        this.openId = res.data.openId;
        localStorage.setItem("openId", res.data.openId);
      }
    },
    getUserState() {
      this.mongoToken = localStorage.getItem("mongoToken");
    },
    brFilter(txt) {
      let val = JSON.stringify(txt);
      val = val.replace(/[{},]/g, "<br />").replace(/"/g, "");
      return val;
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  padding: 5px 15px;
  font-size: 14px;
  background-color: #fff;
}
.state {
  line-height: 24px;
  margin-bottom: 15px;
  height: 44vh;
  overflow: scroll;
  background-color: #fcfcfc;
  box-shadow: inset 0 0 9px 0px rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  border-radius: 8px;
  h5 {
    font-weight: bold;
    margin: 15px 0;
  }
}
.cr-button {
  margin-bottom: 15px;
}
</style>
