<!--
  <checkSelectComponents :propsOption="propsOption" :placeholder="全校" class="position-check-select"></checkSelectComponents>

  import checkSelectComponents from "@/components/checkSelectComponents.vue";

  components: {
    checkSelectComponents
  },
  //选择器组件传参
  propsOption:[
    {label:'全校',value:'11'},
    {label:'学院1',value:'1'},
    {label:'学院2',value:'2'},
    {label:'学院3',value:'3'},
    {label:'学院4',value:'4'},
    {label:'学院5',value:'5'},
    {label:'学院6',value:'6'},
    {label:'学院7',value:'7'},
    {label:'学院8',value:'8'},
    {label:'学院9',value:'9'},
    {label:'学院10',value:'10'},
  ],
  //组件方法
  checkSelectData(value){
    console.log('value',value);
  },
-->

<template>
  <div class="checkSelectComponents" @mouseleave="selectOff">
    <div class="check-select-box" @click="selectOpen">
      <p :class="!checkValue?'checkNoIndexName':''">{{checkValue?propsOption[checkIndex].label:(placeholder?placeholder:'请选择')}}</p>
      <p class="el-icon-arrow-down"></p>
    </div>
    <div class="check-select-for-max-box" v-if="checkListType">
      <p class="check-select-for-box" @click="checkItem(index)"
         v-for="(item,index) in propsOption" :key="index">{{item.label}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'checkSelectComponents',
    props: {
      propsOption: null,
      placeholder:null,
    },
    data() {
      return {
        checkValue: null,
        checkIndex: null,
        checkListType: false
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      selectOpen() {
        this.$set(this, 'checkListType', true)
      },
      selectOff() {
        console.log('出去了')
        this.$set(this, 'checkListType', false)
      },
      checkItem(index) {
        this.$set(this, 'checkIndex', index)
        this.$set(this, 'checkValue', this.propsOption[index].value)
        this.$set(this, 'checkListType', false)
        this.$parent.checkSelectData(this.propsOption[index].value)
      }
    }
  }
</script>
<style scoped lang="scss">
  .checkSelectComponents {
    z-index: 10;
    .check-select-box {
      width: 222px;
      height: 36px;
      border: 1px solid #07B4C7;
      background-color: #013138;
      display: flex;
      cursor: pointer;
      .checkNoIndexName {
        color: #07B4C7 !important;
      }
      p:nth-child(1) {
        flex: 1;
        color: #00FFFF;
        font-size: 18px;
        padding-left: 11px;
        line-height: 36px;
      }
      p:nth-child(2) {
        line-height: 36px;
        width: 30px;
        font-size: 18px;
        color: #07B4C7;
      }
    }
    .check-select-for-max-box {
      border: 1px solid #07B4C7;
      position: absolute;
      top: 36px;
      left: 0;
      background-color: #013138;
      max-height: 180px;
      width: 222px;
      overflow-y: scroll;
      .check-select-for-box {
        margin: 0 1px;
        padding: 0 10px;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        color: #07B4C7;
        font-size: 18px;
      }
      .check-select-for-box:hover {
        color: #00FFFF;
        background-color: #07B4C7;
      }
    }
    .check-select-for-max-box::-webkit-scrollbar {
      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .check-select-for-max-box::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #07B4C7;
      background: #07B4C7;
    }
    .check-select-for-max-box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #013138;
      border-radius: 0;
      background: #013138;
    }
  }
</style>
