<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.locale === 'fa' ? 'فارسی' : 'انگلیسی'"
                      disabled
                  />
                  <CInput
                      label="نام"
                      :value="message.name"
                      disabled
                  />
                  <CInput
                      label="ایمیل"
                      :value="message.email"
                      disabled
                  />
                  <CInput
                      label="موضوع"
                      :value="message.subject"
                      disabled
                  />
                  <CTextarea
                      label="پیام"
                      disabled=""
                      :value="message.message"
                      rows="10"
                  />
                </CCol>
              </CRow>
            </CForm>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import unreadMessagesCounter from "@/mixins/unreadMessagesCounter"

export default {
  data() {
    return {
      title: 'مشاهده پیام',
      message: null,
      validation: {}
    }
  },
  mixins: [unreadMessagesCounter],
  mounted() {
    this.checkMessages()
  },
  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) {
      error({status: 404, message: 'page not found'})
    }
  }
}
</script>

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