<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" />
    <div align="center">
      <h4 style="margin-top:5%;">Processing Invoice</h4>
      <br>
      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
    </div>
    <br>

    <!-- bankslip  -->
    <br>
    <el-row :gutter="12" justify="center" align="center">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Purchase Order</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
          </div>
          <el-row :gutter="12" type="flex">
            <el-col :span="12">
              <a target=" _blank" href="#">
                <img v-bind:src="booking_details.user_po_path" class="image">
              </a>
            </el-col>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>China Bank Slip</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
          </div>
          <el-row :gutter="12" type="flex">
            <el-col :span="12">
              <a target=" _blank" href="#">
                <img v-bind:src="booking_details.china_bankslip_path" class="image">
              </a>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Invoice</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
          </div>
          <el-row :gutter="12" type="flex">
            <el-col :span="12">     
                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <!-- bank slips END --> 

    <!-- 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>
                  <td><b>MYR {{ booking_details.bia }}</b></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
     <br>
    <div class="card">
      <div class="card-header">Payment Bankin Slip</div>
      <div class="row">
        <div class="card-body">
          <a target="_blank" :href="booking_details.user_bankslip_path">
            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
          </a>    
        </div>
      </div>
    </div>
  </el-main>
</template>
<style>
  .booking-details {
    font-weight: bold;
  }
</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: 6,
          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: {

  }
}
</script>
