<template>
  <cr-popup
    v-model="showAuth"
    get-container="body"
    position="bottom"
    class="auth-popup"
    :close-on-click-overlay="false"
  >
    <div class="auth">
      <div class="auth-title">
        <svg-icon icon-class="mongo" />
        <strong>芒果保险</strong>申请获取
      </div>
      <div class="auth-list">
        <div class="auth-item" v-for="(item, index) in userInfo" :key="index">
          <div class="auth-item-title">你的{{ item.label }}</div>
          <div class="auth-item-info">
            <strong>{{ item.value }}</strong>
            信用钱包绑定{{ item.label }}
          </div>
          <cr-divider />
        </div>
      </div>
      <div class="auth-protocol">
        允许即表示同意
        <a href="javascript:;" @click="showProtocol(0)">《用户协议》</a>
        <a href="javascript:;" @click="showProtocol(1)">《隐私政策》</a>
      </div>
      <div class="auth-foot">
        <cr-button class="wx-default" @click="setAuthXyqb(3)">拒绝</cr-button>
        <cr-button class="wx-primary" @click="confirm">允许</cr-button>
      </div>
    </div>
  </cr-popup>
</template>

<script>
import { mapState, mapActions } from "vuex";
import protocol from "@/api/protocol";
import localStorage from "@/service/localStorage";

export default {
  name: "AuthFromXyqb",
  data() {
    return {
      showAuth: true,
      protocol: [
        {
          title: "用户协议",
          url: protocol.userAgreement
        },
        {
          title: "隐私政策",
          url: protocol.privacyPolicy
        }
      ],
      userInfo: []
    };
  },
  watch: {
    showAuthXyqb: {
      immediate: true,
      handler(val) {
        this.setUserInfo();
        this.showAuth = !!this.userInfo.length && val === 2 && !localStorage.get("mongoToken");
        if (this.showAuth) {
          this.$nextTick(() => {
            const activeElement = document.activeElement;
            if (
              activeElement &&
              (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")
            ) {
              setTimeout(() => {
                activeElement.blur();
              }, 0);
            }
          });
        }
      }
    }
  },
  computed: {
    ...mapState(["showAuthXyqb"])
  },
  methods: {
    ...mapActions(["setAuthXyqb", "setPublicPopup"]),
    confirm() {
      localStorage.set("mongoToken", localStorage.get("mongoTokenFromxyqb"));
      this.setAuthXyqb(4);
    },
    showProtocol(idx) {
      this.setPublicPopup(this.protocol[idx]);
    },
    setUserInfo() {
      const xyqbUserInfo = localStorage.get("xyqbUserInfo") || {};
      Object.keys(xyqbUserInfo).forEach(key => {
        if (key === "phoneNoMask") {
          this.userInfo[0] = {
            label: "手机号码",
            value: xyqbUserInfo[key]
          };
        }
        if (key === "nameMask") {
          this.userInfo[1] = {
            label: "姓名",
            value: xyqbUserInfo[key]
          };
        }
        if (key === "idNoMask") {
          this.userInfo[2] = {
            label: "身份证号码",
            value: xyqbUserInfo[key]
          };
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
@import "../style/mixins.less";
.auth {
  padding: 30px 20px;
  &-popup {
    border-top-left-radius: @border-radius-sm;
    border-top-right-radius: @border-radius-sm;
  }
  &-title {
    color: @black;
    font-size: @font-size-16;
    padding: 2px 0 26px;
    .svg-icon {
      width: 18px;
      height: 18px;
    }
    strong {
      font-weight: @font-weight-bold;
      margin: 0 10px 0 12px;
    }
  }
  &-list {
    margin-bottom: -8px;
  }
  &-item {
    &-title {
      font-size: 24px;
      font-weight: @font-weight-bold;
      color: @black;
      line-height: @line-height-lg;
      margin: 20px 0;
    }
    &-info {
      .sub-text-mixins();
      font-size: 14px;
      strong {
        font-size: 16px;
        font-weight: @font-weight-bold;
        color: @black;
      }
    }
  }
  &-protocol {
    .sub-text-mixins();
    margin: 20px 0;
  }
  &-foot {
    display: flex;
    justify-content: space-between;
    .cr-button {
      width: 160px;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      border-radius: 4px !important;
    }
    .wx-default {
      color: #00be57 !important;
    }
    .wx-primary {
      background-color: #09c060 !important;
      color: #fff !important;
    }
  }
}
</style>
