<template lang="pug">
    view.menu-popup(v-if="menus && menus.length && menus.length>0 && isPopup" type="bottom" :style="{top: `${popupTop}px`, left: `${popupLeft}px`}")
      view.menu-popup-panel
        view.menu-item(v-for="(item, index) in menus" @click="onClick(item)" :class="(index==0? `first`: (index==(menus.length-1)? `last`: `center`))" :key="index" :style="{width: (width || 'auto')}")
          image(:src="item.icon")
          text {{item.text}}
      view.menu-popup-footer
        view.menu-popup-footer-icon
</template>

<script lang="ts">
import {Vue, Component, Watch, Prop} from 'vue-property-decorator';

@Component
export default class MenuPopup extends Vue {
  @Prop() public menus!: [{text: string, name: string, icon: string}];
  @Prop() public width!: string;
  private isPopup: boolean = false;
  private popupTop: number = 15;
  private popupLeft: number = 100;

  onClick(item: any) {
    console.log("select menu: " + JSON.stringify(item))
    this.$emit("action", item)
    this.isPopup = false;
  }

  close() {
    this.isPopup = false;
  }

  open(parent: any, selector: string) {
    if(!parent[0]) {
      return;
    }

    uni.createSelectorQuery().in(parent[0]).select(selector).boundingClientRect((data: any) => {
      if (!data) {
        return;
      }

      console.log(`boundingClientRect=====>>> ${JSON.stringify(data)}`)
      this.popupLeft = data.left;
      this.popupTop = data.top - data.height;
    }).exec()

    this.isPopup = true;
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/styles/h5-unit';
@import '../../static/styles/base';


.menu-popup {
  position: absolute;
  z-index: 99999;
  .menu-popup-panel {
    background-color: transparent;

    .menu-item {
      min-width: $px153;
      flex-direction: row;
      align-items: center;
    }
    .first {
      width: $px167;
      height: $px50;
      border-top-right-radius: $px18;
      border-top-left-radius: $px18;
      background-color: #FFFFFF;
      display: flex;
      border-bottom-style: solid;
      border-bottom-width: $px1;
      border-bottom-color: rgba(0,0,0,.2);
    }

    .center {
      width: $px167;
      height: $px50;
      border-top-right-radius: $px0;
      border-top-left-radius: $px0;
      border-bottom-right-radius: $px0;
      border-bottom-left-radius: $px0;
      background-color: #FFFFFF;
      display: flex;
      border-bottom-style: solid;
      border-bottom-width: $px1;
      border-bottom-color: rgba(0,0,0,.2);
    }

    .last {
      width: $px167;
      height: $px50;
      border-bottom-right-radius: $px18;
      border-bottom-left-radius: $px18;
      background-color: #FFFFFF;
      display: flex;
    }

    image {
      width: $px25;
      height: $px25;
      margin-left: $px10;
    }

    text {
      font-size: $px16;
      color: #000000;
      line-height: $px50;
      margin-left: $px10;
      font-weight: 400;
      opacity: 0.9;
    }
  }

  .menu-popup-footer {
    height: $px10;
    .menu-popup-footer-icon {
      width: $px1;
      height: 0;
      border-width: $px9;
      border-style: solid;
      border-color:  #FFFFFF  transparent transparent transparent;
      position: relative;
      margin-left: $px50;
      margin-right: auto;
    }
  }
}
</style>
