<template>
    <theme-table
        :permisName="'Asset Create'"
        :newButton="true"
        @click="funshowForm"
        @input="Searching"
    >
        <span slot="main-title">
            {{ $t("Type Depreciation") }}
        </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("Name") }}</th>
                            <th>{{ $t("Description") }}</th>
                            <th>{{ $t("Create By") }}</th>
                            <th>{{ $t("Create Date") }}</th>
                            <th v-show="user_branch != -1">
                                {{ $t("Action") }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            class="text-nowrap"
                            v-for="(value, index) in assets.data"
                            :key="index"
                        >
                            <td>{{ index + 1 }}</td>
                            <td>{{ value.name }}</td>
                            <td>{{ value.desc }}</td>
                            <td>{{ value.created_by }}</td>
                            <td>{{ value.created_at | onlyDate }}</td>
                            <td v-show="user_branch != -1">
                                <button
                                    type="button"
                                    :title="$t('Edit')"
                                    @click="funshowForm(value.id)"
                                    class="btn btn-dark s-btn-xs"
                                >
                                    <i
                                        class="fa-solid fa-pen-to-square fa-sm"
                                    ></i>
                                </button>
                                <button
                                    type="button"
                                    :title="$t('Delete')"
                                    @click="funDelete(value.id)"
                                    class="btn btn-danger s-btn-xs"
                                >
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table> 
            </div>
            <cumstom-pagination
                :pageShow="true"
                @PageChange="PageChange($event)"
                :data="assets"
                @onChangePage="funGetData($event)"
            ></cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <asset-form :form="form" @submitData="submitData"></asset-form>
        </div>
    </theme-table>
</template>

<script>
import CumstomPagination from "../../../components/CustomPagination.vue";
import AssetForm from "./AssetForm.vue";
import ThemeTable from "../../../components/ThemeTable.vue";
export default {
    components: {
        CumstomPagination,
        AssetForm,
        ThemeTable,
    },
    data() {
        return {
            assets: { data: [] },
            user_branch: "",
            form: new Form({
                id: "",
                name: "",
                desc: "",
            }),
            params: {
                page: 1,
                per_page: 25,
                search_text: "",
            },
        };
    },
    created() {
        this.funGetData();
        this.funComUserBranch();
    },
    methods: {
        funGetData(page = 1) {
            this.params.page = page;
            axios
                .get("accounting/assets", {
                    params: this.params,
                })
                .then((res) => {
                    this.assets = res.data;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        PageChange: function (e) {
            this.params.per_page = e.target.value;
            this.funGetData();
        },
        Searching(e) {
            this.params.search_text = e.target.value;
            this.funGetData();
        },
        submitData() {
            this.form
                .post("accounting/assets")
                .then((res) => {
                    if (res.data.status == 1) {
                        this.form.reset();
                        this.$toast.success(res.data.message);
                        $("#assetForm").modal("hide");
                        this.funGetData();
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        funshowForm(id) {
            if (this.user_branch == -1) {
                this.$toast.warning("អ្នកកំពុងស្ថិតនៅការិយាល័យកណ្តាល!");
            } else {
                axios
                    .get("accounting/assets/create", {
                        params: { id: id },
                    })
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.form.fill(res.data.data);
                        } else {
                            this.form.reset();
                        }
                        $("#assetForm").modal("show");
                    });
            }
        },
        funDelete(id) {
            this.$confirm({
                message: "Are you sure?",
                button: {
                    no: "No",
                    yes: "Yes",
                },
                callback: (confirm) => {
                    if (confirm) {
                        this.form
                            .delete("accounting/assets/" + id)
                            .then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                    }
                },
            });
        },
    },
};
</script>
