<template>
  <div class="select-div">
    <div class="select-div-text-wrap" @click="isShow=!isShow">
      <span class="select-div-text">{{text}}</span>
      <slot></slot>
    </div>
    <ul class="select-ul" :style="{'display':!isShow?'none':'block'}" >
      <li class="select-item" :class="{'active':select===item.id}" @click="handleSelect(item)" v-for="(item,index) in options" :key="'select_'+index">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
    export default {
      props:{
        options:{
          default:()=>[],
          type:Array
        },
        select:{
          default:'',
          type:String
        }
      },
      name: "PublicSelect",
      computed:{
        text(){
          const findItem=this.options.find((item)=>item.id===this.select);
          return findItem?findItem.name:''
        }
      },
      methods:{
        handleSelect(item){
          this.isShow=false
          this.$emit('select',item)
        }
      },
      data(){
        return {
          isShow:false
        }
      }
    }
</script>

<style scoped lang="less">
.select{
  &-div{
    display: block;
    position: relative;
    &-text{
      &-wrap{
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
      }
    }
  }
  &-ul{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    min-height: 2rem;
    background-color: #FFFFFF;
    box-shadow: 0 .03rem .06rem rgba(0, 0, 0, 0.16);
    z-index: 2;
  }
  &-item{
    cursor: pointer;
    height: .4rem;
    background-color: #fff;
    font-size: .16rem;
    font-family: Manrope;
    font-weight: 400;
    line-height: .4rem;
    color: #302D2C;
    padding-left: .33rem;
    box-sizing: border-box;
    &.active{
      background-color: #F49F00;
      color: #fff;
    }
  }
}
  @media screen and (max-width: 768px) {
    .select{
      &-ul{
        bottom: -.06rem;
        min-height: 4rem;
        z-index: 1;
      }
      &-item{
        height: .8rem;
        font-size: .26rem;
        line-height: .8rem;
      }
    }
  }
</style>
