<template>
  <div class="card-wrap">
    <nav-bar title="证件"/>
    <div
      class="card flex_sb align-c"
      v-for="item in data"
      @click="verification(item)"
      :key="item.id">
      <div class="flex align-c">
        <img :src="item.cardIcon" alt="">
        <span>{{item.cardTypeName}}</span>
      </div>
      <p
        v-if="item.content"
        class="flex_c align-c"
        :class="[{active: item.status == '1' || item.status == '2'},{error: item.status == '3'}]"
      >{{item.content}}</p>
    </div>
  </div>
</template>

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

export default {
  name: "Card",
  components: {
    NavBar
  },
  data() {
    return {
      data: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_user_card_list;
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            this.data = res.data;
          } else {
            this.$Toast(res.meg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 去验证
    verification(item) {
      if (item.status != "2") {
        let lang = this.$store.state.langStr;
        this.$util.sessionStorage.save(
          "verificationCard",
          JSON.stringify(item)
        );
        this.$router.push({
          path: "/" + lang + "/user/verificationCard"
        });
      }
    }
  }
};
</script>

<style scoped lang='less'>
.card-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .card {
    height: 100px;
    padding: 0 20px 0 18px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin: 20px 20px 15px;
    div {
      img {
        width: 46px;
        margin: 0 16px 0 0;
      }
      span {
        font-weight: 500;
        font-size: 15px;
        color: #444;
      }
    }
    > p {
      padding: 0 10px;
      color: #fff;
      font-size: 13px;
      height: 24px;
      background: linear-gradient(
        135deg,
        rgba(255, 143, 85, 1) 0%,
        rgba(255, 108, 80, 1) 51%,
        rgba(255, 84, 61, 1) 100%
      );
      border-radius: 13px;
    }
    > p.active {
      background: transparent;
      color: #bbb;
    }
    > p.error {
      color: #ff523d;
      background: transparent;
    }
  }
}
</style>
