<template>
  <sail-page type="loading-view" title="主页面">
    <div slot="content">
        <div id="MyPage">
          <div class="mypage-nave">
            <div class="mypage-header">
              <router-link style="position:relative" class="link" to="/MyNewsPage">
                <p class="mypage-header_icon">
                  <van-icon name="pending-evaluate" />
                  <div class="news-dot" v-if="isRead"></div>
                </p>
              </router-link>
              <p class="mypage-header_words">我的</p>
              <router-link class="link" to="/setUpPage">
                <p>
                  <svg class="icon nav-icon" aria-hidden="true">
                    <use xlink:href="#icon-shezhi2"/>
                  </svg>
                </p>
            </router-link>
            </div>
            <hr style="border:1px solid #FAFAFA" >
              <div class="mypage-portrait">
                  <router-link class="link" to="/MyPersonalInfor">
                    <p class="portrait-img" v-if="!loginInfo.headImg"><img class="portrait-img_status" src="@/assets/img/common_def_avatar@3x.png">
                    </p>
                    <p class="portrait-img" v-if="loginInfo.headImg"><img class="portrait-img_status" :src="`${hostURL}${loginInfo.headImg}`">
                    </p>
                  </router-link>
                  <p>  
                    <router-link v-if="!loginInfo.phone" to="/login" class="portrait-name">点击登录</router-link>
                    <a v-if="loginInfo.phone" href="###" class="portrait-name">{{loginInfo.nickname||'我'}}</a>
                  </p>
              </div>
            <div class="mypage-lists">
               <MyPageStatus/>
            </div>
          </div>
          <div class="pymage-common">
            <div class="mypage-login">
              <div class="mypage-login-theme">
              <router-link class="link" to="/serviceTeam">
                <div>
                  <p class="mypage-login-icon_status">
                    <svg class="icon nav-icon" aria-hidden="true">
                      <use xlink:href="#icon-wodeguanjia"/>
                    </svg>
                  </p>
                  <p class="mypage-login-name">服务团队</p>
                </div>
              </router-link>
              <router-link class="link" to="/fellowResident">
                <div>
                  <p class="mypage-login-icon_status">
                    <svg class="icon nav-icon" aria-hidden="true">
                      <use xlink:href="#icon-wodetongzhuren"/>
                    </svg>
                  </p>
                  <p class="mypage-login-name">我的同住人</p>
                </div>
              </router-link>
              <router-link class="link" to="/userMaintenanceList">
                <div>
                  <p class="mypage-login-icon_status">
                    <svg class="icon nav-icon" aria-hidden="true">
                      <use xlink:href="#icon-wodebaoxiu"/>
                    </svg>
                  </p>
                  <p class="mypage-login-name">我的维保</p>
                </div>
              </router-link>
              <router-link class="link" to="/activityList">  
                <div>
                  <p class="mypage-login-icon_status">
                    <svg class="icon nav-icon" aria-hidden="true">
                      <use xlink:href="#icon-wodehuodong"/>
                    </svg>
                  </p>
                  <p class="mypage-login-name">我的活动</p>
                </div>
              </router-link>
              <router-link class="link" to="/subscribeList">  
                <div>
                  <p class="mypage-login-icon_status">
                    <svg class="icon nav-icon" aria-hidden="true">
                      <use xlink:href="#icon-wodeyuyue"/>
                    </svg>
                  </p>
                  <p class="mypage-login-name">我的预约</p>
                </div>
              </router-link>  
              </div>  
            </div>
            <div class="mypage-content">
              <router-link class="link" to="/myIntegral">
                  <div class="van-cell__title">
                    <div class="mypage-main-icon">
                     <div class="mypage-main-icon_left">
                       <div class="mypage-main-left_icon">
                         <svg class="icon nav-left_icon" aria-hidden="true">
                           <use xlink:href="#icon-wodejifen"/>
                         </svg>
                       </div>
                       <div class="mypage-main_content">我的积分</div>
                     </div> 
                    </div>
                    <div class="mypage-main-icon_right">
                      <div class="mypage-main-right_words"></div>
                      <div class="mypage-main-right_icon">
                        <svg class="icon nav-right_icon" aria-hidden="true">
                          <use xlink:href="#icon-qianjin"/>
                        </svg>
                      </div>
                    </div>
                  </div>
              </router-link>
              <router-link class="link" to="/coupon"> 
                <div class="van-cell__title">
                  <div class="mypage-main-icon">
                   <div class="mypage-main-icon_left">
                     <div class="mypage-main-left_icon">
                       <svg class="icon nav-left_icon" aria-hidden="true">
                         <use xlink:href="#icon-wodeyouhuiquan"/>
                       </svg>
                     </div>
                     <div class="mypage-main_content">我的优惠券</div>
                   </div> 
                  </div>
                  <div class="mypage-main-icon_right">
                    <div class="mypage-main-right_icon">
                      <svg class="icon nav-right_icon" aria-hidden="true">
                        <use xlink:href="#icon-qianjin"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </router-link>
              <router-link class="link" to="/myCollections"> 
                <div class="van-cell__title">
                  <div class="mypage-main-icon">
                   <div class="mypage-main-icon_left">
                     <div class="mypage-main-left_icon">
                       <svg class="icon nav-left_icon" aria-hidden="true">
                         <use xlink:href="#icon-wodeshoucang"/>
                       </svg>
                     </div>
                     <div class="mypage-main_content">我的收藏</div>
                   </div> 
                  </div>
                  <div class="mypage-main-icon_right">
                    <div class="mypage-main-right_icon">
                      <svg class="icon nav-right_icon" aria-hidden="true">
                        <use xlink:href="#icon-qianjin"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </router-link>
              <router-link class="link" to="/userApplyList"> 
                <div class="van-cell__title">
                  <div class="mypage-main-icon">
                   <div class="mypage-main-icon_left">
                     <div class="mypage-main-left_icon">
                       <svg class="icon nav-left_icon" aria-hidden="true">
                         <use xlink:href="#icon-wodeshenqing"/>
                       </svg>
                     </div>
                     <div class="mypage-main_content">我的申请</div>
                   </div> 
                  </div>
                  <div class="mypage-main-icon_right">
                    <div class="mypage-main-right_icon">
                      <svg class="icon nav-right_icon" aria-hidden="true">
                        <use xlink:href="#icon-qianjin"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </router-link>
              <router-link class="link" to="/myFair">
                  <div class="van-cell__title">
                    <div class="mypage-main-icon">
                     <div class="mypage-main-icon_left">
                       <div class="mypage-main-left_icon">
                         <svg class="icon nav-left_icon" aria-hidden="true">
                           <use xlink:href="#icon-wodeshiji"/>
                         </svg>
                       </div>
                       <div class="mypage-main_content">我的市集</div>
                     </div> 
                    </div>
                    <div class="mypage-main-icon_right">
                      <div class="mypage-main-right_icon">
                        <svg class="icon nav-right_icon" aria-hidden="true">
                          <use xlink:href="#icon-qianjin"/>
                        </svg>
                      </div>
                    </div>
                  </div>
            </router-link>
            </div>
            <div class="mypage-footer">
              <div class="mypage-footer_wrap">
                <router-link class="link" to="/relevant"> 
                  <div class="van-cell__title">
                    <div class="mypage-main-icon">
                     <div class="mypage-main-icon_left">
                       <div class="mypage-main-left_icon">
                         <svg class="icon nav-left_icon" aria-hidden="true">
                           <use xlink:href="#icon-guanyuwomen"/>
                         </svg>
                       </div>
                       <div class="mypage-main_content">关于我们</div>
                     </div> 
                    </div>
                    <div class="mypage-main-icon_right">
                      <div class="mypage-main-right_icon">
                        <svg class="icon nav-right_icon" aria-hidden="true">
                          <use xlink:href="#icon-qianjin"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                </router-link>
                <router-link class="link" to="/feedback"> 
                  <div class="van-cell__title">
                    <div class="mypage-main-icon">
                     <div class="mypage-main-icon_left">
                       <div class="mypage-main-left_icon">
                         <svg class="icon nav-left_icon" aria-hidden="true">
                           <use xlink:href="#icon-gongnengyichangyuchanpinjianyi"/>
                         </svg>
                       </div>
                       <div class="mypage-main_content">功能异常与产品建议</div>
                     </div> 
                    </div>
                    <div class="mypage-main-icon_right">
                      <div class="mypage-main-right_icon">
                        <svg class="icon nav-right_icon" aria-hidden="true">
                          <use xlink:href="#icon-qianjin"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
          <footer>
            <div class="weui-tabbar footer-content">
             <NavFooter class="hot__projects"/>
            </div>
          </footer>
        </div>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import NavFooter from "@/common/widget/navFooter.vue";
