<template>
    <theme-table :route="'CoCreate'" :permisName="'Co Create'" @input="Searching">
        <span slot="main-title">
            {{ $t('Co') }}
        </span>
        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead class="text-nowrap fixed_table">
                        <tr>
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("Code") }}</th>
                            <th>{{ $t("Name") }}</th>
                            <th>{{ $t("Gender") }}</th>
                            <th>{{ $t("Date of Birth") }}</th>
                            <th>{{ $t("Date Start Working") }}</th>
                            <th>{{ $t("Contact Number") }}</th>
                            <th>{{ $t("Address") }}</th>
                            <th>{{ $t("Status") }}</th>
                            <th>{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(co, index) in coData.data" :key="index">
                            <td>{{ index + 1 }} </td>
                            <td>{{ co.code }}</td>
                            <td>{{ co.name }}</td>
                            <td>
                                <active-status :gender="co.gender"></active-status>
                            </td>
                            <td>{{ co.date_of_birth | onlyDate }}</td>
                            <td>{{ co.date_start_working | onlyDate }}</td>
                            <td>{{ co.contact_number }}</td>
                            <td>{{ co.village_km }} {{ co.commune_km }} {{ co.district_km }} {{ co.province_km }}</td>
                            <td>
                                <active-status :status="co.status"></active-status>
                            </td>
                            <td>
                                <router-link v-if="$can('Co Edit')" :to="{name:'CoCreate',params:{id:co.id}}" :title="$t('Edit')" v-show="co.status == 1 " class="btn btn-dark  s-btn-xs">
                                    <i class="fa-solid fa-pen-to-square fa-sm"></i>
                                </router-link>
                                <button v-show="co.status==1" v-if="$can('Co Delete')" @click="funActive(co.id)" type="button" :title="$t('Active')"  class="btn btn-tbsmall">
                                    <i class="fa fa-toggle-on text-success" :title="$t('Active')"></i>
                                </button>
                                <button v-show="co.status==2" v-if="$can('Co Delete')" @click="funActive(co.id)" type="button" :title="$t('Inactive')" class="btn btn-tbsmall">
                                    <div>
                                        <i class="fa fa-toggle-off text-danger" :title="$t('Inactive')"></i>
                                    </div>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="coData" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>
</template>

<script>
    import ThemeTable from '../../components/ThemeTable.vue'
    import ActiveStatus from '../../components/ActiveStatus.vue'
    import CumstomPagination from '../../components/CustomPagination.vue'
    import axios from 'axios'
    export default {
        components: {
            ThemeTable,
            ActiveStatus,
            CumstomPagination,
        },
        data() {
            return {
                coData: {},
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: '',
                    type: 1
                }
            }
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('admin-api/coes', {
                    params: this.params
                }).then((res) => {
                    if (res.data == this.noPermission) {
                        this.$router.push({ name: 'noPermission' });
                    }
                    this.coData = res.data;
                }).catch((error) => {
                    if(error.message=='Request failed with status code 403') {
                        this.$router.push({ name: 'permissionTest' });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            Searching(e) {
                this.params.search_text = e.target.value;
                this.funGetData();
            },
            funActive(id) {
                axios.put("admin-api/coes/" + id).then((res) => {
                    if (res.data.status == 1) {
                        this.funGetData();
                        this.$toast.success(res.data.message);
                    } else if (res.data.status == 2) {
                        this.funGetData();
                        this.$toast.success(res.data.message);
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
        }
    }
</script>