<template>
    <div class="join-us-tabs " :class="{'mask':isMobile,'expand':isExpand}" >
     <div class="join-us-tabs-options">
       <h3 class="join-us-tabs-title">Position</h3>
       <ul>
         <li class="join-us-tabs-item" @click="handleSelect(item)" v-for="(item,index) in options" :key="'option_'+index" :class="{'active':active===item.id}">
            {{item.name}}
         </li>
       </ul>
     </div>
<!--      <div class='join-mask' :class="{'isExpand':isExpand}" v-if="isMobile" @click="isExpand=!isExpand">-->
<!--        <van-icon name="arrow-down" class="join-mask-arrow" />-->
<!--      </div>-->
      <div class="join-us-tabs-content" v-html="content"></div>
    </div>
</template>

<script>
    export default {
        name: "JoinUsTabs",
      data(){
          return {
            isMobile:false,
            isExpand:true,
          }
      },
      mounted(){
          this.handleIsMobile()
          window.addEventListener('resize',this.handleIsMobile)
      },
      props:{
        options:{
          default:()=>[],
          type:Array
        },
        active:{
          default:'',
          type:String
        },
        content:{
          default:'',
          type:String
        }
      },
      methods:{
        handleSelect(item){
          this.$emit('handleSelect',item)
        },
        handleIsMobile(){
          const clientWidth=document.documentElement.clientWidth;
          this.isMobile=clientWidth<=750
        }
      }
    }
</script>

<style scoped lang="less">
.join-us-tabs{
  padding-top: .97rem;
  padding-bottom: 1.57rem;
  &-options{
    display: inline-block;
    max-width: 3.02rem;
    width: 100%;
    margin-right: 1.28rem;
  }
  &-content{
    padding-top: .5rem;
    vertical-align: top;
    max-width: 8.7rem;
    display: inline-block;
    width: calc( 100% - 4.38rem );
    min-height: 2rem;
  }
  .join-mask{
    display: none;
  }
  &-item{
    font-size: .16rem;
    font-family: Manrope;
    font-weight: 400;
    color: #302D2C;
    border-bottom: 1px solid #EDEDED;
    min-height: .7rem;
    display: flex;
    align-items: center;
    padding-left: .14rem;
    cursor: pointer;
    &.active,&:hover{
      color: #F49F00;
      text-decoration: underline;
    }
  }
  &-title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: .58rem;
    background: #342927;
    font-size: .16rem;
    font-family: Manrope;
    font-weight: 400;
    color: #FFFFFF;
  }
}
  @media screen and (max-width: 768px){
    .join-us-tabs{
      padding-top: .5rem;
      &.mask{
        height: 3.5rem;
        position: relative;
        overflow-y: hidden;
        overflow-x: visible;
        &.expand{
          height:auto;
          overflow-y: visible;
        }
      }
      .join-mask{
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        &.isExpand{
          .join-mask-arrow{
            transform: rotate(-180deg);
          }
        }
        &-arrow{
          transition: all .3s ease-in;
          line-height: .4rem;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
        }
        &:before{
          content: '';
          display: block;
          height: .85rem;
          background: linear-gradient(to bottom,transparent 2%,#F8F9F9);
          background: -ms-linear-gradient(to bottom,transparent 2%,#F8F9F9);
          background:-moz-linear-gradient(to bottom,transparent 2%,#F8F9F9);/*火狐*/
          background: -webkit-linear-gradient(to bottom,transparent 2%,#F8F9F9);
          background: -o-linear-gradient(to bottom,transparent 2%,#F8F9F9)
        }
        &:after{
          content: '';
          display: block;
          min-height: .4rem;
          background-color: #eee;
          border-radius: .5rem;
        }
      }
      &-options{
        display: block;
        max-width: 100%;
        width: 5.18rem;
        margin:  0 auto;
      }
      &-content{
        max-width: 100%;
        padding-left: .15rem;
        padding-right: .15rem;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        min-height: 2rem;
      }
      &-item{
        font-size: .26rem;
        min-height: .88rem;
        padding-left: .16rem;
        border-color: #EDEDED;
        &.active,&:hover{
          text-decoration: none;
        }
      }
      &-title{
        height: .96rem;
        font-size: .38rem;
      }
    }
  }
</style>
