<template>
  <div class="selcts" @click.stop="icoIsShow">
    <!-- <div class="backPage" v-if="!ico" @click="fuClick1"></div> -->
    <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>
    </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 listCont" :key="index + 'w'" @click="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: 1,
      txtColor: 'txtColor'
    }
  },

  methods: {
    // 判断弹出选项列表
    icoIsShow() {
      this.ico = !this.ico
    },
    // 判断学生是否被选中
    cho(e) {
      this.choose[0] = e.id
    },
    // 删除学生
    // delStu() {
    //   this.choose = ''
    // },

    // 此方法在父元素中被调用
    fuClick() {
      this.ico = 'false'
    }
  }
}
</script>

<style lang="scss" scoped>
.txtColor {
  color: blue;
}
.backPage {
  background-color: aquamarine;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  // z-index: 200;
}
.selcts {
  position: relative;
  display: flex;
  box-sizing: border-box;
  // padding: 0px 15px;
  padding-right: 15px;
  font-size: 12px;
  .ico {
    width: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .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: 100;
    border-radius: 8px;
    .ol {
      height: 40px;
      line-height: 40px;
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0px 10px;
      display: flex;
      justify-content: space-between;
    }
    // .ol:hover {
    //   background-color: #f3f6f9;
    // }
  }
  .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>
