<template>
  <van-popup v-model="showAction" round class="more-action" position="bottom">
    <div @click="handleClickClose" class="arrow-down">
      <common-svg name="quxiao2x" width="40px"></common-svg>
    </div>
    <div class="action-title" v-if="title">
      <van-image
        class="icon"
        :src="iconSrc || require('@/assets/defaulttemplate.png')"
        round
      />
      <div>
        <div class="title-text">{{ title }}</div>
        <div class="update-time">更新于 {{ date | formatTime }}</div>
      </div>
    </div>
    <div>
      <div
        class="action-item"
        v-for="({ icon, text, callback }, index) in menuList"
        :key="index"
        @click="actionHandler(callback)"
      >
        <common-svg :name="icon" width="20px" height="20px"></common-svg>
        <p class="text">{{ text }}</p>
      </div>
    </div>
    <div class="btn-cancel" @click="cancel">取消</div>
  </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';
import filters from '@/filter/filters';

@Component({
  name: 'MoreAction',
  components: {},
  filters: {
    formatTime: (v: number) => {
      return filters.timeFormat(v, 'yyyy-MM-dd');
    },
  },
})
export default class MoreAction extends Vue {
  @PropSync('show', { type: Boolean, required: true })
  private showAction!: boolean;

  @Prop({ type: Array, default: () => [] })
  private menuList!: any[];

  @Prop({ type: String }) iconSrc!: string;
  @Prop({ type: String }) title!: string;
  @Prop({ type: Number, default: () => new Date('1998-01-4').getTime() / 1000 })
  date!: Date;

  @Emit('cb')
  private actionHandler(action: any) {
    this.showAction = false;
    return action;
  }

  @Emit('cancel')
  private cancel() {
    this.showAction = false;
  }

  private handleClickClose() {
    this.showAction = false;
  }
}
</script>
<style scoped lang="scss">
.more-action {
  .arrow-down {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 31px;
    margin-bottom: 15px;
  }
  .action-item {
    display: flex;
    align-items: center;
    height: 44px;
    margin-left: 19px;
    .text {
      margin-left: 21px;
    }
  }
  .action-title {
    display: flex;
    height: 33px;
    margin: 0 16px;
    margin-bottom: 15px;
    text-align: left;
    .icon {
      width: 28px;
      height: 28px;
      margin-right: 12px;
    }
    .title-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #353535;
    }
    .update-time {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #b6b5ba;
    }
  }
  .btn-cancel {
    border-top: 1px solid #cdcdcd;
    text-align: center;
    line-height: 50px;
    height: 50px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #b6b5ba;
  }
}
</style>
