<template>
    <div class="container">
      <div class="mine_top">
        <div class="baseInfo flex-box">
          <img :src="userInfo.headImageUrl || headImg" alt="">
          <p class="flex">{{userInfo.phone}}</p>
        </div>
      </div>
      <div class="content">
        <h3>我的订单</h3>
        <ul class="order-wrap flex-box">
          <li class="flex" @click="toOrderList(o.status)" v-for="o in ordertype">
            <img :src="o.imgSrc" alt="">
            <span>{{o.title}}</span>
            <i class="tip" v-show="o.tipNum>0">{{o.tipNum}}</i>
          </li>
        </ul>
      </div>
      <div class="item-list">
        <div class="item_wrap">
          <p @click="toChnagePhone">绑定手机 <span class="float-r">{{userInfo.phone}}<i class="iconfont icon-arrow-right1"></i></span></p>
        </div>
        <div class="item_wrap">
          <p @click="toTravel">常用出行人<i class="iconfont icon-arrow-right1 float-r"></i></p>
        </div>
        <div class="item_wrap border-no">
          <p><a :href="'tel:'+telPhone">联系客服</a></p>
        </div>
        <div class="bottom-wrap border-no">
          <a href="JavaScript:void(0)" class="btn" @click="logout">退出登录</a>
        </div>
      </div>
      <bottomBar activePage="mine"></bottomBar>
    </div>
</template>
<script>
  import headImg from '../../assets/images/user_logo.png'
  import icon_01 from '../../assets/images/o_icon01.png';
  import icon_02 from '../../assets/images/o_icon02.png';
  import icon_03 from '../../assets/images/o_icon03.png';
  import icon_04 from '../../assets/images/o_icon04.png';
    export default {
        name: '',
        data () {
            return {
              telPhone:telPhone,
              userInfo:Cookie.get("data") ? JSON.parse(Cookie.get("data")) : '',
              headImg:headImg,
              ordertype:[
                {title:'全部订单',status:'all',imgSrc:icon_01,tipNum:0},
                {title:'待出票',status:"1",imgSrc:icon_02,tipNum:0},
                {title:'待出行',status:'9',imgSrc:icon_03,tipNum:0},
                {title:'退款单',status:'6',imgSrc:icon_04,tipNum:0},
              ],
            }
        },
        methods:{
          logout(){
            loginout().then(data=>{
              Cookie.remove("data");
              location.href=loginUrl;
            });
          },
          toTravel(){
            this.$router.push("/wx/travellerList");
          },
          getUserInfo(){
            getUserMess().then(data=>{
                if(data.returnCode==200){
                    this.userInfo=data.data;
                }
            })
          },
          toChnagePhone(){
            this.$router.push("/wx/changePhone");
          },
          toOrderList(status){
              this.$router.push("/wx/orderList/"+status);
          },
          getOrderStatistics(){
            getOrderStatistics('0').then(data=>{
              if(data.returnCode==200){
                data.data.forEach(item=>{
                  if(item.orderStatus!=9){
                    this.ordertype[0].tipNum+=item.number;
                  }
                  if(item.orderStatus==1){
                    this.ordertype[1].tipNum=item.number;
                  }else if(item.orderStatus==9){
                    this.ordertype[2].tipNum=item.number;
                  }else if(item.orderStatus==5 || item.orderStatus==6){
                    this.ordertype[3].tipNum+=item.number;
                  }
                });
              }else {
//                    Toast(data.returnMsg);
              }
            })
          }
        },
        mounted(){
          this.getUserInfo();
          this.getOrderStatistics();
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig"
.set_icon{
  position absolute
  width 1.2rem
  top 1.25rem
  right 1.25rem
}
.mine_top{
  position relative
  width 100%
  height 12.5rem
  background: url("../../assets/images/mine_bg.png") center no-repeat
  background-size 100% 100%
  text-align left
  .baseInfo{
    position absolute
    top 50%
    left 1.25rem
    margin-top -2rem
    img{
      width 3.425rem
      height 3.425rem
      margin-right .875rem
      border-radius 50%
    }
    p{
      line-height 3.425rem
      font-size 1.25rem
      font-weight 500
      color #ffffff
    }
  }
}

.content{
  position relative
  top -2.85rem
  margin 0 1.25rem
  padding-top 1rem
  background #fff
  border-radius .8rem
  h3{
    padding-left 1rem
    padding-bottom .6rem
    border-bottom 0.05rem solid border_color
    font-size .95rem
    font-weight bold
    color mainTitleColor
  }
  .order-wrap{
    padding 1.5rem 0 1rem
    border-radius .8rem
    box-shadow 0px 6px 26px #eee
    li{
      position relative
      flex 0 0 25%
      text-align center
      img{
        width 1.5rem
        height 1.5rem
        margin 0 auto .7rem
      }
      span{
        font-size .8rem
        color mainTitleColor
      }
      i.tip{
        position absolute
        width 1.1rem
        height 1.1rem
        line-height 1.2rem
        left 50%
        top -.5rem
        border-radius 100%
        background mainColor
        font-weight bold
        font-size .65rem
        font-style normal
        color #fff
        text-align center
      }
    }
  }
}
.item-list{
  margin-top -1.3rem
}
.item_wrap{
  font-size .95rem
  border-bottom: 0.05rem solid border_color
}
.bottom-wrap{
  padding 1rem 1.25rem
}
</style>
