<template>
  <YohoActionSheet :transfer="transfer" class="more-action-sheet" ref="actionSheet">
    <div class="action-wrap">
      <div class="action-list">
        <div class="action-item" v-for="(i, index) in list" :key="index" v-show="!i.hide" @click="onClick(i.fnName)">
          <p class="icon">
            <span class="iconfont" :class="i.icon"></span>
          </p>
          <p class="name">{{i.name}}</p>
        </div>
      </div>
      <div class="cancel" @click="hide">取消</div>
    </div>
  </YohoActionSheet>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';
const articleStore = createNamespacedHelpers('article');
const userStore = createNamespacedHelpers('user');

export default {
  name: 'MoreActionSheetPage',
  props: {
    transfer: Boolean
  },
  data() {
    return {
      list: [
        {
          icon: 'icon-fav-cancel',
          name: '取消关注',
          fnName: 'actionCancelFav'
        },
        {
          icon: 'icon-warn',
          name: '举报',
          fnName: 'actionrReport'
        },
        {
          icon: 'icon-delete',
          name: '删除',
          fnName: 'actionDelete'
        }
      ]
    };
  },
  methods: {
    ...articleStore.mapActions(['reportArticle', 'deleteArticle']),
    ...userStore.mapActions(['followUser']),
    show(params, uid, index) {
      this.index = index;
      params = params || {};

      this.list[0].hide = params.hasAttention !== 'Y';
      this.list[2].hide = params.authorUid !== uid || params.authorUid !== 1;
      this.list = [...this.list];

      this._params = params;
      this.$refs.actionSheet.show();
    },
    hide() {
      this.$refs.actionSheet.hide();
    },
    actionrReport() {
      this.$createToast({
        txt: '举报成功',
        type: 'correct',
        time: 1000
      }).show();
      this.reportArticle(this._params);
    },
    actionCancelFav() {
      let {authorUid, authorType} = this._params;
      return this.$emit('on-follow', this._params);

      this.followUser({
        followUid: authorUid,
        status: false,
        authorType
      }).then(res => {
        if (res.code === 200) {
          this.$emit('on-follow', this._params);
        }
      });
    },
    actionDelete() {
      this.$createDialog({
        type: 'confirm',
        title: '确认删除该文章？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          this.deleteArticle(this._params.articleId).then(res => {
            if (res.code === 200) {
              this.$emit('on-delete', this._params.articleId);
            } else {
              this.$createToast({
                type: 'warn',
                time: 1000,
                txt: '删除失败了'
              }).show();
            }
          });
        }
      }).show()
    },
    onClick(name) {
      this[name] && this[name]();
      this.hide();
    }
  }
};
</script>


<style scoped lang="scss">
/deep/ .yoho-popup {
  &:after,
  > .yoho-popup-container {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.action-wrap {
  color: #444;

  .action-list {
    width: 100%;
    padding: 20px 40px;
    border-bottom: 1PX solid #d7d7d7;
    display: flex;
    justify-content: space-around;
  }

  .action-item {
    width: 128px;
    padding: 12px 0;

    .icon {
      width: 88px;
      height: 88px;
      line-height: 92px;
      border-radius: 50%;
      margin: 0 auto 16px;
      background-color: #fff;
      text-align: center;
      overflow: hidden;
    }

    .iconfont {
      font-size: 48px;
      color: #b0b0b0;
    }

    .name {
      font-size: 24px;
      text-align: center;
      transform: scale(0.9, 0.9);
      opacity: 0.65;
    }
  }

  .cancel {
    line-height: 88px;
    font-size: 32px;
    letter-spacing: 0.05px;
    text-align: center;
  }
}
</style>