<template>
  <div class="container-fluid">
    <div class="row">
      <admin-title-bar :title="title">
        <el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
      </admin-title-bar>
      <div class="col-6">
        <admin-panel>
          <el-form class="message">
            <el-form-item prop="title" label="دلیل ارتباط">
              <el-input :value="message.reason" disabled></el-input>
            </el-form-item>

            <el-form-item prop="title" label="نام">
              <el-input :value="message.first_name" disabled></el-input>
            </el-form-item>

            <el-form-item prop="title" label="نام خانوادگی">
              <el-input :value="message.last_name" disabled></el-input>
            </el-form-item>

            <el-form-item label="شماره تماس">
              <el-input :value="message.phone_number" disabled></el-input>
            </el-form-item>

            <el-form-item label="ایمیل">
              <el-input :value="message.email" disabled></el-input>
            </el-form-item>

            <el-form-item label="پیام">
              <el-input type="textarea" disabled :value="message.message"></el-input>
            </el-form-item>
          </el-form>
        </admin-panel>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      title: 'خواندن پیام',
      message: null,
      user: null
    }
  },
  mounted() {
    this.$axios.get('/api/private/contact')
        .then(response => {
          let unread = response.data.filter(item => {
            return !item.read
          })
          this.$store.commit('admin/unreadCount', unread.length)
        })
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      const message = await $axios.get(`/api/private/contact/${params.message}`)
      return {
        message: message.data
      }
    } catch (e) {
      error({status: 404, message: 'Page not found'})
    }
  }
}
</script>


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