<template>
  <div class="meta-header-wrap" :style="'height:' + height + 'vw'">
    <div class="header-title">
      <svg-icon
        :icon-class="'返回'"
        class="icon"
        color="#666"
        @click="backClick"
      ></svg-icon>
      <div class="content" @click.stop="titleClick">
        <slot name="title"></slot>
      </div>
      <div class="hander-handle-filter">
        <!-- <svg-icon
          class="icon"
          :icon-class="'筛选'"
          @click.stop="handleFilterClick"
        ></svg-icon> -->
        <slot name="filter"></slot>
      </div>
      <div class="header-handle" v-if="handleList && handleList.length">
        <van-popover v-model:show="showHandle" :offset="[0, 20]">
          <ul class="meta-header-box">
            <li
              v-for="(item, index) in handleList"
              :key="index"
              @click.stop="handleClick(item, index)"
            >
              <div v-if="item.type == 'button'">{{ item.name }}</div>
              <svg-icon
                v-if="item.type == 'icon'"
                :icon-class="item.name"
                class="meta-header-handleicon"
              ></svg-icon>
            </li>
          </ul>
          <template #reference>
            <div class="icon" type="primary">
              <svg-icon :icon-class="'更多'"></svg-icon>
            </div>
          </template>
        </van-popover>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MetaHeader",
  props: {
    height: {
      type: Number,
      default: 11.7,
    },
    handleList: {
      type: Array,
      default: () => {
        return [
          // {
          //   name: "添加",
          //   id: 0,
          //   type: "button",
          // },
          // {
          //   name: "提案申请",
          //   id: 1,
          //   type: "icon",
          // },
        ];
      },
    },
  },
  data() {
    return {
      showHandle: false,
    };
  },
  methods: {
    handleClick(item, index) {
      this.$emit("metaHeader-handleClick", { item, index });
    },
    backClick() {
      this.$emit("metaHeader-backClick");
    },
    titleClick() {
      this.$emit("metaHeader-titleClick");
    },
  },
};
</script>
<style lang="scss" scoped>
.meta-header-wrap {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; // tab组件层级比较高，最低设置成9可以提高层级
  .header-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    font-size: 5vw;
    font-weight: 600;
    border-bottom: 0.1vw solid #dcdcde;
    .icon {
      margin: 0 4.26vw;
    }
  }
  .header-handle,
  .hander-handle-filter {
    width: 5vw;
    height: 100%;
    background-color: #fff;
    margin: 0 4.26vw;
    .icon {
      transform: translateY(50%);
    }
  }
  .icon {
    width: 5vw;
    height: 5vw;
  }
  .content {
    width: calc(100% - 16.26vw);
    text-align: left;
  }
}
.meta-header-box {
  width: 22vw;
  padding-left: 5px;
  li {
    margin-bottom: 5px;
    &:last-child {
      margin: 0;
    }
  }
}
:deep svg.meta-header-handleicon {
  width: 5vw;
  height: 5vw;
}
</style>
