<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <CIcon name="cil-grid" />
          {{ list_title }}
        </slot>
      </CCardHeader>
      <CCardBody>
        <CRow>
          <CCol lg="6">
            <CForm>
              <CInput label="شماره پذیرش" horizontal disabled :value="transaction.TransNumber" />
              <CInput
                label="نام مشتری"
                horizontal
                disabled
                :value="transaction.user_id.first_name + ' ' + transaction.user_id.last_name"
              />
              <CInput label="شناسه مشتری" horizontal disabled :value="transaction.user_id.arpa_businessCode" />
              <CInput label="نام تحویل گیرنده" horizontal disabled :value="transaction.TransCCustom1" />
              <CInput label="شماره تحویل گیرنده" horizontal disabled :value="transaction.cTel1" />
              <CInput label="آدرس تحویل" horizontal disabled :value="transaction.cAddress1" />
            </CForm>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminTransactionDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const transaction = await $axios.get(`/api/admin/transaction/${params.item}`)
      return {
        transaction: transaction.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'فرم های گارانتی',
      list_title: 'لیست',
      transaction: null,
      message: '',
      attachment: ''
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {},
  methods: {
    preview(event) {
      this.attachment = URL.createObjectURL(event.target.files[0])
    },
    clearFile() {
      this.attachment = null
      this.$refs.attachment.value = null
    },
    sendMessage() {
      const data = new FormData()
      data.append('message', this.message)
      data.append('transaction_id', this.transaction._id)

      if (this.$refs.attachment.files[0]) data.append('image', this.$refs.attachment.files[0])

      this.$axios
        .post('/api/admin/addTicket', data)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'پیام با موفقیت ارسال شد.'
          })
          this.attachment = ''
          this.message = ''
          this.$refs.attachment.value = null
          this.transaction.tickets.push(res.data)
        })
        .catch(e => {
          console.log(e)
        })
    }
  }
}
</script>
