<template>
  <div class="selcts" @click="icoIsShow">
    <div style="flex: 1;">
      <div v-if="!choose.length" style="color: rgba(0, 0, 0, 0.40);">{{ tit }}</div>
      <div class="choosePerCon">
        <div v-for="(i, index) in listCont" :key="index + 'p'">
          <div v-if="i.id === choose[0]" class="choosePerTxt">
            {{ i.name }}
          </div>
        </div>
        <div v-if="!choose[0]" class="choosePerTxt">
          全部
        </div>
      </div>
    </div>

    <div class="ico">
      <van-icon size="14px" :name="ico ? 'arrow-left' : 'arrow-down'" />
    </div>

    <div class="list" v-if="ico">
      <div class="ol" @click.stop="cho({ id: '' })">
        <div :style="{ color: !choose[0] ? '#3894FF' : 'none' }">
          全部
        </div>
        <div>
          <img :style="{ display: !choose[0] ? '' : 'none' }" src="@/assets/images/eva/dui.png" alt="" />
        </div>
      </div>

      <div class="ol" v-for="(i, index) in listCont" :key="index + 'w'" @click.stop="cho(i)">
        <div :style="{ color: choose.includes(i.id) ? '#3894FF' : 'none' }">
          {{ i.name }}
        </div>
        <div>
          <img :style="{ display: choose.includes(i.id) ? '' : 'none' }" src="@/assets/images/eva/dui.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tit: {
      type: String,
      default: ''
    },
    listCont: {
      type: Array,
      default: () => []
    },
    choose: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ico: false,
      txtColor: 'txtColor'
    }
  },

  methods: {
    // 判断弹出选项列表
    icoIsShow() {
      this.ico = true
      // 调用父组件，显示遮罩层
      this.$emit('shadeIsShow')
    },
    close() {
      this.ico = false
    },
    // 判断学生是否被选中
    cho(e) {
      console.log('e', e)
      // if (!e) {
      //   this.choose[0] = ''
      // } else {
      this.choose[0] = e.id
      // }
      this.ico = false
      this.$emit('update-search')
    }
    // 删除学生
    // delStu() {
    //   this.choose = ''
    // },
    // fuClick1() {
    //   this.ico = !this.ico
    // }
  }
}
</script>

<style lang="scss" scoped>
.txtColor {
  color: blue;
}

.selcts {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding-right: 15px;
  font-size: 14px;
  width: 120px;
  .ico {
    width: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .list {
    position: absolute;
    left: 0;
    top: 100%;
    max-height: 220px;
    overflow-y: scroll;
    background-color: #fff;
    width: 150px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    z-index: 200;
    border-radius: 8px;
    .ol {
      height: 40px;
      line-height: 40px;
      width: 100%;
      color: black;
      // background-color: #fff;
      box-sizing: border-box;
      padding: 0px 10px;
      display: flex;
      justify-content: space-between;
    }
    // .ol:hover {
    //   background-color: #f3f6f9;
    // }
  }
  .choosePerCon {
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: scroll;
    // width: 80px;
    .choosePerTxt {
      height: 30px;
      flex-shrink: 0;
      // background-color: #eef0f3;
      margin: 2px 0px;
      box-sizing: border-box;
      // padding: 0px 10px;
      display: inline-flex;
      align-items: center;
      border-radius: 15px;
      img {
        flex-shrink: 0;
        width: 13px;
        // height: 15px;
        margin-left: 5px;
      }
    }
  }
}
</style>
