<template>
  <div class="qa">
    <div v-if="showAnswer" class="block answer">
      <div class="header">
        <avatar-component :size="40" round :author="question.beUser || {}">
          {{ timerDiff(question.answered_at) + $t("topic.before") }}.. 回答
        </avatar-component>
        <div v-show="question.onlooker_number" class="counter">
          <span>{{ question.onlooker_number + "人阅读" }}</span>
          <span
            v-show="question.onlooker_number > 0"
          >, {{ question.onlooker_number + "人已支付" }}</span>
        </div>
      </div>
      <div
        class="answer-text content-html"
        v-html="$xss(question.content_html)"
      />
      <div
        v-if="question.images && question.images.length > 0"
        v-viewer="{ url: 'data-source' }"
        class="images"
      >
        <el-image
          v-for="(image, index) in question.images"
          :key="index"
          class="image"
          :data-source="image.url"
          :src="image.thumbUrl"
          :alt="image.filename"
          fit="cover"
        >
          <div slot="placeholder" class="image-slot">
            <i class="el-icon-loading" />
          </div>
        </el-image>
      </div>
    </div>
    <div v-if="showAnswerButton" class="block">
      <button @click="showAnswerEditor = true">
        <svg-icon type="question" style="font-size: 15px" />
        <span>{{ $t("topic.answerQuestion") }}</span>
      </button>
      <div v-show="parseFloat(question.price) > 0" class="tip">
        <span>{{ $t("topic.answerCanGet") }}</span>
        <span class="amount">
          ￥{{ (parseFloat(question.price) * siteUserScale).toFixed(2) }}
        </span>
        <span>{{ $t("topic.answerTip") }}</span>
        <span
          class="amount"
        >￥
          {{
            (
              (parseFloat(question.onlooker_unit_price) * siteUserScale) /
              2
            ).toFixed(2)
          }}
        </span>
        <span>{{ $t("post.yuan") }}</span>
      </div>
    </div>
    <div v-if="showOnLookerButton" class="block">
      <button @click="$emit('payForAnswer')">
        <svg-icon type="yuan" style="font-size: 15px" />
        <span>{{
          $t("topic.payAmountCanWatch", {
            amount: question.onlooker_unit_price
          })
        }}</span>
      </button>
    </div>
    <el-dialog
      :title="$t('topic.answerQuestion')"
      :visible.sync="showAnswerEditor"
      destroy-on-close
      width="820px"
    >
      <editor
        editor-style="comment"
        class="edit-answer-editor"
        selector="edit-answer-editor"
        :edit-resource-show="editResourceShow"
        :on-publish="onAnswerPublish"
        :type-information="answerType"
        :post.sync="answer"
        @publish="answerPublish"
      />
    </el-dialog>
  </div>
</template>

<script>
import timerDiff from '@/mixin/timerDiff';
import publishResource from '@/mixin/publishResource';
import postLegalityCheck from '@/mixin/postLegalityCheck';
import handleError from '@/mixin/handleError';
import isLogin from '@/mixin/isLogin';

