<template>
	<div class="container-fluid">
		<div class="row">
			<admin-title-bar :title="title">
				<nuxt-link :to="{name: 'admin-blog-new'}">
					<el-button type="success">جدید</el-button>
				</nuxt-link>
			</admin-title-bar>
			<div class="col-12">
				<admin-panel>
					<el-table
						:data="posts"
						style="width: 100%">
						<el-table-column
							type="index"
							label="#">
						</el-table-column>
						
						<el-table-column
							prop="thumb"
							label="تصویر"
							width="230">
							<template slot-scope="scope">
								<el-image
									style="width: 100%; height: 100%"
									:src="scope.row.thumb"
									fit="fit">
								</el-image>
							</template>
						</el-table-column>
						
						<el-table-column
							prop="post_details.fa.title"
							label="عنوان"
							width="">
						</el-table-column>
						
						<el-table-column
							prop="category"
							label="دسته بندی"
							width="">
							<template slot-scope="scope">
								{{categoryName(scope.row.category)}}
							</template>
						</el-table-column>
						
						<el-table-column
							prop="published"
							label="وضعیت انتشار"
							width="">
							<template slot-scope="scope">
								<p v-if="scope.row.published" style="color: green;">منتشر شده</p>
								<p v-else style="color: red;">منتشر نشده</p>
							</template>
						</el-table-column>
						
						<el-table-column
							label="ویرایش"
							width="150"
							align="left">
							<template slot-scope="scope">
								<el-button type="warning" plain icon="el-icon-edit" @click="edit(scope.row._id)"></el-button>
								<el-button type="danger" plain icon="el-icon-delete" @click="del(scope.row._id)"></el-button>
							</template>
						</el-table-column>
					
					</el-table>
				</admin-panel>
			</div>
		</div>
	</div>
</template>


<script>
   export default {
      data() {
         return {
            title: 'لیست بلاگ',
            posts: null,
            blogCategories: null
         }
      },
      head() {
         return {
            title: this.title,
         }
      },
      methods: {
         categoryName(categoryID) {
            return this.blogCategories.filter(item => {
               return item._id === categoryID
            })[0].blogCategory_details.fa.name
         },
         edit(id) {
            this.$router.push(`/admin/blog/${id}`)
         },
         del(id) {
            this.$confirm('این پست حذف شود؟', 'هشدار', {
               confirmButtonText: 'بله',
               cancelButtonText: 'لغو',
               type: 'warning'
            }).then(() => {
               this.$axios.delete(`/api/private/blog/${id}`)
                  .then(response => {
                     this.posts = this.posts.filter(item => {
                        return item._id !== id
                     })
                     this.$message({
                        type: 'success',
                        message: 'آیتم حذف شد'
                     })
                  })
            }).catch(() => {
               this.$message({
                  type: 'warning',
                  message: 'عملیات لغو شد'
               });
            });
         }
      },
      layout: 'admin',
      async asyncData({$axios, store}) {
         let posts = await $axios.get(`/api/public/blog`)
         const blogCategories = await $axios.get(`/api/public/blogCategories`)
         return {
            posts: posts.data,
            blogCategories: blogCategories.data
         }
      }
   }
</script>
