<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="guaranteeReport._openedBy && guaranteeReport._openedBy.first_name" type="primary" class="ml-1">
        <span>اولین مشاهده توسط: </span>
        <span> {{ guaranteeReport._openedBy.first_name + ' ' + guaranteeReport._openedBy.last_name }} </span>
      </el-tag>
      <el-tag v-if="guaranteeReport._updatedBy && guaranteeReport._updatedBy.first_name" type="primary" class="ml-1">
        <span>تغییر وضعیت توسط: </span>
        <span> {{ guaranteeReport._updatedBy.first_name + ' ' + guaranteeReport._updatedBy.last_name }} </span>
      </el-tag>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol lg="12">
        <CCard>
          <CCardBody>
            <el-collapse>
              <el-collapse-item title="مشخصات نماینده">
                <CForm>
                  <CInput label="نام و نام خانوادگی" horizontal disabled :value="guaranteeReport.agent_id.full_name" />
                  <CInput label="کد ملی" horizontal disabled :value="guaranteeReport.agent_id.national_code" />

                  <CInput label="تلفن همراه" horizontal disabled :value="guaranteeReport.agent_id.mobile_number" />
                  <CInput label="تلفن شرکت/تعمیرگاه" horizontal disabled :value="guaranteeReport.agent_id.tel_number" />
                  <CInput label="فکس شرکت/تعمیرگاه" horizontal disabled :value="guaranteeReport.agent_id.fax_number" />

                  <CInput label="استان" horizontal disabled :value="guaranteeReport.agent_id.province_name" />
                  <CInput label="شهر" horizontal disabled :value="guaranteeReport.agent_id.city_name" />
                  <CInput label="آدرس" horizontal disabled :value="guaranteeReport.agent_id.address" />
                  <CInput label="کد پستی" horizontal disabled :value="guaranteeReport.agent_id.postal_code" />
                  <CInput label="نام شرکت/تعمیرگاه" horizontal disabled :value="guaranteeReport.agent_id.store_name" />
                </CForm>
                <el-divider></el-divider>
                <div style="text-align: center">
                  <nuxt-link :to="{ name: 'admin-agents-agent', params: { agent: guaranteeReport.user_id } }"
                    >مشاهده اکانت نماینده</nuxt-link
                  >
                </div>
              </el-collapse-item>
            </el-collapse>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol>
                <CForm>
                  <CTextarea label="توضیحات فرم" horizontal disabled rows="5" :value="guaranteeReport.description" />
                </CForm>
                <h6>لیست گزارش ها:</h6>
                <el-divider></el-divider>
                <el-table :data="guaranteeReport.items" style="width: 100%" stripe>
                  <el-table-column type="index" label="#"> </el-table-column>

                  <el-table-column prop="customerName" label="نام مشتری" width="120px"></el-table-column>
                  <el-table-column prop="customerTel" label="تلفن مشتری" width="110px"></el-table-column>

                  <el-table-column prop="ItemName" label="نام کالا" width="300px"></el-table-column>
                  <el-table-column prop="SerialNo1" label="سریال کالا" width="150px"></el-table-column>

                  <el-table-column prop="productIssue" label="ایراد کالا" width="350px"></el-table-column>
                  <el-table-column prop="usedPieces" label="قطعات صرفی" width="350px"></el-table-column>

                  <el-table-column prop="ItemName" label="تاریخ دریافت" width="100px">
                    <template slot-scope="scope">
                      <span> {{ $jDate(scope.row.recieveDate) }} </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ItemName" label="تاریخ تحویل" width="100px">
                    <template slot-scope="scope">
                      <span> {{ $jDate(scope.row.deliverDate) }} </span>
                    </template>
                  </el-table-column>
                </el-table>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminGuaranteeReportDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const guaranteeReport = await $axios.get(`/api/admin/gr/${params.grId}`)
      return {
        guaranteeReport: guaranteeReport.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'مشاهده فرم گزارش گارانتی',
      guaranteeReport: null,
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  }
}
</script>
