<template>
  <sail-page type="loading-view" title="服务团队">
    <div slot="content">
        <div class="servic-team">
          <div class="servic-team_img">
            <img class="servic_img" src="@/assets/img/serviceteam_bg@3x.png">
          </div>
          <div class="servic-header">
              <div class="servic-header_nave">
                  <p class="servic-header_icon">
                    <router-link class="link" to="/MyPage">
                      <svg class="icon nav-icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui"/>
                      </svg>
                    </router-link> 
                  </p>
                  <p class="servic-header_words">服务团队</p>
                  <p class="servic-header_manage"></p>
              </div>  
          </div>
          <div class="service-main__content">
            <div class="servic-status" v-for="(serviceTeam,index) in serviceTeamInfo" :key="index">
             <div class="servic__main_theme">
               <div class="servic-icon">
                 <span>
                    <p class="service-border service-border_message" v-show="serviceTeam.stewardFlag == 1">
                      <span>
                        <!-- <svg class="icon nav-icon" aria-hidden="true">
                          <use xlink:href="#icon-shezhi2"></use>
                        </svg> -->
                        <van-icon class="icon_message" name="pending-evaluate" />
                      </span>
                      <span class="service-message">
                        <router-link class="link font_green" to="/helloHouseKeeper">留言</router-link>
                      
                    </span>
                    </p>
                    <p class="service-border service-border_telephone" v-show="serviceTeam.stewardFlag == 1">
                      <a :href="'tel:'+serviceTeam.phone">
                      <span>
                        <svg class="icon nav-icon font_green" aria-hidden="true">
                          <use xlink:href="#icon-dianhua"/>
                        </svg>
                      </span>
                      <span class="font_green">打电话</span>
                      </a>
                    </p>
                  </span>
               </div>
                <div class="servic-wrap">
                  <div class="servic-wrap-main">
                    <div class="servic-wrap-theme">
                     <span class="servic-wrap-portrait">
                       <img class="active-wrap_img" :src="serviceTeam.headImg"> 
                     </span>
                      <span class="servic-wrap-words">
                       <span class="servic-wrap-words_header">
                         <span class="servic-wrap-big" :class="{'font_green':serviceTeam.stewardFlag == 1}">{{serviceTeam.zhName}}{{serviceTeam.stewardFlag == 1?'(我的管家)':''}}</span>
                       </span>
                       <span class="servic-wrap-small servic-wrap_num">
                          {{!serviceTeam.roleNames?'管家':serviceTeam.roleNames}}
                       </span >
                      </span>
                    </div>
                  </div>   
                </div>
             </div>
            </div>
            <!-- <div class="servic-status">
             <div class="servic__main_theme">
               <div class="servic-icon">
                 <span>
                    <p class="service-border service-border_message">
                      <span>                      
                        <van-icon class="icon_message" name="pending-evaluate" />
                      </span>
                      <span class="service-message">留言</span>
                    </p>
                    <p class="service-border service-border_telephone">
                      <span>
                        <svg class="icon nav-icon" aria-hidden="true">
                          <use xlink:href="#icon-dianhua"></use>
                        </svg>
                      </span>
                      <span>打电话</span>
                    </p>
                  </span>
               </div>
                <div class="servic-wrap">
                  <div class="servic-wrap-main">
                    <div class="servic-wrap-theme">
                     <span class="servic-wrap-portrait">
                       <img class="active-wrap_img" src="@/assets/about.jpg"> 
                     </span>
                      <span class="servic-wrap-words">
                       <span class="servic-wrap-words_header">
                         <span class="servic-wrap-big">管家小白</span>
                       </span>
                       <span class="servic-wrap-small servic-wrap_num">管家</span >
                      </span>
                    </div>
                  </div>   
                </div>
             </div>
            </div> -->
          </div>
          
        </div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import {mapState} from "vuex";
export default {
  components: {
    sailPage
  },
  computed:{
    ...mapState({
      serviceTeamInfo:state => state.serviceModule.serviceTeamInfo
    })
  },
  data: function(){
    return {

    }; 
  },
  asyncData({store,route}) {
    return store.dispatch("serviceModule/getServiceTeamInfo",{

    }).then(res=>{

    });
  },
  methods: {
  }
};
</script>
<style lang="less">
   @import "~@/common/less/variable.less";
   .font_green {
     color: #2BAA76;
   }
</style>
<style lang="less" scoped>
@imgSize:70px;
@wordsSize:40px;
@numSize:5px;
@bgWhite:#fff;
@fontSize:16px;
@marginSize: 13px;
@portraitSize:70px;
.servic-team {
  .servic-team_img{
     width: 375px;
     height: 242px;
     position: absolute;
     .servic_img {
      width: 375px;
     }
  }
  .servic-header {
    z-index: 2;
    .servic-header_nave {
      border-bottom: 1px solid #F4F4F4;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
    }
    .servic-header_icon {
      z-index: 99;
      margin-left: 10px;
    }
  }
  .service-main__content {
    /* z-index: 3; */
    position: relative;
    margin: 0 auto;
    background: #fff;
    width: 355px;
    min-height: 100vh;
    margin-top: 155px;
  }
  .servic-status {
    width: 340px;
    border-bottom: 1px solid #F4F4F4;
    .servic__main_theme{
      .servic-icon {
        position: absolute;
        height: 25px;
        line-height: 25px;
        right: 15px;
        color: #2BAA76;
        margin-top: 15px;
        font-size: 12px;
        .service-border {
          width: 66.8px;
          height: 22px;
          border-radius: 25px;
          border: 1px solid #2BAA76;
          margin-top: 5px;
          line-height: 24px;
        }
        .service-border_telephone {
          
        }
        .service-border_message {
        }
       .icon_message {
        position: absolute;
         display: inline-block;
         font-size: 15px;
         margin-top: 4.5px;
         left: 10px;
       }
       .service-message {
         display: inline-block;
         margin-left: 20px;
       }
      }
    }
    .servic-wrap {
      height: 69px;
      border-radius: 5px;
      margin-bottom: 15px;
      margin-left: 12px;
      background: #fff;
      .servic-wrap-main{
        padding-top: 15px;
        text-align: center;
        .servic-wrap-theme {
          display: flex;
          padding-left: 15px;
          .servic-wrap-words {
            margin-top: -8px;
            height: @wordsSize;
            line-height: @wordsSize;
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            .servic-wrap-words_header {
              display: flex;
              padding-top: 5px;
            }
          }
          .active-wrap_img {
            background: url(~@/assets/about.jpg) no-repeat center;
            width: 45px;
            height: 45px;
            line-height: 80px;
            border-radius: 50%;
            margin-left: -15px;
            margin-top: 5px;
          }
          .servic-wrap-big {
            font-size: 14px;
          }
          .servic-wrap-small {
            font-size: 12px;  
          }
          .servic-wrap_num {
            text-align: left;
            height: 10px;
            color: #8E8E8E;
            line-height: 30px;
            width: 100%; 
          }
        }
      }
    }
  }
}
</style>