<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
    </CustomSubHeader>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fas fa-filter"></i>
          <b>فیلتر ها</b>
        </slot>
      </CCardHeader>

      <CCardBody>
        <CRow>
          <CCol sm="12">
            <h4>جستجو در لیست:</h4>
            <el-input
              v-model="filterText"
              clearable
              placeholder="کد نماینده - شماره موبایل - استان - شهر"
              style="display: inline-block; max-width: 500px; margin-top: 8px"
            ></el-input>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <CIcon name="cil-grid" />
          {{ list_title }}
        </slot>
      </CCardHeader>

      <CCardBody>
        <el-table
          :data="filteredItems"
          :row-class-name="({ row, rowIndex }) => !row.seen && 'unread'"
          style="width: 100%"
        >
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column prop="trackingCode" label="کد پیگیری" width=""> </el-table-column>

          <el-table-column prop="description" label="توضیحات" width=""> </el-table-column>

          <el-table-column prop="agent_id.full_name" label="نام" width=""> </el-table-column>

          <el-table-column prop="agent_id.mobile_number" label="شماره موبایل" width=""> </el-table-column>

          <el-table-column prop="agent_id.agent_code" label="کد نماینده" width=""> </el-table-column>

          <el-table-column prop="agent_id.province_name" label="استان" width=""> </el-table-column>

          <el-table-column prop="agent_id.city_name" label="شهر" width=""> </el-table-column>

          <el-table-column label="مشاهده" width="70" align="center">
            <template slot-scope="scope">
              <CButton
                :key="scope.row._id"
                color="success"
                variant="outline"
                :to="{ name: 'admin-guarantee-reports-grId', params: { grId: scope.row._id } }"
              >
                <i class="fal fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminGuaranteeReportsList',
  layout: 'admin',
  async asyncData({ $axios, error }) {
    try {
      const grList = await $axios.get('/api/admin/grList')
      return {
        grList: grList.data
      }
    } catch (err) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      title: 'لیست گزارش عملکرد گارانتی نمایندگان',
      list_title: 'لیست',
      grList: null,
      filterText: ''
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    filteredItems() {
      const filterText = this.filterText.toLowerCase()
      if (!filterText.length) return this.grList
      else
        return this.grList.filter(item => {
          return (
            item.agent_id.agent_code.toLowerCase().includes(filterText) ||
            item.agent_id.full_name.toLowerCase().includes(filterText) ||
            item.agent_id.mobile_number.toLowerCase().includes(filterText) ||
            item.agent_id.province_name.toLowerCase().includes(filterText) ||
            item.agent_id.city_name.toLowerCase().includes(filterText)
          )
        })
    }
  }
}
</script>

<style scopped lang="scss">
.unread {
  background: rgba(orange, 0.1) !important;
}
</style>
