<template>
    <v-data-table :headers="headers" :items="OrderItems" class="WM-Align-R WM-Margin-RL-15">
        <template slot="items" slot-scope="props">
            <td style="width:5%">  </td>
            <td style="width:10%" class="En">{{ props.item.ID }}</td>
            <td style="width:5%" class="">{{ props.item.UserName }}</td>
            <td style="width:10%" class="">
                <v-chip color="orange darken-2" text-color="white"> {{ props.item.Quantity }} </v-chip> آیتم
            </td>
            <td style="width:10%"><span class="WM-Font-24"> {{ props.item.Value }} </span> تومان</td>
            <td style="width:10%" class="" v-html="props.item.UpdatedAt"></td>
            <td style="width:50%" class="">
                <v-tooltip top color="black">
                    <v-btn @click.native="$store.state.OrderDetails = true" slot="activator" fab color="cyan" dark><v-icon dark>fas fa-align-right</v-icon></v-btn>
                    <span> جزئیات سفارش </span>
                </v-tooltip>
                <v-tooltip top color="black">
                    <v-btn @click.native="$store.state.OrderStatus = true" slot="activator" fab color="black" dark><v-icon dark>fas fa-exchange-alt</v-icon></v-btn>
                    <span> تغییر وضعیت سفارش </span>
                </v-tooltip>
                <v-tooltip top color="black">
                    <v-btn slot="activator" fab color="black" dark><v-icon dark>fas fa-angle-left</v-icon></v-btn>
                    <span> تغییر وضعیت سفارش به وضعیت بعدی </span>
                </v-tooltip>
                <v-tooltip top color="black">
                    <v-btn @click.native="$store.state.SendEmail = true" slot="activator" fab color="purple" dark><v-icon dark>fas fa-envelope</v-icon></v-btn>
                    <span> ارسال ایمیل </span>
                </v-tooltip>
                <v-tooltip top color="black">
                    <v-btn @click.native="$store.state.SendSMS = true" slot="activator" fab color="orange" dark><v-icon dark>fas fa-comment-alt</v-icon></v-btn>
                    <span> ارسال پیام کوتاه </span>
                </v-tooltip>
                <v-tooltip top color="black">
                    <v-btn slot="activator" fab color="red" dark><v-icon dark>fas fa-trash-alt</v-icon></v-btn>
                    <span> حذف سفارش </span>
                </v-tooltip>


            </td>
        </template>
        <template slot="pageText" slot-scope="props">
            صفحه ی  {{ props.pageStart }} - {{ props.pageStop }} از {{ props.itemsLength }}
        </template>
    </v-data-table>
</template>

<script>
export default {
    data ()  {
        return {
            headers: [
                { text: '#', align:'right', sortable: false, value: 'name'},
                { text: ' شناسه ی سفارش ', align:'right', value: 'calories' },
                { text: ' سفارش دهنده ', align:'right', value: 'fat' },
                { text: ' تعداد آیتم ها ', align:'right', value: 'carbs' },
                { text: ' مبلغ سفارش ', align:'right', value: 'protein' },
                { text: ' تاریخ ثبت ', align:'right', value: 'protein' },
                { text: ' ابزارها ', align:'right', sortable: false, value: 'iron' }
            ],
            OrderItems: [
                { ID: 'WM457', UserName: ' علیرضا حسنی ', Quantity: 12, Value: 350000, UpdatedAt:' سه شنبه، 27 آذر <br> 22:33', Status: 'inProgress'},
            ],
            Status: {
                'inProgress': { TitleFa: ' در حال آماده سازی ', color:''},
                'ReadyToDeliver': { TitleFa: ' آماده ی تحویل ', color:''},
            }
        }
    },
};
</script>
