<template>
  <cr-popup v-model="showAuth" get-container="body" position="bottom" class="auth-popup">
    <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>《用户协议》</a>
        <a href>《隐私政策》</a>
      </div>
      <div class="auth-foot">
        <cr-button class="wx-default" @click="setAuthXyqb(3)">拒绝</cr-button>
        <cr-button class="wx-primary" @click="setAuthXyqb(4)">允许</cr-button>
      </div>
    </div>
  </cr-popup>
</template>

<script>
import { mapState, mapActions } from "vuex";
import localStorage from "@/service/localStorage";
const xyqbUserInfo = localStorage.get("xyqbUserInfo") || {};

export default {
  name: "AuthFromXyqb",
  data() {
    return {
      showAuth: true,
      userInfo: []
    };
  },
  watch: {
    showAuthXyqb: {
      immediate: true,
      handler(val) {
        this.showAuth = !!this.userInfo.length && val === 2;
      }
    }
  },
  created() {
    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]
        };
      }
    });
  },
  computed: {
    ...mapState(["showAuthXyqb"])
  },
  methods: {
    ...mapActions(["setAuthXyqb"])
  }
};
</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>
