<template>
  <el-dialog title="پیگیری وضعیت درخواست" :visible.sync="showModal">
    <div v-if="!$auth.loggedIn || !$auth.hasScope('user')" class="panel not-logged-in">
      <h3>
        <span> برای بررسی درخواست نمایندگی باید </span>

        <nuxt-link :to="{ name: 'auth-login-register', query: { path: 'representation' } }">وارد حساب کاربری</nuxt-link>

        <span>خود شوید.</span>
      </h3>
    </div>

    <div v-else class="checkUploadModalContent">
      <div class="repCheckBox">
        <form class="form form_3" @submit.prevent="checkRepCode">
          <div class="formRow" :class="validation.representation_code && 'err'">
            <input
              id="repCodeInput"
              v-model="repCodeInput"
              type="text"
              placeholder="کد پیگیری درخواست خود را وارد کنید"
            />

            <p v-if="validation.representation_code">{{ validation.representation_code.msg }}</p>
          </div>

          <div class="formRow">
            <button type="submit" class="btn btn-primary">بررسی</button>
          </div>
        </form>
      </div>

      <div class="resultBox">
        <div class="repInfo" :class="repInfo.status">
          <p>
            <span>تاریخ ثبت درخواست:</span>

            <b> {{ $jDate(repInfo.created_at) }} </b>
          </p>

          <p>
            <span>وضعیت درخواست: </span>

            <b v-if="repInfo.status === 'registered'"> ثبت شده در سیستم </b>

            <b v-if="repInfo.status === 'ongoing'"> در دست اقدام </b>

            <b v-if="repInfo.status === 'verification'"> احراز هویت و بررسی مدارک </b>

            <b v-if="repInfo.status === 'accepted'"> تایید شده </b>

            <b v-if="repInfo.status === 'rejected'"> رد شده </b>
          </p>

          <p v-if="repInfo.status !== 'rejected'">
            <span>دسترسی برای آپلود مدارک: </span>

            <b v-if="repInfo.upload"> دارید </b>

            <b v-else> ندارید </b>
          </p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CheckRepAndUploadDocs',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkingRepCode: false,
      repCodeInput: '',
      repInfo: {},
      validation: {}
    }
  },
  computed: {
    showModal: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('closeModal')
      }
    }
  },
  watch: {
    showModal(newVal, oldVal) {
      if (newVal) setTimeout(() => $('#repCodeInput').focus(), 300)
    }
  },
  methods: {
    showResult() {
      const _DU = 0.3
      this.$gsap
        .timeline({ onCompleted: () => console.log('hiiiiiiiiiiii') })
        .to(
          $('.checkUploadModalContent'),
          { height: $('.checkUploadModalContent .resultBox').height() + 32, duration: _DU },
          0
        )
        .set($('.checkUploadModalContent .repCheckBox'), { position: 'absolute', left: 0, top: 0 }, 0)
        .to($('.checkUploadModalContent .repCheckBox'), { top: '-100%', opacity: 0, duration: _DU }, 0)
        .to($('.checkUploadModalContent .resultBox'), { top: 0, opacity: 1, duration: _DU }, 0.05)
        .set($('.checkUploadModalContent .resultBox'), { position: 'static' })
        .set($('.checkUploadModalContent'), { height: 'auto' })
    },
    checkRepCode() {
      this.validation = {}
      this.$axios
        .post('/api/user/checkRepresentation', { representation_code: this.repCodeInput?.trim() })
        .then(res => {
          this.repInfo = res.data
          setTimeout(() => this.showResult(), 300)
        })
        .catch(err => {
          if (err.response.status === 422) this.validation = err.response.data.validation
          else {
            const title = 'خطا'
            this.$alert(err.response.data.message, title, {
              confirmButtonText: 'بستن'
            })
          }
        })
    }
  }
}
</script>
