<template>
  <div class="report-page">
    <template v-if="!isSubmit">
      <div class="reason-choose__box">
        <p class="report-name report-reason">请选择投诉原因</p>
        <ul class="report-reason__choose">
          <template v-for="(r, index) in reportList">
            <li class="reason"
                :key="index"
                @click="current = index">{{r.name}}
              <img v-show="current === index"
                   src="../assets/report-success.png"
                   alt="">
            </li>
          </template>
        </ul>
        <p class="report-name report-des">投诉原因描述</p>
        <div class="des-input">
          <input type="text"
                 placeholder="请输入投诉内容（选填）"
                 v-model="content">
        </div>
        <p class="report-name report-phone">请留下您的联系方式，方便我们核实情况</p>
        <div class="des-input">
          <input type="tel"
                 placeholder="请输入您的手机号码（选填）"
                 maxlength="11"
                 v-model="phone">
        </div>
        <div class="submit-box">
          <button class="submit"
                  @click="toSubmit"
                  :disabled="submiting">{{submiting ? "提交中..." : "确认提交"}}</button>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="report-success">
        <img src="../assets/report-success.png"
             alt="">
        <div class="notice">
          <p class="strong-text">投诉已提交</p>
          <p class="normal-text">对于您反馈的内容，我们会尽快核实并处理，感谢您的支持！</p>
        </div>
        <div class="submit-box">
          <button class="submit"
                  @click="backToReader">关闭</button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { getReportList, uploadReport } from "@/api";

export default {
  data() {
    return {
      isSubmit: false,
      submiting: false,
      current: null,
      content: "",
      phone: "",
      reportList: []
    };
  },
  methods: {
    toSubmit() {
      const phone_reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (this.current === null) {
        this.$Toast("请选择投诉原因！");
        return;
      }
      if (this.phone && !phone_reg.test(this.phone)) {
        this.$Toast("手机号不合法！");
        return;
      }
      if (this.submiting) return;
      let tag = this.reportList[this.current];
      let { bid, cid } = this.$route.query;
      let data = {
        bid,
        cid,
        content: this.content,
        phone: this.phone,
        tag_id: tag.id,
        tag_name: tag.name,
        distribution_channel_id: window.options.distribution_channel_id
      };
      this.submiting = true;
      uploadReport(data)
        .then(() => {
          this.isSubmit = true;
          this.submiting = false;
        })
        .catch(e => {
          this.submiting = false;
          this.$Toast(e.msg);
        });
    },
    backToReader() {
      this.$router.go(-1);
    }
  },
  mounted() {
    getReportList().then(r => {
      this.reportList = r;
    });
  }
};
</script>

<style lang="scss" scoped>
.report-page {
  background: #f7f7f7;
  height: 100vh;
  overflow: auto;

  .report-name {
    margin-left: 0.32rem;
    font-size: 0.28rem;
    padding-top: 0.4rem;
    color: #999;
  }

  .report-reason__choose {
    background: #fff;
    margin-top: 0.2rem;

    .reason {
      margin-left: 0.32rem;
      font-size: 0.32rem;
      height: 0.92rem;
      line-height: 0.92rem;
      color: #040404;

      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.32rem;
      }

      &:not(:last-child) {
        border-bottom: 1px solid #f0eff4;
      }
    }
  }

  .des-input {
    background: #fff;
    padding: 0 0.2rem;
    margin-top: 0.2rem;

    input {
      outline: none;
      border: none;
      background: transparent;
      width: 100%;
      height: 0.92rem;
      font-size: 0.32rem;
    }
  }

  .submit-box {
    margin: 0.5rem 0.3rem 0;
  }

  .submit {
    width: 100%;
    background: #1aac19;
    font-size: 0.36rem;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.25rem 0;
    border: 1px solid #207a20;
    outline: none;
  }
}

.report-success {
  font-size: 0;
  text-align: center;

  img {
    width: 1.92rem;
    height: 1.92rem;
    margin: 0.9rem auto 0.78rem;
  }

  .notice {
    font-size: 0.28rem;
    color: #999;
    width: 80%;
    margin: 0 auto;

    .strong-text {
      font-size: 0.36rem;
      margin-bottom: 0.32rem;
      color: #000;
    }
  }
}
</style>
