<template>
  <div id="app">
    <div class='common-page'>
        <search-nav cancel-text='取消'
          placeholder='请输入关键字搜索'
          :blur='handleBlur'
          :focus='handleFocus'
          :cancel='handleCancel'
          :change='handleChange'
          @clear-input='handleClearInput'
          :hasBack="hasBack"
          @handle-back="handleBack"
          @handle-search-click="handleClick"
          searchicon="upaas-icon-search-xiangmu"
          :is-padding="isPadding"
          :autofocus="autofocus"
          :search-input-content="content"
          @handle-cancel="handleCancel"
      ></search-nav>
      <mu-card>
        <mu-card-address
          name="王智智"
          email="zhili@beisen.com"
          position="pps部门"
          department="前端开发"
          @handle-click="handleClick"
          @handle-avatar-click="handleAvatarClick"
          @handle-right-icon="handleRightIcon"
          :avatar-obj="avatarObj2"
        >
        </mu-card-address >
        <mu-card-project title="完成的Ocean图表数据下钻的设计以及东完成的Ocean图表数据下钻的设计以及东"
          percent="30%"
          start-time="04/23"
          end-time="04/23"
          :avatar-obj="avatarObj2"
          @handle-list-click="handleListClick">
        </mu-card-project>
      </mu-card>
      <div slot="child" class="fullWidth minHeight" id="teamScroller">
        <div id="myTeam"></div>
         <chaos-icon v-if="isSelf && !showBack"  class="orgEnter icon-box" icon="m-sys-zuzhigoucheng" @click="enterOrgChart" style="margin-right:12px"></chaos-icon>
      </div>
      <div>
        <bs-guide :show='false' text="哈哈哈哈哈哈哈哈~"></bs-guide>
      </div>
    
    </div>
    <div style="position:relative">
      <div class="tip-container animatedCls guidePopShow" style="position:absolute">
      <div class='guide-tip '>
        <p class='content'>点击这里可以联系ta哦~</p>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
    import searchnav from 'muse-ui/searchNav';
    import Scroller from 'muse-ui/scroller';
    import {Card, CardAddress, CardProject} from 'muse-ui/card';
    import Guide from 'muse-ui/guide';
    export default {
        components: {
            'search-nav':  searchnav,
            'mu-card':Card,
            'mu-card-address':CardAddress,
            'mu-card-project':CardProject,
            'mu-scroller':Scroller,
            'bs-guide':Guide,
        },
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                hasBack: false,
                showGuide: true,
                isPadding: true,
                avatarObj:{"aUrl":"https://cache.tita.gift/Image/245494/a8ecde13853644e9af43f750a6d5360b_b.png","isImg":true,"color":"transparent","aName":"占位图"},
                avatarObj2:
                  {
                    aUrl: "",
                    isImg: false,
                    color: "#ccc",
                    aName: "占位图",
                  },
                autofocus: true,
                content: "搜索"
            }
        },
        methods: {
            handleClick(){
              console.log("handleClick")
              //this.hasBack = true;

            },
            handleFocus(){
                console.log('focus');
            },
            handleBlur(){
                console.log('blur');
            },
            handleChange(evt,value){
                console.log(evt,value);
            },
            handleCancel(){
              this.hasBack = true;
              this.isPadding = true;
              this.content = "搜索项目";
              console.log("cancel");
            },
            handleClearInput(){
              console.log("clear-input");
            },
            handleBack(){
              this.hasBack = false;
              this.isPadding = true;
              console.log('back')
            },
            handleAvatarClick(){
              console.log("handleAvatarClick")
            },
            handleRightIcon(){
              console.log("handleRightIcon")
            },
            handleListClick(){
              console.log("handleListClick")
            }

        }
    }
</script>
<style lang='less'>

.iconfont{
  display: inline !important;
}
.text{
  position: relative;
  padding-left: 25px;
}
.animatedCls{
  animation-duration: .2s;
  animation-fill-mode: both;
}
.tip-container{
  -webkit-transform: scale(0);  
  transform-origin:20px 20px;
}
@keyframes guidePopShow {
  
 0% {  
        -webkit-transform: scale(0);  
        opacity: 0.0;  
    }  
   
    100% {  
        -webkit-transform: scale(1);  
        opacity: 1;  
    }  
}
@keyframes guidePopHide{
  
 0% {  
        -webkit-transform: scale(1);  
        opacity: 1;  
    }  
   
    100% {  
        -webkit-transform: scale(0);  
        opacity: 0;  
    }  
}

.guidePopHide{
 animation-name: guidePopHide;
}
.guidePopShow {
  animation-name: guidePopShow;
}

.text:before{
     position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    left: 0;
    top: 0px;
    display: inline-block;
    background: transparent url(./scroll_tip.svg) -5px -5px no-repeat;
    z-index: 99999;
}
.guide-tip{
  background:rgba(0,0,0,0.70);
  border-radius:50px;
  display:inline-block;
  position:relative;
  &:before{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid #0000;
    border-bottom-color: #000000b3;
    left: 24px;
    top: -12px;
  }
  .content {
    font-size:14px;
    color:#ffffff;
    letter-spacing:0;
    line-height:16px;
    padding:6px 12px;
    position:relative;
    padding-right:30px;
    &:after{
      position: absolute;
      content: ' ';
      width: 30px;
      height: 30px;
      right: 0;
      top: -1px;
      display: inline-block;
      background: transparent url(./guide_close.svg) center center no-repeat;
      z-index: 99999;
    }
  }
}
</style>
