<template>
  <div class="personalPage">
    <div class="personalPage-wrap">
      <router-link class="link" :to="toHomeUrl">
        <div class="personalPage-wrap-house personalPage-bgBlue_ststus">
          <div class="status-main">
              <p class="status-main-header ">我的房屋</p>
              <p v-if="!loginInfo.phone" class="status-main-content">登录查看</p>
              <p v-if="loginInfo.phone && !loginInfo.cappUserInfo.regionName" class="status-main-relation">没有绑定房源</p>
              <p v-if="loginInfo.phone && loginInfo.cappUserInfo.regionName && myInfo.bindHouseStatus === 2" class="status-main-relation">等待审核中...</p>
              <div v-if="loginInfo.phone && loginInfo.cappUserInfo.regionName && myInfo.bindHouseStatus !== 2">
                <p class="status-main-content">{{loginInfo.cappUserInfo.regionName}}</p>
                <p class="status-main-content">{{loginInfo.cappUserInfo.buildingNum}}栋{{loginInfo.cappUserInfo.houseCode.slice(2, 4)}}单元{{loginInfo.cappUserInfo.houseCode.slice(4)}}</p>
                <p class="status-main-relation">{{mapName[loginInfo.cappUserInfo.cuserType]}}{{loginInfo.cappUserInfo.relationshipName}}</p>
              </div>
              <p class="status-main-footer status-bg-home footer_color theme-green">
                <i class="icon-footer" style="color: #ffffff;"><van-icon name="arrow" /></i>
              </p>
          </div>
        </div>
      </router-link>
      <router-link class="link" to="/fullBill">
      <div class="personalPage-wrap-house personalPage-bgGreen_ststus">
        <div class="status-main">
            <p class="status-main-header">我的账单</p>
            <!-- <p class="status-main-content">渔安新城店</p>
            <p class="status-main-content">C2栋01单元1132</p> -->
            <p v-if="!loginInfo.phone" class="status-main-content">登录查看</p>
            <div v-if="loginInfo.phone">
              <p class="status-main-relation" v-if="userCurrentBillInfo.businessStatus==2 || userCurrentBillInfo.businessStatus == undefined">暂无未缴金额</p>
              <p class="status-main-relation" v-if="userCurrentBillInfo.businessStatus==1">账单已出</p>
              <p class="status-main-relation" v-if="userCurrentBillInfo.businessStatus == 1">应缴{{userCurrentBillInfo.mustGetMoney | onlyCurrency}}元</p>
            </div>
            <p class="status-main-footer status-bg-fee footer_color theme-green">
              <i class="icon-footer"><van-icon name="arrow" /></i>
            </p>
        </div>
      </div>
      </router-link>
      <router-link class="link" to="/myCars">
      <div class="personalPage-wrap-house personalPage-bgYellow_ststus">
        <div class="status-main">
            <p class="status-main-header ">我的车辆</p>
          <!--   <p class="status-main-content">渔安新城店</p>
          <p class="status-main-content">C2栋01单元1132</p> -->
            <p v-if="!loginInfo.phone" class="status-main-content">登录查看</p>
            <p v-if="loginInfo.phone" class="status-main-relation">未添加</p>
            <p class="status-main-footer status-bg-car footer_color theme-green">
              <i class="icon-footer"><van-icon name="arrow" /></i>
            </p>
        </div>
      </div>
      </router-link>        
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "this",
  props: ["data", "iconType"],
  components: {
    //addPane
  },
  computed: {
    ...mapState({
      myInfo: state => state.bindHouseModule.myInfo,
      loginInfo: state => state.loginModule.loginInfo,
      userCurrentBillInfo:state => state.myBillModule.userCurrentBillInfo
    }),
    toHomeUrl() {
      let normal = "/manageOwnedHouse";
      let bindUrl = "/bindHouseCheck";
      
      if(!this.loginInfo.cappUserInfo.regionName) {
        return bindUrl;
      }
      return normal;
      
    }
  },
  mounted() {
    //
  },
  data: function() {
    return {
      name: "PersonalPageStatus",
      mapName: {
        1: "承租人",
        2: "同住人"
      }
    };
  },
  methods: {}
};
</script>
<style scoped lang='less'>
@import "~@/common/less/variable.less";
@bgYellow: #e5d454;
@bgGreen: #e5af59;
@bgBlue: #e39a5a;
.personalPage {
  width: 375px;
  margin: auto;
  background: @nice-bgwhite;
  .link {
    color: #fff;
  }
  .personalPage-wrap {
    .personalPage-bgGreen_ststus {
      background: @bgGreen;
    }
    .personalPage-bgBlue_ststus {
      background: @bgBlue;
    }
    .personalPage-bgYellow_ststus {
      background: @bgYellow;
    }

    width: 340px;
    margin: auto;
    color: #fff;
    display: flex;
    margin-bottom: -10px;
    justify-content: space-between;
    .personalPage-wrap-house {
      width: 100px;
      min-height: 130px;
      border-radius: 5px;
      
    }
    .status-main-header {
      padding-top: 7px;
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      padding-bottom: 7px;
      text-align: left;
      margin-left: 7px;
      font-weight: 600;
      letter-spacing:1px;
      
    }
    .status-main-relation {
      padding-top: 7px;
      font-size: 12px;
      height: 17px;
      line-height: 17px;
      text-align: left;
      margin-left: 7px;
      
    }
    .status-main-content {
      font-size: 11px;
      height: 16px;
      line-height: 16px;
      text-align: left;
      margin-left: 7px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      
    }
    .status-main {
      width: 99px;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      position: relative;
      .status-bg-home {
        background: #EBB789;
      }
       .status-bg-fee {
        background: #ECC688;
       }
      .status-bg-car {
        background: #ECE085;
      }
      .status-main-footer {
        position: absolute;
        bottom: -2px;
        left: 35px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        text-align: center;
        .icon-footer {
          font-size: 12px;
          font-weight: bold;
          text-shadow: 0px 3px rgba(0,0,0,.16);
          height: 24px;
          line-height: 30px;
          width: 12px;
        }
      }
    }
  }
}
</style>