<template>
  <el-main>
    <x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
    <progress-track v-else v-model="trackerConfig" />
    <h1>Order Completed</h1>
    <div class="goBackButton">
      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
    </div>
    <!-- bankslip  -->
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">Purchase Order</div>
          <div v-for="po in booking_details.user_po_path" :key="po" class="row">
            <div class="col">
              <a :href="getURL(po)" target="_blank">
                <img v-if="isImage(po)" :src="po" class="image" style="max-width: 100%">
                <p v-else>Download</p>
                <br>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-header">China Bank Slip</div>
          <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key="cn_bankslip" class="row" >
            <div class="col">
              <a :href="getURL(cn_bankslip)" target="_blank">
                <img v-if="isImage(cn_bankslip)" :src="cn_bankslip" class="image" style="max-width: 100%">
                <p v-else>Download</p>
                <br>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div v-if="booking_details.invoice_path[0] !== '/storage/'" class="card" >
          <div class="card-header">Invoice</div>
          <div >
            <div v-for="invoice in booking_details.invoice_path" :key="invoice" class="row" >
              <div class="col">
                <a :href="getURL(invoice)" target="_blank">
                  <img v-if="isImage(invoice)" :src="invoice" class="image" style="max-width: 100%">
                  <p v-else>Download</p>
                  <br>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <button class="btn btn-success" type="button" @click="onDownloadPO">
            Download PO
          </button>
          <button class="btn btn-primary" type="button" @click="onDownloadDO">
            Download DO
          </button>
          <button class="btn btn-info" type="button" @click="onDownloadInvoice">
            Download Invoice
          </button>
        </div>
      </div>
    </div>
    <!-- order details -->
    <div class="card">
      <div class="card-header">Order Details</div>
      <div class="card-body">
        <div class="row">
          <div class="col">
            <table class="table table-striped">
              <tbody>
                <tr>
                  <td>Ref No :</td>
                  <td>{{ booking_details.id }}</td>
                </tr>
                <tr>
                  <td>Date :</td>
                  <td>{{ booking_details.created_at }}</td>
                </tr>
                <tr>
                  <td>Customer Marking :</td>
                  <td>{{ booking_details.marking }}</td>
                </tr>
                <tr>
                  <td>Term: </td>
                  <td>{{ booking_details.term }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="col">
            <table class="table table-striped">
              <tbody>
                <tr>
                  <td>CNY/RMB :</td>
                  <td>CNY {{ booking_details.amount }}</td>
                </tr>
                <tr>
                  <td>+ Service Charge :</td>
                  <td>CNY {{ booking_details.service_charge }}</td>
                </tr>
                <tr>
                  <td>RATE :</td>
                  <td>{{ booking_details.rate }}</td>
                </tr>
                <tr>
                  <td/>
                  <td><b>MYR {{ booking_details.bia }}</b></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">Order Bankin Slip</div>
      <div class="row">
        <div class="card-body">
          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank" >
            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image" style="max-width: 100%">
            <p v-else>Download</p>
          </a>
        </div>
      </div>
    </div>
  </el-main>
</template>
<style>
  h1 {
    margin-top:5%;
    font-size:3vw;
    text-align:center;
    margin-bottom:3%;
  }
  .goBackButton {
    text-align:center;
    margin-bottom:3%;
  }
  .uploadedImage {
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-left: auto;
      margin-right: auto;
      width: 150px;
      display: block;
  }
  .uploadedImage:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  }
  .card {
    margin-bottom: 3%;
  }
  @media screen and (max-width: 767px) {
    .table {
      font-size: 3.5vmin;
    }
    h1 {
      font-size: 1em;
    }
  }
</style>
<script>
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'

export default {
  components: {
    'progress-track': ProgressTrack,
    'x2-progress-track': X2ProgressTrack
  },
  data () {
    return {
      trackerConfig: {
        status: 7,
        term: null
      },
      loading_btn: false,
      booking_details: {
        id: null,
        amount: null,
        bia: null,
        user_bankslip_path: null
      }
    }
  },
  beforeCreate () {
    const loading = this.$loading({
      lock: true,
      text: 'Please wait..',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    axios
      .get('/api/booking/' + this.$route.params.id)
      .then((response) => {
        this.booking_details = response.data
        this.trackerConfig.term = response.data.term
        loading.close()
      }).catch((error) => {
        console.log(error)
        loading.close()
        this.$router.push({
          name: 'notfound'
        })
      })
  },
  methods: {
    getExtension (path) {
      let index = path.lastIndexOf('.') + 1
      return path.slice(index)
    },
    isImage (path) {
      var ext = this.getExtension(path)
      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
    },
    getURL (path) {
      var getUrl = window.location
      var baseUrl = getUrl.protocol + '//' + getUrl.host
      return baseUrl + path
    },
    onDownloadPO () {
      const url = '/api/invoice/' + this.booking_details.id + '/po'
      axios({
        url: url,
        method: 'GET',
        responseType: 'blob' // important
      }).then(resp => {
        const url = window.URL.createObjectURL(new Blob([resp.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'po.pdf')
        document.body.appendChild(link)
        link.click()
      })
        .catch(err => console.error(JSON.stringify(err)))
    },
    onDownloadDO () {
      const url = '/api/invoice/' + this.booking_details.id + '/do'
      axios({
        url: url,
        method: 'GET',
        responseType: 'blob' // important
      }).then(resp => {
        const url = window.URL.createObjectURL(new Blob([resp.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'do.pdf')
        document.body.appendChild(link)
        link.click()
      })
        .catch(err => console.error(JSON.stringify(err)))
    },
    onDownloadInvoice () {
      const url = '/api/invoice/' + this.booking_details.id + '/invoice'
      axios({
        url: url,
        method: 'GET',
        responseType: 'blob' // important
      }).then(resp => {
        const url = window.URL.createObjectURL(new Blob([resp.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'invoice.pdf')
        document.body.appendChild(link)
        link.click()
      })
        .catch(err => console.error(JSON.stringify(err)))
    }
  }
}
</script>
