<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="message.read_by && message.read_by.first_name" type="primary">
        <span>خوانده شده توسط: </span>
        <span> {{ message.read_by.first_name + ' ' + message.read_by.last_name }} </span>
      </el-tag>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-contact-us' }">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput v-model="message.full_name" label="نام و نام خانوادگی" horizontal disabled />
              <CInput label="ایمیل" horizontal disabled :value="message.email" />

              <CTextarea label="پیام" horizontal disabled rows="20" :value="message.message" />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminContactUsMsgDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const message = await $axios.get(`/api/admin/contact/${params.message}`)
      return {
        message: message.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'پیام',
      message: null
    }
  },
  head() {
    return {
      title: this.title
    }
  }
}
</script>
