<template>
   <van-popup 
    v-model="showAction"
    round 
    class="more-action"
    position="bottom"
  >
    <van-grid :column-num="3" :gutter="10" :border="false">
      <van-grid-item 
        v-for="({icon, text, action}, index) in menuList"
        :key="index"
        icon="photo-o"
        :text="text"
        @click="actionHandler(action)"
        >
        <template #icon>
          <common-svg :name="icon" :width="'44px'" :height="'44px'"></common-svg>
        </template>
      </van-grid-item>
    </van-grid>
    <van-button block round @click="cancel">取消</van-button>
  </van-popup>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue, Emit, Inject, Model } from 'vue-property-decorator';
import { ChainStatus } from '@/const/enum';
import { ChainStatusStr } from '@/const/constants';
@Component({
  name: 'MoreAction',
  components: {
  },
})
export default class MoreAction extends Vue {
  @PropSync('show', { type: Boolean, required: true })
  private showAction!: boolean;
  @Prop ({ type: Array, default: () => []})
  private menuList!: any[];
  private actionHandler(action: any) {
    this.showAction = false;
    action();
  }
  @Emit('cancel')
  private cancel() {
    this.showAction = false;
  }
}
</script>
<style scoped lang="scss">
  
</style>
