<template>
  <div v-if="hasSlotContent" class="ht-mobile-popover">
    <van-popover
      v-if="hasManageBtn"
      ref="htMobilePopover"
      v-model="showPopover"
      placement="top"
      trigger="click"
      footer-item-mode="footer-item-mode"
      :class="{ 'right-margin': hasFirstBtn }"
    >
      <slot name="genManage"></slot>
      <template #reference>
        <van-button
          v-if="btnType == 'button'"
          icon="ellipsis"
          type="default"
          class="form-list__more--btn"
        >
          更多
        </van-button>
        <div
          v-if="btnType == 'text'"
          class="footer-item"
          :class="{ 'right-line': hasFirstBtn }"
        >
          <i class="icon-daohanglan-gengduo footer-btn--icon"></i>
          <span class="footer-item--text">更多</span>
        </div>
      </template>
    </van-popover>
    <slot v-if="hasFirstBtn" name="genFirstBtn"></slot>
  </div>
</template>
<script>
  export default {
    name: 'HtMobilePopover',
    componentName: 'HtMobilePopover',
    props: {
      btnType: {
        type: String,
        default: 'button',
      },
      isFilter: {
        // 是否过滤
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        showPopover: false,
        hasManageBtn: false,
        hasFirstBtn: false,
        hasSlotContent: false,
      }
    },
    beforeUpdate() {
      this.hasSlotContent = this.checkForSlotContent()
    },
    created() {
      this.hasSlotContent = this.checkForSlotContent()
    },
    methods: {
      checkForSlotContent() {
        let brnAll = []
        let brnRight = []
        let brnLeft = []
        if (this.$slots.genFirstBtn && this.$slots.genFirstBtn.length) {
          this.$slots.genFirstBtn.forEach((item) => {
            if (
              item &&
              item.data &&
              item.data.attrs &&
              item.data.attrs['footer-item-btn']
            ) {
              const btnId = item.data.attrs['footer-item-btn']
              if (brnAll.length >= 2) {
                item.data['class'] = 'ht-mobile-popover-btn-hidden'
              }
              if (brnRight.length < 2) {
                brnRight.push(btnId)
              }
              brnAll.push(btnId)
            }
          })
          this.hasFirstBtn = true
        }
        if (this.$slots.genManage && this.$slots.genManage.length) {
          this.$slots.genManage.forEach((item) => {
            if (
              item &&
              item.data &&
              item.data.attrs &&
              item.data.attrs['footer-item-btn']
            ) {
              const btnId = item.data.attrs['footer-item-btn']
              if (brnRight.includes(btnId)) {
                item.data['class'] = 'ht-mobile-popover-btn-hidden'
              } else {
                brnLeft.push(btnId)
              }
            }
          })

          if (this.isFilter) {
            if (brnLeft.length > 0) {
              this.hasManageBtn = true
            } else this.hasManageBtn = false
          } else this.hasManageBtn = true
        }
        return this.hasFirstBtn || this.hasManageBtn
      },
    },
  }
</script>
<style lang="scss">
  .van-popover__content {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    .footer-item {
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
    }
  }
  .footer-btn--update {
    padding: 6px 0;
  }
  .form-list__more--btn {
    height: 44px;
    border-radius: 8px;
    width: 100%;
    min-width: 90px;
  }
  .ht-mobile-popover {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
    .van-popover__wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right-margin {
      margin-right: 12px;
    }
  }
  .form-list--content
    .van-cell
    .field-wrap
    .footer-wrap
    .right-line:last-child:after {
    width: 1px !important;
  }
  .ht-mobile-popover-btn-hidden {
    display: none !important;
  }
</style>