export default {
  name: 'QaActions',
  mixins: [timerDiff, publishResource, postLegalityCheck, handleError, isLogin],
  props: {
    question: {
      type: Object,
      default: () => {}
    },
    questionUserId: {
      type: [String, Number],
      default: ''
    },
    currentUserId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      answerType: {
        type: 15,
        textLimit: 5000,
        showPayment: false,
        showTitle: false,
        showImage: true,
        showVideo: false,
        showAttached: false,
        showEmoji: true,
        showTopic: false,
        showCaller: true,
        placeholder: '写下我的评论 ...'
      },
      editResourceShow: {
        showUploadImg: false,
        showUploadVideo: false,
        showUploadAttached: false
      },
      answer: { text: '', imageList: [], attachedList: [] },
      onAnswerPublish: false,
      showAnswerEditor: false
    };
  },
  computed: {
    isQuestionUser() {
      return parseInt(this.questionUserId) === parseInt(this.currentUserId);
    },
    isBeAskedUser() {
      return (
        parseInt(this.question.be_user_id) === parseInt(this.currentUserId)
      );
    },
    showAnswer() {
      if (this.question.is_answer === 0) return false;
      else {
        return !(
          !this.isBeAskedUser
          && !this.isQuestionUser
          && this.question.onlookerState === '0'
          && this.question.onlooker_price > 0
        );
      }
    },
    showAnswerButton() {
      return this.isBeAskedUser && this.question.is_answer === 0;
    },
    showOnLookerButton() {
      return (
        !this.isBeAskedUser
        && !this.isQuestionUser
        && this.question.onlooker_unit_price > 0
        && !this.question.onlookerState
        && this.question.is_answer === 1
      );
    },
    forums() {
      return this.$store.state.site.info.attributes || {};
    },
    siteMasterScale() {
      return this.forums && this.forums.set_site
        ? this.forums.set_site.site_master_scale / 10
        : '';
    },
    siteUserScale() {
      return this.siteMasterScale ? 1 - this.siteMasterScale : '';
    }
  },
  methods: {
    closeEditor() {
      this.answer.text = '';
      this.answer.imageList = [];
      this.showAnswerEditor = false;
    },
    answerPublish() {
      if (!this.isLogin()) return;
      if (this.onAnswerPublish) return;
      if (!this.answer.text) {
        return this.$message.warning(this.$t('post.theContentCanNotBeBlank'));
      }
      if (this.answer.text.length > this.answerType.textLimit) {
        return this.$message.warning(this.$t('post.messageLengthCannotOver'));
      }
      this.onAnswerPublish = true;
      const id = this.question._jv.id;
      const answerParams = {
        _jv: {
          type: `answer`,
          links: { self: `questions/${id}/answer` },
          relationships: {}
        },
        content: this.answer.text,
        type: 5
      };
      this.publishPostResource(answerParams, this.answer);
      return this.$store
        .dispatch(`jv/post`, [answerParams, { url: `/questions/${id}/answer` }])
        .then(
          response => {
            this.postLegalityCheck(
              response,
              this.$t('topic.answerPublishSuccess')
            );
            this.$emit('answerPublished');
            this.closeEditor();
          },
          e => this.handleError(e)
        )
        .finally(() => {
          this.onAnswerPublish = false;
        });
    }
  }
};
</script>

<style>
.el-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
}
.el-dialog .el-dialog__body {
  padding: 20px;
}
.el-dialog .el-dialog__title {
  color: #6d6d6d;
  font-size: 16px;
  font-weight: 700;
}
.el-dialog .el-dialog__header {
  padding-bottom: 0;
}
.el-dialog .el-icon-close {
  font-size: 22px;
}
</style>

<style lang="scss" scoped>
.qa {
  .editor-box {
    padding: 20px;
  }
  > .block {
    margin-top: 20px;
    display: block;
    text-align: center;
    &.answer {
      border-radius: 5px;
      padding: 15px;
      background: #f7f7f7;
      text-align: left;
      > .header {
        display: flex;
        justify-content: space-between;
        > .counter {
          color: #8590a6;
        }
      }
      > .answer-text {
        text-align: left;
        margin-top: 15px;
        font-size: 16px;
      }
      > .images {
        margin-top: 15px;
        text-align: left;
        width: 330px;
        > .image {
          cursor: pointer;
          width: 100px;
          height: 100px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    > .tip {
      margin-top: 10px;
      color: #8590a6;
      > .amount {
        color: black;
      }
    }
    > button {
      display: block;
      margin: 0 auto;
      height: 35px;
      padding: 0 20px;
      background: #fa5151;
      color: white;
      line-height: 35px;
      border: none;
      border-radius: 2px;
      > span {
        margin-left: 8px;
      }
    }
  }
}
</style>
