<script lang="ts" setup>
import { ref, reactive, onMounted, defineProps, watchEffect, unref } from "vue";
interface props {
  list?: any[];
  top?: string;
  isShow?: boolean;
  color?: string;
  background?: string;
  tag?: boolean;
  type?: string;
}
const {
  list = [],
  top = "25px",
  isShow = false,
  color = "#F18301",
  background = "#FDF2E5",
  tag = false,
  type = "",
} = defineProps<props>();
const tabList = ref([]);
const popupList = ref([])
watchEffect(() => {
  if (list.length > 3) {
    tabList.value = JSON.parse(JSON.stringify(list)).splice(0, 3);
    popupList.value = JSON.parse(JSON.stringify(list)).splice(3);
  } else {
    tabList.value = list;
  }
  // list.forEach((item,index) => {
  //   if(index < 4) {
  //     tabList.value.push(item)
  //   }
  // })
  // isShowPopup.value = unref(isShow)
});
const toPop = () => {
  isShowPopup.value = false;
};
const emit = defineEmits(["onList"]);
const isShowPopup = ref(false);
const chosePop = () => {
  isShowPopup.value = !isShowPopup.value;
};
const toDetail = (e) => {
  emit("onList", e);
};
</script>
<template>
  <div class="popup-warp">
    <div class="zhezhao" @click.stop="toPop" v-if="isShowPopup"></div>
    <div class="tag-content">
      <div>
        <div v-if="tabList.length > 0" class="tag-content-item">
          <div v-if="type != '1'" class="tag-content-item">
            <div
              v-for="(item, index) in tabList"
              :key="index"
              class="tag-item"
              @click="toDetail(item)"
            >
              {{ item.name }}
            </div>
            <div v-if="list.length > 3 || type == '1'" class="cursor img-active" @click.stop="chosePop">+{{ list.length - 3 }}</div>
          </div>
          
        </div>
        <div v-else>-</div>
      </div>
      <div class="popup-content" :style="{ top: top }" v-if="isShowPopup">
        <div
          v-for="(item, index) in popupList"
          :key="index"
          class="popup-content-item"
          :class="[
            { blue: index % 3 === 0 },
            { green: index % 3 === 1 },
            { yellow: index % 3 === 2 },
          ]"
          :style="{
            background: !tag ? background : '',
            color: !tag ? color : '',
          }"
          @click="toDetail(item)"
        >
          {{ item.name }}
        </div>
        <!-- </el-row> -->
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.popup-content {
  position: absolute;
  left: 0;
  background: #fff;
  padding: 10px;
  padding-bottom: 0;
  z-index: 11;
  /* padding-right: 0; */
  max-width: 240px;
  max-height: 95px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  ::v-deep .el-row {
    padding-left: 10px;
    margin-right: 0 !important;
  }
  .popup-content-item {
    min-height: 20px;
    border-radius: 2px;
    line-height: 18px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 1px 6px;
    cursor: pointer;
    box-sizing: border-box;
    word-break: break-all;
  }
}
.popup-content :last-child.popup-content-item {
  margin-right: 0;
}
.zhezhao {
  background: #f00;
  height: calc(100vh);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.blue {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}
.green {
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
}
.yellow {
  color: var(--el-color-warning);
  background: var(--el-color-warning-light-9);
}

.tag-content {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  display: flex;
  position: relative;
  .tag-content-item {
    display: flex;
    flex-wrap: wrap;
  }
  .tag-item {
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    margin-right: 8px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; // 默认不换行；
    margin-bottom: 10px;
  }
  .tag-item:nth-child(1) {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
  .tag-item:nth-child(2) {
    background: var(--el-color-success-light-9);
    color: var(--el-color-success);
  }
  .tag-item:nth-child(3) {
    background: #F3EEFB;
    color: #9058DB;
  }
}
.portItem {
  background: #fff;
  border: 1px solid #f3f3f3;
  color: #0095ff;
  // cursor: pointer;
}
.portItem {
  span:hover {
    opacity: 0.75;
  }
}

.cursor:hover {
  cursor: pointer;
}
.cuspoint {
  // cursor: pointer;
}
.img-active {
  height: 20px;
  padding: 0px 8px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  border-radius: 4px;
}
.cuspoint:hover,
.img-active:hover {
  opacity: 0.75;
}
</style>
