<template>
  <div class="meeting-page">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <LineTxt label="ارتباط با استاندار"/>
        </div>
        <div class="col-12 ">
          <div class="view-form">
            <form @submit.prevent="post">
              <div class="formRow" :class="validation.name ? 'err' : null">
                <input class="input" v-model="message.name" name="name" type="text" placeholder="نام و نام خانوادگی خود را وارد کنید"/>
                <p v-if="validation.name">{{ validation.name.msg }}</p>
              </div>
              <div class="formRow" :class="validation.subject ? 'err' : null">
                <input class="input" v-model="message.subject" name="subject" type="text" placeholder="موضوع خود را وارد کنید"/>
                <p v-if="validation.subject">{{ validation.subject.msg }}</p>
              </div>
              <div class="formRow" :class="validation.description ? 'err' : null">
                <input class="input" v-model="message.description" name="description" type="text" placeholder="توضیحات خود را وارد کنید"/>
                <p v-if="validation.description">{{ validation.description.msg }}</p>
              </div>
              <div class="formRow" :class="validation.email ? 'err' : null">
                <input class="input" v-model="message.email" name="email" type="email" placeholder="ایمیل خود را وارد کنید"/>
                <p v-if="validation.email">{{ validation.email.msg }}</p>
              </div>
              <div class="formRow" :class="validation.phoneNumber ? 'err' : null">
                <input class="input" v-model="message.phoneNumber" name="phoneNumber" type="text" placeholder="شماره تماس خود را وارد کنید"/>
                <p v-if="validation.phoneNumber">{{ validation.phoneNumber.msg }}</p>
              </div>

              <div class="formRow" :class="validation.nationalCode ? 'err' : null">
                <input class="input" v-model="message.nationalCode" name="nationalCode" type="text" placeholder="کدملی خود را وارد کنید"/>
                <p v-if="validation.nationalCode">{{ validation.nationalCode.msg }}</p>
              </div>

              <div class="row view-captcha">
                <div class="formRow col-12 col-md-6" :class="validation.captcha ? 'err' : null">
                  <input v-model="message.captcha" class="input" name="captcha" type="text" placeholder="متن داخل عکس را وارد کنید"/>
                </div>
                <div class="new-captcha col-12 col-md-6">
                  <div class="captcha" v-html="captcha"></div>
                  <button @click="reloadCaptcha" type="button" class="btn btn-primary">
                    <i class="fas fa-sync-alt"></i>
                  </button>
                </div>

                <p class="err-captcha" v-if="validation.captcha">{{ validation.captcha.msg }}</p>

              </div>

              <div class="btnSub">
                <button class="btn btn-primary btn-link" type="submit">ثبت</button>
                <!-- <nuxt-link >SUBMIT NOW</nuxt-link> -->
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      message: {
        name: '',
        subject: '',
        description: '',
        email: '',
        phoneNumber: '',
        nationalCode: '',
        captcha: '',
      },
      validation: {},
      captcha: null
    }
  },

  methods: {
    reloadCaptcha() {
      this.$axios.get('/api/public/getCaptcha').then(res => {
        this.captcha = res.data
      })
    },
    post() {
      this.validation = {}
      this.$axios.post('/api/public/meetingOstandar', this.message)
          .then(res => {
            this.reloadCaptcha()
            this.$message({
              type: 'success',
              message: 'پیام شما با موفقیت ارسال شد'
            })
            this.message = {
              name: '',
              subject: '',
              description: '',
              email: '',
              phoneNumber: '',
              nationalCode: '',
              captcha: '',
            }
          })
          .catch(e => {
            this.reloadCaptcha()
            if (e.response.status === 422) this.validation = e.response.data.validation
            else console.log(e)
          })
    }
  },

  computed: {},
  async asyncData({$axios, error, params}) {
    try {

      const request = [
        $axios.get('/api/public/getCaptcha'),
      ]
      let fetch = await Promise.all(request)
      const [captcha] = fetch
      return {
        captcha: captcha.data,
      }
    } catch (e) {
      error({
        status: 500, message: 'دریافت اطلاعات با مشکل مواجه شد!'
      })
    }
  }

}


</script>
