<template>
  <div class="selcts" :style="{ zIndex: num + 2 }" @click.stop="icoIsShow">
    <!-- <div class="backPage" v-if="!ico" @click="fuClick1"></div> -->
    <div style="flex: 1;">
      <div style="color: rgba(0, 0, 0, 0.40);" v-if="!choosePer.length">
        {{ tit }}
      </div>
      <div class="choosePerCon" v-if="choosePer.length">
        <div v-for="(i, index) in listContent" :key="index + 'q'">
          <div class="choosePerTxt" :style="{ display: choosePer.includes(i.id) ? '' : 'none' }">
            {{ i.name }}
            <img v-if="num !== 1" @click.stop="delStu(i.id)" src="@/assets/images/eva/cha.png" alt="" />
          </div>
        </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" v-for="(i, index) in listContent" :key="index + 'w'" @click.stop="choose(i)">
        <div :style="{ color: choosePer.includes(i.id) ? '#3b84fc' : '' }">{{ i.name }}</div>
        <div>
          <img :style="{ display: choosePer.includes(i.id) ? '' : 'none' }" src="@/assets/images/eva/dui.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tit: {
      type: String,
      default: ''
    },
    num: {
      type: Number
    },
    listContent: {
      type: Array,
      default: () => []
    },
    choosePer: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ico: 0,
      txtColor: 'txtColor'
    }
  },
  methods: {
    // 判断弹出选项列表
    icoIsShow() {
      console.log(this.listContent)
      this.ico = !this.ico
      this.$emit('selBtn', this.num, this.ico)
    },
    // 判断学生是否被选中
    choose(e) {
      console.log(e)
      const arr = this.num
      if (arr !== 1) {
        if (this.choosePer.includes(e.id)) return
        this.choosePer.push(e.id)
      } else {
        this.choosePer.splice(0, 1, e.id)
        this.$emit('col')
      }
      // console.log('判断学生是否被选中', e)
    },
    // 删除学生
    delStu(e) {
      // console.log('删除学生', e)
      const i = this.choosePer.indexOf(e)
      this.choosePer.splice(i, 1)
    },
    // 此方法在父元素中被调用
    fuClick() {
      this.ico = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.txtColor {
  color: #3b84fc;
}
.backPage {
  background-color: aquamarine;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  // z-index: 200;
}
.list {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  max-height: 220px;
  overflow-y: scroll;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 8px;
  .ol {
    height: 40px;
    line-height: 40px;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0px 10px;
    display: flex;
    justify-content: space-between;
  }
  // .ol:hover {
  //   background-color: #f3f6f9;
  // }
}
.selcts {
  position: relative;
  display: flex;
  box-sizing: border-box;
  // padding: 0px 15px;
  padding-right: 15px;
  z-index: 2;
  font-size: 12px;
  // background-color: #eef0f3;
  .ico {
    width: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .choosePerCon {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: scroll;
    .choosePerTxt {
      height: 30px;

      flex-shrink: 0;
      background-color: #eef0f3;
      margin: 2px 3px;
      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>
