<template>
	<div class="container-fluid">
		<div class="row">
			<admin-title-bar :title="title"></admin-title-bar>
			<div class="col-12">
				<admin-panel>
					<div class="row">
						<div class="col-6">
							<h2>افزودن دلایل تماس:</h2>
							<el-divider></el-divider>
							<el-form>
								<el-form-item :class="validation.fa_reason ? 'is-error' : null" label="فارسی">
									<el-input v-model="newReason.fa"></el-input>
									<p class="err" v-if="validation.fa_reason">{{validation.fa_reason.msg}}</p>
								</el-form-item>
								<el-form-item :class="validation.en_reason ? 'is-error' : null" label="انگلیسی">
									<el-input v-model="newReason.en"></el-input>
									<p class="err" v-if="validation.en_reason">{{validation.en_reason.msg}}</p>
								</el-form-item>
								<el-button @click="addReason" type="success">افزودن</el-button>
							</el-form>
						</div>
						<div class="col-6">
							<el-tag
								v-for="item in reasons"
								:key="item._id"
								closable
								@close="removeReason(item._id)"
								type="primary"
								style="margin-left: 10px;">
								{{item.reason_details.fa.reason}} | {{item.reason_details.en.reason}}
							</el-tag>
						</div>
					</div>
				</admin-panel>
			</div>
			<div class="col-12">
				<admin-panel>
					<el-table
						:data="messages"
						style="width: 100%"
						:row-class-name="readStatus">
						<el-table-column
							type="index"
							label="#">
						</el-table-column>
						
						<el-table-column
							label="نام"
							width="">
							<template slot-scope="scope">
								{{fullName(scope.row.first_name,scope.row.last_name)}}
							</template>
						</el-table-column>
						
						<el-table-column
							prop="email"
							label="ایمیل"
							width="">
						</el-table-column>
						
						<el-table-column
							prop="phone_number"
							label="شماره تماس"
							width=""
							class-name="phoneNumber">
						</el-table-column>
						
						<el-table-column
							prop="reason"
							label="دلیل تماس"
							width=""
							class-name="phoneNumber">
						</el-table-column>
						
						<el-table-column
							label="مشاهده"
							width="80"
							align="left">
							<template slot-scope="scope">
								<el-button type="success" plain icon="el-icon-view" @click="$router.push({name: 'admin-messages-message',params: {message: scope.row._id}})"></el-button>
							</template>
						</el-table-column>
					
					</el-table>
				</admin-panel>
			</div>
		</div>
	</div>
</template>


<script>
   export default {
      data() {
         return {
            title: 'لیست پیام های ارتباط با ما',
            messages: null,
            reasons: null,
            newReason: {
               fa: '',
               en: ''
            },
            validation: {}
         }
      },
      head() {
         return {
            title: this.title,
         }
      },
      methods: {
         readStatus({row, rowIndex}) {
            return row.read ? null : 'unread'
         },
         fullName(first, last) {
            return first + ' ' + last
         },
         addReason() {
            this.validation = {}
            const data = {
               fa_reason: this.newReason.fa,
               en_reason: this.newReason.en,
            }
            this.$axios.post(`/api/private/contact/reason`, data)
               .then(res => {
                  this.reasons = res.data
                  this.newReason = {
                     fa: '',
                     en: ''
                  }
               })
               .catch(err => {
                  if (err.response.status === 422) this.validation = err.response.data.validation
                  else console.log(err.response.data.message)
               })
         },
         removeReason(id) {
            this.$confirm('این مورد حذف شود؟', 'هشدار', {
               confirmButtonText: 'بله',
               cancelButtonText: 'لغو',
               type: 'warning'
            }).then(() => {
               this.$axios.delete(`/api/private/contact/reason/${id}`)
                  .then(res => {
                     this.$message({
                        message: 'با موفقیت حذف شد.',
                        type: 'error'
                     })
                     this.reasons = this.reasons.filter(item => {
                        return item._id !== id
                     })
                  })
                  .catch(err => {
                     console.log(err.response)
                  })
            }).catch(() => {
               this.$message({
                  type: 'warning',
                  message: 'عملیات لغو شد'
               })
            })
         }
      },
      layout: 'admin',
      async asyncData({$axios}) {
         let messages = await $axios.get('/api/private/contact')
         let reasons = await $axios.get('/api/public/contact/reason')
         return {
            messages: messages.data,
            reasons: reasons.data
         }
      }
   }
</script>


<style>
	.phoneNumber div{
		direction: ltr;
		text-align: right
	}
	
	.unread{
		background: rgb(255, 173, 0, 0.12) !important;
	}
</style>
