<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)">
          <a :href="i.href || 'javascript:;'">
            <p class="icon">
              <span class="iconfont" :class="i.icon"></span>
            </p>
            <p class="name">{{i.name}}</p>
          </a>
        </div>
      </div>
      <div class="cancel" @click="hide">取消</div>
    </div>
  </YohoActionSheet>
</template>

<script>
import version from 'utils/version';
import {createNamespacedHelpers} from 'vuex';
const {mapState: mapArticleState, mapActions: mapArticleActions} = createNamespacedHelpers('article');
const {mapActions: mapUserActions} = 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-edit',
          name: '编辑',
          fnName: 'actionEdit'
        },
        {
          icon: 'icon-delete',
          name: '删除',
          fnName: 'actionDelete'
        }
      ]
    };
  },
  computed: {
    ...mapArticleState(['authorStates'])
  },
  methods: {
    ...mapArticleActions(['reportArticle', 'deleteArticle']),
    ...mapUserActions(['followUser']),
    show(article, uid, index) {
      this.index = index || 0;
      article = article || {};

      const authorState = this.authorStates[`${article.authorUid}-${article.authorType}`] || article;

      this.list[0].hide = authorState.hasAttention !== 'Y';

      this.list[2].href = `?openby:yohobuy＝{"action":"go.editPost","params":{"articleId":"${article.articleId}"}}`;
      this.list[2].hide = article.sort === 2 || version(this.$yoho.appVersion, '6.9.5') < 0 || article.isAuthor !== 'Y';
      this.list[3].hide = article.isAuthor !== 'Y';
      this.list = [...this.list];

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

      this.followUser({
        followUid: authorUid,
        status: 1,
        authorType
      }).then(res => {
        if (res.code === 200) {
          this.$emit('on-follow', this._article);
        }
      });
    },
    actionEdit() {
      this.$emit('on-edit', this._article);
    },
    actionDelete() {
      this.$createDialog({
        type: 'confirm',
        title: '确认删除该文章？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;' // eslint-disable-line
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;' // eslint-disable-line
        },
        onConfirm: () => {
          this.deleteArticle(this._article).then(res => {
            if (res.code === 200) {
              this.$emit('on-delete', this.index);
            } 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 0 20px 60px;
    border-bottom: 1PX solid #d7d7d7;
    display: flex;
  }

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

    .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>