<template>
  <div class="qa">
    <div class="qa-payment block">
      <div class="title">{{ $t("post.questionMode") }}:</div>
      <el-radio
        :value="question.paymentType"
        label="free"
        @input="value => $emit('paymentTypeChange', value)"
      >{{ $t("post.freeWatch") }}</el-radio>
      <el-radio
        :value="question.paymentType"
        label="paid"
        @input="value => $emit('paymentTypeChange', value)"
      >{{ $t("post.paidWatch") }}</el-radio>
    </div>
    <div class="qa-anonymous block">
      <div class="title">{{ $t("post.anonymous") }}:</div>
      <el-switch
        :value="question.isAnonymous"
        active-color="#1878F3"
        @input="value => $emit('isAnonymousChange', value)"
      />
    </div>
    <div v-show="canSetOnlooker" class="qa-onlooker block">
      <div class="title">{{ $t("post.onLooker") }}:</div>
      <el-switch
        :value="question.isOnlooker"
        active-color="#1878F3"
        @input="value => $emit('isOnlookerChange', value)"
      />
      <span
        v-show="siteOnlookerPrice && siteMasterScale && siteUserScale"
        class="tip"
      >
        <span>{{ "他人围观需付费 " + siteOnlookerPrice + " 元" }}</span>
        <span>{{
          `（你得 ${((siteOnlookerPrice * siteUserScale) / 2).toFixed(2)} 元
          ，回答者得 ${((siteOnlookerPrice * siteUserScale) / 2).toFixed(2)} 元
          ，平台得 ${(siteOnlookerPrice * siteMasterScale).toFixed(2)} 元）`
        }}</span>
      </span>
    </div>
    <div class="qa-answerer block">
      <div class="title">
        <span>{{ $t("post.questionHim") }}:</span>
        <span class="select-answerer" @click="showQACaller = true">
          {{
            Object.keys(beAskedUser).length > 0
              ? $t("post.changeBeAskedUser")
              : $t("post.addBeAskedUser")
          }}
        </span>
      </div>
      <div v-show="Object.keys(beAskedUser).length > 0" class="be-asked-user">
        <avatar-component :author="beAskedUser" :size="50" round>
          {{ $t("topic.activeAt") }} {{ timerDiff(beAskedUser.updatedAt) }}{{ $t("topic.before") }}
        </avatar-component>
      </div>
    </div>
    <qa-caller
      v-if="showQACaller"
      @close="showQACaller = false"
      @selectedQaCaller="selectedQaCaller"
    />
  </div>
</template>

<script>
import timerDiff from '@/mixin/timerDiff';

export default {
  name: 'EditorQa',
  mixins: [timerDiff],
  props: {
    question: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      beAskedUser: {},
      showQACaller: false
    };
  },
  computed: {
    forums() {
      return this.$store.state.site.info.attributes || {};
    },
    canSetOnlooker() {
      return this.forums
        && this.forums.other
        && this.forums.other.can_be_onlooker
        ? this.forums.other.can_be_onlooker
        : false;
    },
    siteOnlookerPrice() {
      return this.forums && this.forums.set_site
        ? this.forums.set_site.site_onlooker_price
        : '';
    },
    siteMasterScale() {
      return this.forums && this.forums.set_site
        ? this.forums.set_site.site_master_scale / 10
        : '';
    },
    siteUserScale() {
      return this.siteMasterScale ? 1 - this.siteMasterScale : '';
    }
  },
  watch: {
    question: {
      handler(val) {
        if (val.beUser) {
          this.beAskedUser = val.beUser;
        }
      },
      deep: true,
      immediate: true
    }
  },
  // TODO beAskedUser 回显
  mounted() {
    console.log(this.forums, 'forums');
    console.log('被提问信息', this.question);
    if (this.question.beUser) {
      this.beAskedUser = this.question.beUser;
    }
    console.log(this.beAskedUser);
  },
  methods: {
    selectedQaCaller(user) {
      this.beAskedUser = user;
      this.showQACaller = false;
      this.$emit('beUserChange', user);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";

.qa {
  > .block {
    margin-top: 20px;
    > .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #6d6d6d;
      > .select-answerer {
        font-weight: normal;
        color: $color-blue-base;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    > .be-asked-user {
      min-width: 230px;
      height: 70px;
      padding: 0 11px;
      display: inline-flex;
      align-items: center;
      background: #f4f5f6;
      border: 1px solid #ededed;
      border-radius: 2px;
    }
    > .tip {
      font-size: 14px;
      margin-left: 15px;
      color: #6d6d6d;
      span:last-child {
        color: #cccccc;
      }
    }
  }
}
</style>
