<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}) {
         const message = await $axios.get(`/api/private/contact/${params.message}`)
         return {
            message: message.data
         }
      }
   }
</script>


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