<template>
  <message :title="$t('report.reportTitle')" @close="$emit('close')">
    <div class="reportcontainer">
      <div class="reportselect">
        <el-radio-group v-model="radio" @change="select">
          <el-radio label="advertisingRubbish">{{
            this.$t("report.advertisingRubbish")
          }}</el-radio>
          <el-radio label="illegalContent">{{
            this.$t("report.illegalContent")
          }}</el-radio>
          <el-radio label="maliciousIrrigation">{{
            this.$t("report.maliciousIrrigation")
          }}</el-radio>
          <el-radio label="repeatPost">{{
            this.$t("report.repeatPost")
          }}</el-radio>
          <el-radio label="other" class="otherr">{{
            this.$t("report.otherreason")
          }}</el-radio>
        </el-radio-group>
      </div>
      <div class="other">
        <el-input
          v-if="isOther"
          v-model="otherReasonValue"
          type="textarea"
          :rows="5"
          :disabled="!isOther"
          :placeholder="$t('report.enterOtherReason')"
        />
      </div>
    </div>
    <div class="confirmbtn">
      <div class="allbtn">
        <el-button
          class="comfirm"
          type="small"
          @click="reportConfirmClick(type)"
        >{{ this.$t("report.confirm") }}</el-button>
        <el-button class="cancel" type="small" @click="reportCancelClick">{{
          this.$t("report.cancel")
        }}</el-button>
      </div>
    </div>
  </message>
</template>

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

export default {
  name: 'TopicReport',
  mixins: [handleError],
  props: {
    threadId: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 0
    },
    commentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      radio: '',
      inputInfo: '',
      otherReasonValue: '',
      currentReport: '',
      isOther: false,
      reportData: [
        {
          // 举报理由
          value: 'advertisingRubbish',
          name: '广告垃圾'
        },
        {
          value: 'illegalContent',
          name: '违规内容'
        },
        {
          value: 'maliciousIrrigation',
          name: '恶意灌水'
        },
        {
          value: 'repeatPost',
          name: '重复发帖'
        },
        {
          value: 'other',
          name: '其他'
        }
      ]
    };
  },
  computed: {
    currentLoginId() {
      const userId = this.$store.getters['session/get']('userId');
      return parseInt(userId, 10);
    }
  },
  mounted() {
    this.otherReasonValue = '';
  },
  methods: {
    select(val) {
      this.currentReport = val;
      this.isOther = this.currentReport === 'other';
    },
    // 确认举报
    reportConfirmClick(type) {
      if (!this.currentReport) {
        this.$message.error(this.$t('report.pleaseClickReasons'));
        return;
      }
      let reason = '';
      if (this.currentReport === 'other') {
        if (!this.otherReasonValue) {
          this.$message.error(this.$t('report.enterOtherReason'));
          return;
        }
        reason = this.otherReasonValue;
      } else {
        this.reportData.forEach(item => {
          if (item.value === this.currentReport) {
            reason = item.name;
          }
        });
      }
      const params = {
        _jv: {
          type: 'reports'
        },
        user_id: this.currentLoginId,
        thread_id: parseInt(this.threadId),
        type,
        reason: `${reason}`
      };
      if (type === 2) {
        params.post_id = parseInt(this.commentId);
      }
      this.$store.dispatch('jv/post', params).then(
        res => {
          if (res._jv) {
            this.$emit('close');
            this.$message.success(this.$t('report.reportSucceed'));
          }
        },
        e => this.handleError(e)
      );
    },
    // 取消举报
    reportCancelClick() {
      this.otherReasonValue = '';
      this.currentReport = '';
      this.$emit('close');
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";

.reportcontainer {
  margin: 40px 40px 0 40px;
  .reportselect {
    // margin: 40px 40px 0 40px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    .otherr {
      position: absolute;
      left: 0;
      top: 59px;
    }
  }
  .other {
    margin-top: 20px;
    padding-bottom: 45px;
    ::v-deep .el-textarea {
      margin-top: 20px;
    }
    ::v-deep .el-textarea__inner {
      color: black;
      background: #f4f5f6;
      margin-top: 20px;
      font-family: "Microsoft Ya Hei";
    }
  }
}
.confirmbtn {
  background: #f5f6f7;
  display: flex;
  justify-content: flex-end;
  .allbtn {
    margin: 10px 19px;
  }
  .comfirm {
    width: 70px;
    height: 35px;
    background: #1878f3;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    &:hover {
      background: $color-blue-deep;
    }
  }
  .cancel {
    width: 70px;
    height: 35px;
    border-radius: 2px;
    margin-left: 5px;
  }
}

::v-deep .el-radio__label {
  font-size: 16px;
}
::v-deep .el-radio-group {
  padding-bottom: 19px;
}
</style>
