<template>
  <van-popup
    v-if="showAllPeople"
    v-model="showAllPeople"
    round
    safe-area-inset-bottom
    position="bottom"
    duration="0"
    class="selectDialog"
    style="min-height: 40%; max-height: 80%"
  >
    <div class="head">
      <div class="close" @click="showAllPeople = false">关闭</div>
      <div class="title">
        {{ title }}
        <span>{{ allPeople.split(',').length }}</span>
      </div>
      <div class="close" style="visibility: hidden">清空</div>
    </div>

    <div class="content">
      {{ allPeople.replace(/,/g, '，') }}
    </div>
  </van-popup>
</template>

<script>
  export default {
    name: 'LookAllPeople',
    components: {},
    props: {
      title: {
        type: String,
        default: '已选人员',
      },
    },
    data() {
      return {
        showAllPeople: false,
        allPeople: '',
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    methods: {
      showDialog(val) {
        console.log('val: ', val)
        this.allPeople = val
        this.showAllPeople = true
      },
    },
  }
</script>
<style lang="scss" scoped>
  //@import url(); 引入公共css类
  .selectDialog {
    display: flex;
    flex-direction: column;
    .head {
      display: flex;
      height: 44px;
      justify-content: space-between;
      align-items: center;
      .close {
        display: block;
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #8c8c8c;
      }
      .title {
        flex: 1;
        height: 44px;
        text-align: center;
        line-height: 44px;
        font-weight: bold;
        color: #1a1a1a;
        font-size: 17px;
        span {
          padding: 0 6px;
          color: #409eff;
        }
      }
    }

    .content {
      padding: 8px 16px;
      line-height: 24px;
      font-size: 16px;
      text-align: left;
    }
  }
</style>