import sailPage from "@/components/sail-page.vue";
import MyPageStatus from "@/common/widget/PersonalPageStatus";
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage,
    MyPageStatus,
    NavFooter,
  },

  asyncData({store, route}) {
    let promise1 =  store.dispatch("bindHouseModule/viewHouseInfo");
    let promise2 =  store.dispatch("myBillModule/findUserCurrentBill");
    //let promise3 =  store.dispatch('messageModule/findAllOnCAPP', true)
    //let promise4 =  store.dispatch('messageModule/businessFindPage', true)
    return Promise.all([promise1, promise2]).then(function(values) {
      // 
      // this.telephone = values[2].data.data.phone
    });
  },

  computed: {
    ...mapState({
      loginInfo: state => state.loginModule.loginInfo,
      businessList: state => state.messageModule.businessList,
      systemList: state => state.messageModule.systemList
    }),
    isRead() {
      let flag = false;
      if(this.systemList) {
        this.systemList.map(item => {
          if(!item.isRead) {
            flag = true;
          }
        });
      }
      if(this.businessList) {
        this.businessList.map(item => {
          if(!item.readFlag) {
            flag = true;
          }
        });
      }
          
      return flag;
    }
  },
  data: function(){
    return {
      hostURL:URL
    }; 
  },
  methods: {
      
  }
};
</script>
<style lang="less">
  #MyPage {
    .van-cell__right-icon {
    }
  }
