<template>
    <div>
      <CustomSubHeader>
        <CBreadcrumb class="border-0 mb-0"> برندها </CBreadcrumb>
        <CButton size="sm" color="success" :to="{ name: 'admin-brands-item', params: { item: 'new' } }" class="mr-auto"
        >افزودن</CButton>
      </CustomSubHeader>
      <CCard>
        <CCardHeader>
          <slot name="header">
            <CIcon name="cil-grid" />
             برندها 
          </slot>
        </CCardHeader>
  
        <CCardBody>
          <el-table :data="brands" style="width: 100%">
            <el-table-column type="index" label="#"> </el-table-column>

            <el-table-column  width="80">
            <template slot-scope="scope">
                <img width="60" :src="'/uploads/images/brands/'+scope.row.logo">
              </template>
            </el-table-column>
          
            <el-table-column prop="title" label="نام" width="">
             
            </el-table-column>
  
            <el-table-column  label="توضیحات" width="">
              <template slot-scope="scope">
                <span class="singleLineTxt" :title="scope.row.description"> {{ scope.row.description }} </span>
              </template>
            </el-table-column>

            <el-table-column  label="لینک" width="">
              <template slot-scope="scope">
                <span class="singleLineTxt" :title="scope.row.link"> {{ scope.row.link }} </span>
              </template>
            </el-table-column>
  
  
            <el-table-column label="نمایش" width="110" align="center">
              <template slot-scope="scope">
                <CButton
                  :key="scope.row._id"
                  color="success"
                  variant="outline"
                  :to="{ name: 'admin-brands-item', params: { item: scope.row._id } }"
                >
                  <i class="fal fa-eye"></i>
                </CButton>

                <CButton
                  :key="scope.row._id"
                  color="danger"
                  variant="outline"
                 @click="deleteBrands(scope.row._id)"
                >
                  <i class="fal fa-trash"></i>
                </CButton>

              </template>
            </el-table-column>
          </el-table>
        </CCardBody>
      </CCard>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AdminBrandsList',
    layout: 'admin',
    async asyncData({ $axios, error }) {
      
    },
    data() {
      return {
        brands:null
       
      }
    },
   
    computed: {
      config() {
      return this.$config
    }
  
    },
    beforeMount(){
  
      this.$axios.get('/api/public/brand').then(res=>{
        this.brands = res.data
        console.log(res.data)
  
      }).catch(err=>{
        console.log(err)
      })
  
  
    },
    methods: {
    
     deleteBrands(id){
      this.$confirm('این برند حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/admin/brand/${id}`)
            .then(response => {
              this.brands = this.brands.filter(item => item._id !== id)
              this.$message({
                type: 'success',
                message: 'برند حذف شد'
              })
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
     }
       
        
       
    }
    
    }
  
  </script>
  