<template>
  <div class="local_popver">
    <div class="local_title" @click="showClick">
      <span>
        {{ titles.length ? title : placeholder || "请选择" }}
        <el-tag v-if="titles.length > 1">+ {{ titles.length - 1 }}</el-tag>
      </span>
      <el-icon :size="14" color="#c0c4cc" style="padding-top: 0px;vertical-align: middle;">
        <arrow-up v-show="card" />
        <arrow-down v-show="!card" />
      </el-icon>
    </div>
    <el-card v-show="card" style="position: absolute;z-index:10">
      <div style="width: 300px">
        <el-checkbox-group v-model="titles">
          <el-checkbox v-for="item in list" :key="item.id" :label="item.name">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src

import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
// import config from "@/config/index";
export default {
  name: "Channel",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    placeholder: String,
  },
  data() {
    return {
      titles: [],
      card: false,
    };
  },
  watch:{
      titles(){
          this.$emit("changeEvent", this.titles)
      }
  },
  mounted() {},
  computed: {
    title() {
      if (this.titles.length > 1) return this.titles[0] + "";
      return this.titles.join(",");
    },
  },
  methods: {
    onSubmit() {},
    showClick() {
      this.card = !this.card;
      if (!this.card) return;
      document.body.addEventListener("click", this.showClickFunc, true);
    },
    showClickFunc(e) {
      let classnames = [];
      for (let i = 0; i < e.path.length; i++) {
        const v = e.path[i];
        const classList = v.classList || [];
        for (let o = 0; o < classList.length; o++) {
          const p = v.classList[o];
          classnames.push(p);
        }
      }
      classnames = classnames.join(",");
      if (/card__body/g.test(classnames)) return;
      this.card = false;
      document.body.removeEventListener("click", this.showClickFunc, true);
    },
  },
  components: { ArrowDown, ArrowUp },
};
</script>

<style scoped>
.local_popver {
  position: relative;
}
.local_title {
  padding: 3px 10px;
  cursor: pointer;
}
</style>
