<template>
        <div  class="timeline timeline-one-side" data-timeline-content="axis" data-timeline-axis-style="dashed">
                <span v-for="item in timeline" :key="item.index">
                        <div class="timeline-block" v-if="item == 'a1'"> <span class="timeline-step badge-success"> <i class="fas fa-arrow-alt-circle-down"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ຮັບເຄື່ອງແລ້ວ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a2'"> <span class="timeline-step badge-info"> <i class="fas fa-check-square"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ກຳລັງກວດເຊັກ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a3'"> <span class="timeline-step badge-primary"> <i class="fas fa-file-invoice-dollar"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ແຈ້ງລາຄາສ້ອມແປງໃຫ້ລູກຄ້າ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a4'"> <span class="timeline-step badge-success"> <i class="fas fa-user-check"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ລູກຄ້າຍືນຍັງສ້ອມແປງ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a5'"> <span class="timeline-step badge-warning"> <i class="fas fa-cart-plus"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ກຳລັງສັ່ງອາໄຫລ໋ ສ້ອມແປງ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a6'"> <span class="timeline-step badge-warning"> <i class="fas fa-tools"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ກຳລັງສັ້ອມແປງ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a7'"> <span class="timeline-step badge-success"> <i class="ni ni-like-2"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ສ້ອມແປງສຳເລັດ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a8'"> <span class="timeline-step badge-danger"> <i class="fas fa-reply"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ສົ່ງຄືນບໍ່ສ້ອມແປງ</h6> </div> </div>
                        <div class="timeline-block" v-if="item == 'a9'"> <span class="timeline-step badge-danger"> <i class="fas fa-times-circle"></i> </span> <div class="timeline-content"> <h6 class="text-sm mt-1 mb-0">ບໍ່ສາມາດສ້ອມແປງໄດ້</h6> </div> </div>
                   </span>
              </div>
</template>
<script>
export default {
    name: 'timeline',
    components: {},
    computed:{
    },
    directives: {},
    data() {
        return { };
    },
    props: {
    timeline: {
      type: Object,
      required: true,
    },
  },
    mounted() {},

    methods: {},
};
</script>
<style >
.timeline-block:last-child {
  margin-bottom: 40px; 
}
</style>