</style>
<style lang="less" scoped>
@import "~@/common/less/variable.less";
@bgWhite:#fff;
@fontSize:16px;
@marginSize: 13px;
@portraitSize:70px;
  #MyPage {
    width: 100%;
    .news-dot {
        top: 4px;
        right: -10px;
        width: 8px;
        height: 8px;
        content: ' ';
        position: absolute;
        border-radius: 100%;
        background-color: #f44;
    }
    .weui-panel__hd {
        background: @bgWhite;
    }
    .mypage-nave {
    background: @bgWhite;
    width: 100%;
    min-height:150px;
      .mypage-header {
        width: 340px;
        height: 40px;
        line-height: 40px;
        display: flex;
        margin:0 auto;
        font-size: @fontSize;
        justify-content: space-between;
        .nav-icon {
          color: #8C8C8C;
          text-align: center;
          padding-top: 7px;
          font-size: 17px;
        }
        .mypage-header_icon {
          color: #8C8C8C;
          padding-top: 5px;
          font-size: 17px;
        }
        .mypage-header_words {
          font-size: 17px;
          height: 40px;
          line-height: 40px;
        }
      }
      .mypage-portrait {
        width: @portraitSize;
        height: @portraitSize;
        margin: 25px auto;
        font-size: 15px;
        .portrait-img_status {
          width: @portraitSize;
          height: @portraitSize;
          border-radius: 50%;
        }
      }
      .mypage-lists {
        padding-top: 30px;
        padding-bottom: 20px;
      }
    }
    .portrait-name {
      color: @nice-green;
    }
    .pymage-common {
      .nav-icon {
        font-size: 30px;
        color: #AFAFAF;
        height: 25px;
        line-height: 25px;
      }
    }
    .mypage-login {
      min-height: 85px;
      background: @bgWhite;
      margin-top: @marginSize;
      .mypage-login-theme {
        width: 340px;
        padding-top: 15px;
        display: flex;
        margin:0 auto;
        color: #676767;
        height: 50px;
        line-height: 25px;
        justify-content: space-between;
      }
      .mypage-login-name {
        font-size: 12px;
        color: #676767;
      }
    }
    
    .mypage-footer {
      background: @bgWhite;
      margin-top: @marginSize;
      margin-bottom: 60px;
    }
    .mypage-content {
      background: @bgWhite;
      margin-top: @marginSize;
      margin-bottom: @marginSize;
    }
    .van-cell__title {
      border-bottom: 1px solid #F4F4F4;
        padding-top: 5px;
        display: flex;
        justify-content: space-between;
        .mypage-main-icon_right {
          display: flex;
        }
        .mypage-main-icon_left {
          display: flex;
        }
    }
    .nav-left_icon {
      font-size: 30px;
      color: #AFAFAF;
      margin-left: 10px;
    }
    .mypage-main_content {
      margin-left: 10px;
      height: 30px;
      line-height: 30px;
      color: #222222;
      font-size: @fontSize;
    }
    .nav-right_icon {
      font-size: 14px;
      color: #AFAFAF;
      line-height: 30px;
      height: 30px;
      margin-right: 10px;
    }
    .mypage-main-right_words {
      font-size: 14px;
      height: 30px;
      color: #FF7F00;
      line-height: 30px;
    }
  }
</style>