<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-contact-us-messages'}">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>
    <CCard>
      <CCardHeader>
        <slot name="header">
          <!--          <i class="fal fa-bars"></i>-->
          <!--          <span>{{ list_title }}</span>-->
        </slot>
      </CCardHeader>
      <CCardBody>
        <CRow>
          <CCol md="6">
            <CForm class="message">
              <CRow>
                <CCol sm="12">
                  <CInput
                      label="نام"
                      :value="message.name"
                      disabled
                  />
                  <CInput
                      label="شماره تماس"
                      :value="message.phone"
                      disabled
                  />
                  <CInput
                      label="ایمیل"
                      :value="message.email"
                      disabled
                  />
                  <CTextarea
                      label="پیام"
                      disabled=""
                      :value="message.message"
                      rows="10"
                  />
                  <p class="form-err" v-if="validation.caption">{{ validation.caption.msg }}</p>
                </CCol>
              </CRow>
            </CForm>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'مشاهده پیام',
      message: null,
      validation: {}
    }
  },
  computed: {},
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      const message = await $axios.get(`/api/admin/contactUsMessages/${params.message}`)
      return {
        message: message.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اطلاعات مورد نظر پیدا نشد",
        });
    }
  }
}
</script>

<style lang="scss">
.message {
  input:disabled, textarea:disabled {
    color: #000 !important;
  }
}
</style>
