<template>
    <div>
        <h2 class="text-success">الطلبات الجارية</h2>
        <hr>
        <table class="table table-borderd">
            <thead>
            <tr>
                <th>العميل</th>
                <th>نوع الجهاز</th>
                <th>الماركة</th>
                <th>المستلم</th>
                <th>حالة الطلب</th>
                <th>الأهمية</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="order in orders.data" :key="order.id">
                <td>{{ order.customer.name}}</td>
                <td><b>{{ deviceTypeTranslation[order.customer.device.type - 1]}}</b></td>
                <td>{{ order.customer.device.brand}}</td>
                <td>{{ order.employee.name}}</td>
                <td><b :class="cssColor(order.state)">{{ orderStateTransliation[order.state - 1]}}</b></td>
                <td><b :class="priorityCssColor(order.priority)">{{ priorityTranslation[order.priority]}}</b></td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            currentPage:1,
            lastPage: 0,
            priorityTranslation:['','مهم جداً','متوسط','منخفض'],
            orderStateTransliation: ['قيد الإنتظار',
                'قيد التنفيذ',
                'تمت صيانته',
                'تم التسليم',
                'مرتجع',
                'ملغي',
            ],
            deviceTypeTranslation: ['كومبيوتر', 'موبايل', 'لابتوب'],
            orders:{},
        }
    },
    methods:{
        priorityCssColor(priority){
            switch (priority){
                case 1: return 'text-danger';
                case 2: return 'text-yellow';
                case 3: return 'text-green';
            }
        },
        cssColor(state) {
            switch (state) {
                case 1:
                    return this.stateColor = 'text-info';
                    break;
                case  2:
                    return this.stateColor = 'text-orange';
                case  3:
                    return this.stateColor = 'text-success';
                case  4:
                    return this.stateColor = 'text-warning';
                case  6:
                    return this.stateColor = 'text-danger';
                    break;
            }
        },
        getOrders(){
            if(this.currentPage > this.lastPage){
                this.currentPage = 1
            }
            axios.get('/hdc/screen?page=' + this.currentPage)
                .then(response => {
                    this.currentPage +=1
                    this.lastPage = response.data.last_page
                    this.orders = response.data
                    this.mounted()
                }).catch(err => {

            })
        },

    },
    mounted() {
        this.getOrders()
        setInterval(() =>{
            this.getOrders()
        }, 1000 * 30 ) // 1 min
    },
    // beforeUpdate() {
    //    this.orders = null
    // }
}
</script>
<style scoped>
.m-t-80{
    margin: 0;
}
</style>
