<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Quản lý thuộc tính kỹ thuật</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Quản lý thuộc tính kỹ thuật</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
                <div class="card card-search shadow-none">
                    <form class="card-body" @submit.prevent="search">
                        <div class="row">
                            <div class="col-lg-3 col-md-4 mb-3">
                                <label>Biển số</label>
                                <input type="text" v-model="searchModel.Search.PredicateObject.Keyword"
                                    class="form-control" placeholder="Từ khóa...">
                            </div>
                            <div class="col-lg-3 col-md-4 mb-3">
                                <label>Ngày tạo</label>
                                <VueDatePicker @update:model-value="handleCreateTime" v-model="createdTime"
                                    :enable-time-picker="false" range multi-calendars auto-apply :format="format"
                                    placeholder="Ngày tạo">
                                    <template #left-sidebar>
                                        <DateRangeSidebar @change-date="onChangeCreatedTime"></DateRangeSidebar>
                                    </template>
                                </VueDatePicker>
                            </div>
                            <div class="col-lg-3 col-md-3 mb-3">
                                <label>Ngày sửa chữa</label>
                                <VueDatePicker @update:model-value="handleLastRepairTime" v-model="lastRepairTime"
                                    :enable-time-picker="false" range multi-calendars auto-apply :format="format"
                                    placeholder="Ngày sửa chữa cuối">
                                    <template #left-sidebar>
                                        <DateRangeSidebar @change-date="onChangeLastRepairTime"></DateRangeSidebar>
                                    </template>
                                </VueDatePicker>
                            </div>
                            <div class="col-lg-3 col-md-4 mb-3">
                                <label>Trạng thái</label>
                                <v-select label="Name" :options="statusOptions"
                                    v-model="searchModel.Search.PredicateObject.Status"
                                    :reduce="(option) => option.Id"></v-select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg mb-3">
                                <button type="submit" class="btn btn-dark" :disabled="loading">
                                    <i v-show="!loading" class="fe fe-search"></i>
                                    <span v-show="loading" class="spinner-border spinner-border-sm"></span>
                                    <span>Tìm kiếm</span>
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="card card-table shadow-none">
                    <div class="card-body card-table-body">
                        <div class="d-flex flex-row justify-content-between mg-b-10">
                            <button @click="truckSpecModal(new Object({ Id: 0 }), 0)" type="button"
                                class="btn btn-outline-primary mx-2 button-icon mb-1"><i
                                    class="fe fe-plus me-2"></i>Thêm
                                mới</button>
                            <button type="button" class="btn btn-outline-warning mx-2 button-icon mb-1"
                                data-bs-toggle="offcanvas" @click="truckSpecDrawer" data-bs-target="#truckSpecDrawer">
                                <i class="fe fe-codepen me-2"></i>Thuộc tính kỹ thuật</button>
                        </div>
                        <div class="table-responsive border-top mg-b-10">
                            <table class="table table-vcenter mb-0" style="min-height:300px">
                                <thead>
                                    <tr>
                                        <th class="wd-lg-12p min-width-1"><span>Biển số</span></th>
                                        <th class="wd-lg-12p min-width-2"><span>Trạng thái</span></th>
                                        <th class="wd-lg-12p min-width-2"><span>Chi nhánh</span></th>
                                        <th class="wd-lg-12p min-width-1"><span>Người lái</span></th>
                                        <th class="wd-lg-10p min-width-2"><span>Ngày sửa chữa cuối</span></th>
                                        <th class="wd-lg-10p min-width-1"><span></span></th>
                                        <th class="wd-lg-8p"></th>
                                    </tr>
                                </thead>
                                <tbody v-if="loading">
                                    <tr>
                                        <td colspan="7" class="tx-semibold text-center text-default">
                                            <span class="spinner-border spinner-border-sm"></span>
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && items.length <= 0">
                                    <tr>
                                        <td colspan="7" class="tx-semibold text-center text-danger">
                                            Không tìm thấy bản ghi nào!
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && items.length > 0">

                                    <tr v-for="item in items" :key="item.Id">
                                        <td class="text-wrap align-top">
                                            {{ item.LicensePlate }}
                                        </td>
                                        <td class="text-wrap align-top">
                                            <span v-if="item.Status === 1" class="tag tag-indigo">{{ item.StatusStr
                                                }}</span>
                                            <span v-if="item.Status === 2" class="tag tag-green">{{ item.StatusStr
                                                }}</span>
                                            <span v-if="item.Status === 3" class="tag tag-orange">{{ item.StatusStr
                                                }}</span>
                                        </td>
                                        <td class="text-wrap align-top">
                                            {{ item.AgencyName }}
                                        </td>
                                        <td class="text-wrap align-top">
                                            <span>{{ item.PicUserName }}</span><span v-if="item.PicFullName">
                                                ({{ item.PicFullName }})</span>
                                        </td>
                                        <td class="text-wrap align-top">
                                            {{ item.LastRepairDateStr }}
                                        </td>
                                        <td class="align-top pt-2">
                                            <button type="button" data-bs-toggle="dropdown"
                                                class="mb-1 mt-1 mr-1 btn btn-light dropdown-toggle btn-sm"
                                                aria-expanded="false"><i class="fas fa-cog"></i> Quản lý
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-arrow">
                                                <a @click="truckSpecModal(item, 1)" class="dropdown-item"
                                                    href="javascript:void(0);"><i class="fe fe-edit-2"></i>
                                                    <span class="mg-l-6">Xem</span>
                                                </a>
                                                <a @click="truckSpecModal(item, 2)" class="dropdown-item"
                                                    href="javascript:void(0);">
                                                    <i class="fe fe-trash"></i>
                                                    <span class="mg-l-6">Sửa</span></a>

                                                <!-- <a @click="" class="dropdown-item" href="javascript:void(0);">
                                                    <i class="fe fe-lock"></i>
                                                    <span class="mg-l-6">Xóa</span></a> -->

                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <pager ref="ctrlPager" v-show="!loading && items.length > 0" @PageSizeChanged="pageSizeChanged"
                            @PageIndexChanged="pageIndexChanged" :Total="searchModel.Pagination.Total"
                            :TotalCurrent="items.length">
                        </pager>
                    </div>
                </div>
            </div><!-- COL END -->
        </div>
        <LadaDialog :visible="truckOpenModalFlag">
            <template #header>
                <div class="modal-header">
                    <div v-if="truckSpecViewFlag == 1">
                        <h5 class="modal-title">Xem chi tiết thông số kỹ thuật</h5>
                    </div>
                    <div v-else>
                        <h5 class="modal-title" v-if="truckId <= 0">Thêm thông số kỹ thuật</h5>
                        <h5 class="modal-title" v-else>Cập nhật thông số kỹ thuật</h5>
                    </div>

                    <button @click="truckSpecModalClose" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <div>
                    <div class="row mb-2">
                        <div class="col-lg-6">
                            <label>Chi nhánh trực thuộc:</label>
                            <v-select :disabled="(truckId > 0 && truckSpecViewFlag == 2 || truckSpecViewFlag == 1)"
                                v-model="truckAgency" label="Name" :options="agencies" :reduce="(option) => option.Id"
                                @search="getAgencies" @option:selected="getTruckByAgencyId">
                                <template v-slot:no-options="{ search, searching }">
                                    <template v-if="searching">
                                        Không có kết quả cho <b>{{ search }}</b>.
                                    </template>
                                    <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                                </template>
                            </v-select>
                            <Field v-model="truckAgency" name="TruckAgency" type="hidden" />
                            <ErrorMessage class="invalid-error" name="TruckAgency" />
                        </div>
                        <div class="col-lg-6">
                            <label>Biển số: </label>
                            <v-select
                                :disabled="(truckId > 0 && truckSpecViewFlag == 2 || truckSpecViewFlag == 1) || truckAgency <= 0 || !truckAgency"
                                v-model="truckLicensePlate" label="LicensePlate" :options="truckes"
                                :reduce="(option) => option.Id" @option:selected="selectTruckLicensePlate">
                                <template v-slot:no-options="{ search, searching }">
                                    <template v-if="searching">
                                        Không có kết quả cho <b>{{ search }}</b>.
                                    </template>
                                    <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                                </template>
                            </v-select>
                            <Field v-model="truckLicensePlate" name="LicensePlate" type="hidden" />
                            <ErrorMessage class="invalid-error" name="LicensePlate" />
                        </div>
                    </div>
                </div>
                <br />
                <div class="vtrWey"></div>
                <div class="table-responsive border-top mg-b-10">
                    <table class="table table-vcenter mb-0" style="min-height:300px;">
                        <thead>
                            <tr>
                                <th class="wd-lg-4p"><span>#</span></th>
                                <th class="wd-lg-12p min-width-2"><span>Thông số</span></th>
                                <th class="wd-lg-12p min-width-2"><span>Giá trị</span></th>
                                <th class="wd-lg-12p min-width-2"><span>Đơn vị</span></th>
                                <th class="wd-lg-12p min-width-1" v-if="truckSpecViewFlag != 1">Quản lý</th>
                            </tr>
                        </thead>
                        <tbody v-if="loading">
                            <tr>
                                <td colspan="7" class="tx-semibold text-center text-default">
                                    <span class="spinner-border spinner-border-sm"></span>
                                </td>
                            </tr>
                        </tbody>
                        <tbody v-if="!loading && truckSpecItems.length <= 0">
                            <tr>
                                <td colspan="7" class="tx-semibold text-center text-danger">
                                    Không tìm thấy bản ghi nào!
                                </td>
                            </tr>
                        </tbody>
                        <tbody v-if="!loading && truckSpecItems.length > 0">
                            <tr v-for="(item, index) in truckSpecItems" :key="item.Id">
                                <td class="align-top">
                                    <div class="mt-1">
                                        <span>{{ index + 1 }}</span>
                                    </div>
                                </td>
                                <td class="align-top">
                                    <div v-if="item.Id == 0">
                                        <v-select v-model="truckSpecModel.TruckAttributeId" label="Name"
                                            :options="totalAttrs" :reduce="(option) => option.Id"
                                            :disabled="item.Id != 0" :value="item.TruckAttributeId">
                                            <template v-slot:no-options="{ search, searching }">
                                                <template v-if="searching">
                                                    Không có kết quả cho <b>{{ search }}</b>.
                                                </template>
                                                <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                                            </template>
                                        </v-select>
                                        <Field v-model="truckSpecModel.TruckAttributeId" name="TruckAttributeId"
                                            type="hidden" />
                                        <ErrorMessage class="invalid-error" name="TruckAttributeId" />
                                    </div>
                                    <div v-else>
                                        <v-select v-model="item.TruckAttributeId" label="Name" :options="totalAttrs"
                                            :reduce="(option) => option.Id" :disabled="item.Id != 0" :clearable="false">
                                            <template v-slot:no-options="{ search, searching }">
                                                <template v-if="searching">
                                                    Không có kết quả cho <b>{{ search }}</b>.
                                                </template>
                                                <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                                            </template>
                                        </v-select>
                                    </div>
                                </td>
                                <td class="align-top">
                                    <div v-if="item.Id == 0">
                                        <input class="form-control" v-model="truckSpecModel.Quantity" />
                                    </div>
                                    <div v-else>
                                        <span>{{ item.Quantity }}</span>
                                    </div>
                                </td>
                                <td class="align-top">
                                    <div v-if="item.Id == 0">
                                        <v-select v-model="truckSpecModel.TruckUnit" label="Name" :options="truckUnits"
                                            :reduce="(option) => option.Id">
                                            <template v-slot:no-options="{ search, searching }">
                                                <template v-if="searching">
                                                    Không có kết quả cho <b>{{ search }}</b>.
                                                </template>
                                                <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                                            </template>
                                        </v-select>
                                        <Field v-model="truckSpecModel.TruckUnit" name="TruckUnit" type="hidden" />
                                        <ErrorMessage class="invalid-error" name="TruckUnit" />
                                    </div>
                                    <div v-else>
                                        <span>{{ item.TruckUnitStr }}</span>
                                    </div>
                                </td>

                                <td class="align-top pt-2" v-if="truckSpecViewFlag != 1">
                                    <a @click="fnCreateTruckSpec(item)" v-if="item.Id <= 0" class="dropdown-item"
                                        href="javascript:void(0);"><i class="fe fe-plus"></i>
                                        <span class="mg-l-6">Lưu</span>
                                    </a>
                                    <a @click="fnDeleteTruckSpec(item.Id)" v-if="item.Id > 0" class="dropdown-item"
                                        href="javascript:void(0);">
                                        <i class="fe fe-trash"></i>
                                        <span class="mg-l-6">Xóa</span></a>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </template>
        </LadaDialog>
        <LadaDrawer :loading="loading" :drawerId="'truckSpecDrawer'" :title="'Thuộc tính kỹ thuật'">
            <template v-slot="{ isLoading }">
                <div class="table-responsive border-top mg-b-10">
                    <table class="table table-vcenter mb-0">
                        <thead>
                            <tr>
                                <th class="wd-lg-12p min-width-1"><span>TT</span></th>
                                <th class="wd-lg-12p min-width-2"><span>Tên thuộc tính</span></th>
                                <th class="wd-lg-8p"></th>
                            </tr>
                        </thead>
                        <tbody v-if="isLoading">
                            <tr>
                                <td colspan="7" class="tx-semibold text-center text-default">
                                    <span class="spinner-border spinner-border-sm"></span>
                                </td>
                            </tr>
                        </tbody>
                        <tbody v-if="!isLoading && attrItems.length <= 0">
                            <tr>
                                <td colspan="7" class="tx-semibold text-center text-danger">
                                    Không tìm thấy bản ghi nào!
                                </td>
                            </tr>
                        </tbody>
                        <tbody v-if="!isLoading && attrItems.length > 0">
                            <tr v-for="(item, index) in attrItems" :key="item.Id">
                                <td class="">
                                    <span v-if="item.Id == 0">#</span>
                                    <span v-else>{{ index }}</span>
                                </td>
                                <td class="">
                                    <input class="form-control" v-model="attrName" v-if="item.Id == 0" />
                                    <span v-else>{{ item.Name }}</span>
                                </td>
                                <td class="">
                                    <a v-if="item.Id == 0" type="button" class="mx-2 px-2 text-success"
                                        @click="attrCreateOrUpdate">
                                        <i class="fe fe-plus"></i>
                                    </a>
                                    <a v-if="item.Id != 0" type="button" class="mx-2 px-2 text-danger"
                                        @click="truckSpecAttrDelete(item.Id)">
                                        <i class="fe fe-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <pager ref="attrPager" v-show="!isLoading && attrItems.length > 0" @PageSizeChanged=""
                        @PageIndexChanged="" :Total="0" :TotalCurrent="0"></pager>
                </div>
            </template>
        </LadaDrawer>
    </div>
</template>
<script setup>
//#region Imports
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue'
import truckService from "@/services/truckService";
import agencyService from "@/services/agencyService";
//#endregion


//#region Components
import DatepickerInstance from "@vuepic/vue-datepicker";
import { LadaDialog, DateRangeSidebar } from '@/components/index';
import { useToast } from "vue-toastification";
import { object } from 'yup';
const toast = useToast();


const format = (dates) => {
    let start = dates[0];
    let end = dates[1];
    const dayStart = start.getDate();
    const monthStart = start.getMonth() + 1;
    const yearStart = start.getFullYear();
    const dayEnd = end.getDate();
    const monthEnd = end.getMonth() + 1;
    const yearEnd = end.getFullYear();

    return `${dayStart}/${monthStart}/${yearStart} - ${dayEnd}/${monthEnd}/${yearEnd}`;
}

//#endregion



//#region TruckSpec
const ctrlPager = ref();
const items = reactive([]);
const agencies = reactive([]);
const truckes = reactive([]);
const truckSpecItems = reactive([]);
const loading = ref(false);
const truckId = ref(0);
const truckOpenModalFlag = ref(false);
// = 1 --> Xem
// = 2 --> Sửa
// = 0 --> Tạo
const truckSpecViewFlag = ref(0);
const truckAgency = ref();
const truckLicensePlate = ref();
const statusOptions = reactive([
    { Id: null, Name: "Tất cả" },
    { Id: 1, Name: "Đang Dừng / Đỗ" },
    { Id: 2, Name: "Đang Hoạt Động" },
    { Id: 3, Name: "Bảo Trì / Sửa Chữa" }
]);
const truckUnits = reactive([
    { Id: 1, Name: "cm" },
    { Id: 2, Name: "m" },
    { Id: 3, Name: "km" },
    { Id: 4, Name: "kg" },
    { Id: 5, Name: "m3" }
]);
const createdTime = ref();
const lastRepairTime = ref();
const searchModel = reactive({
    Pagination: {
        Total: 0,
        PageIndex: 1,
        PageSize: 25
    },
    Sort: {
        Predicate: '',
        Reverse: true
    },
    Search: {
        PredicateObject: {
            Keyword: '',
            CreatedStart: null,
            CreatedEnd: null,
            LastRepairStart: null,
            LastRepairEnd: null,
            Status: null
        }
    }
});

const truckSpecModel = ref({
    Id: 0,
    TruckId: 0,
    Note: '',
    Quantity: 0,
    TruckAttributeId: undefined,
    TruckUnit: undefined,
    LifeCycleByDay: 0,
    LifeCycleByKm: 0
})


async function onChangeCreatedTime(newDates) {
    createdTime.value = newDates;
    handleDate(newDates)
}

function handleCreateTime(modelData) {
    if (modelData != null) {
        searchModel.Search.PredicateObject.CreatedStart = modelData[0];
        searchModel.Search.PredicateObject.CreatedEnd = modelData[1];
    } else {
        searchModel.Search.PredicateObject.CreatedStart = null;
        searchModel.Search.PredicateObject.CreatedEnd = null;
    }
}

async function onChangeLastRepairTime(newDates) {
    lastRepairTime.value = newDates;
    handleLastRepairTime(newDates)
}

function handleLastRepairTime(modelData) {
    console.log(moment(modelData[0]));
    if (modelData != null) {
        searchModel.Search.PredicateObject.LastRepairStart = modelData[0];
        searchModel.Search.PredicateObject.LastRepairEnd = modelData[1];
    } else {
        searchModel.Search.PredicateObject.LastRepairStart = null;
        searchModel.Search.PredicateObject.LastRepairEnd = null;
    }
}

async function search() {
    searchModel.Pagination.PageIndex = 1;
    ctrlPager.value.Refresh();
    loadData();
}

async function loadData() {
    loading.value = true;
    items.splice(0, items.length);
    var searchResult = await truckService.truckSearch(searchModel);
    if (searchResult.Items != null && searchResult.Items.length > 0) {
        searchResult.Items.forEach(item => {
            items.push(item);
        });
    }
    searchModel.Pagination.Total = searchResult.TotalRecord;
    loading.value = false;
}

function pageSizeChanged(pagesize) {
    searchModel.Pagination.PageSize = pagesize;
    searchModel.Pagination.PageIndex = 1;
    loadData();
}
function pageIndexChanged(pageIndex) {
    searchModel.Pagination.PageIndex = pageIndex;
    loadData();
}

async function truckSpecModal(truckObj, isView) {
    truckOpenModalFlag.value = true;
    truckSpecViewFlag.value = isView;
    truckId.value = truckObj.Id;
    await attrGetAll();
    if (truckObj) {
        truckAgency.value = truckObj.AgencyName;
        truckLicensePlate.value = truckObj.LicensePlate;

    }

    await truckSpecLoad(truckObj.Id);

}

function truckSpecModalClose() {
    truckOpenModalFlag.value = false;
    truckSpecViewFlag.value = 0;
}

async function truckSpecLoad(id) {
    truckSpecItems.splice(0, truckSpecItems.length);
    var rs = await truckService.truckSpecGetAll(id);
    if (rs.Result == 1 && rs.Items != null && rs.Items.length > 0) {
        if (truckSpecViewFlag.value != 1)
            truckSpecItems.push({ Id: 0, TruckId: 0, Note: '', Quantity: 0, TruckAttributeId: undefined, TruckUnit: undefined, LifeCycleByDay: 0, LifeCycleByKm: 0 });
        rs.Items.forEach(item => {
            truckSpecItems.push(item);
        });
    } else {

        if (truckSpecViewFlag.value != 1)
            truckSpecItems.push({ Id: 0, TruckId: 0, Note: '', Quantity: 0, TruckAttributeId: undefined, TruckUnit: undefined, LifeCycleByDay: 0, LifeCycleByKm: 0 })

    }
    console.log(truckSpecItems);
}
function clearTruckSpecParam() {

    truckSpecModel.value.Id = 0;
    truckSpecModel.value.TruckId = 0;
    truckSpecModel.value.Note = '';
    truckSpecModel.value.Quantity = 0;
    truckSpecModel.value.TruckAttributeId = undefined;
    truckSpecModel.value.TruckUnit = undefined;
    truckSpecModel.value.LifeCycleByDay = 0;
    truckSpecModel.value.LifeCycleByKm = 0;


}
async function fnCreateTruckSpec(model) {
    truckSpecModel.value.TruckId = truckId.value;
    truckSpecModel.value.Id = 0;
    var rs = await truckService.truckSpecCreateOrUpdate(truckSpecModel.value);
    console.log(rs);
    if (rs.Result == 1) {
        toast.success("Thành công");
        await truckSpecLoad(truckSpecModel.value.TruckId);
        clearTruckSpecParam();
    } else {
        toast.error('Thất bại: ' + rs.Message);
    }
}
async function fnDeleteTruckSpec(model) {
    truckSpecModel.value.TruckId = truckId.value;
    truckSpecModel.value.Id = model;
    var rs = await truckService.truckSpecDelete(truckSpecModel.value);
    if (rs.Result == 1) {
        toast.success("Thành công");
        await truckSpecLoad(truckSpecModel.value.TruckId);
    } else {
        toast.error('Thất bại: ' + rs.Message);
    }
}

async function getAgencies(model) {
    if (model) {
        var result = await agencyService.autoComplete(model);
        if (result != null && result.length > 0) {
            agencies.splice(0, agencies.length);
            Object.assign(agencies, result);
        }
    }
}

async function getTruckByAgencyId(model) {
    if (model.Id) {
        var result = await truckService.getTruckByAgencyId(model.Id);
        if (result != null && result.Result == 1) {
            truckes.splice(0, truckes.length);
            Object.assign(truckes, result.Items);
        }
    }
}
async function selectTruckLicensePlate(model) {
    truckId.value = model.Id;
}

//#endregion

//#region SpecAttr
const attrPager = ref();
const attrItems = reactive([]);
const totalAttrs = reactive([]);
const searchAttrModel = reactive({
    Pagination: {
        Total: 0,
        PageIndex: 1,
        PageSize: 25
    },
    Sort: {
        Predicate: '',
        Reverse: true
    },
    Search: {
        PredicateObject: {
            Keyword: ''
        }
    }
});


const attrName = ref('');

async function truckSpecDrawer() {
    await attrSearch();
}

async function attrCreateOrUpdate() {
    if (attrName.value) {
        var param = {
            Id: 0,
            Name: attrName.value
        };
        let resp = await truckService.truckSpecAttrCreateOrUpdate(param);
        if (resp.Result == 1) {
            toast.success("Thành công");

        } else {
            toast.error('Thất bại: ' + resp.Message);
        }
    }
    await attrSearch();
}
async function truckSpecAttrDelete(value) {
    var param = {
        Id: value
    };
    let resp = await truckService.truckSpecAttrDelete(param);
    if (resp.Result == 1) {
        toast.success("Thành công");
    } else {
        toast.error('Thất bại: ' + resp.Message);
    }
    await attrSearch();
}

async function attrSearch() {
    let resp = await truckService.truckSpecAttrSearch(searchAttrModel);
    if (resp.TotalRecord > 0) {
        var arr = [{ Id: 0, Name: '' }];
        var items = reactive(arr.concat(resp.Items));
        attrItems.splice(0, attrItems.length);
        Object.assign(attrItems, items);
    } else {
        attrItems.splice(0, attrItems.length);
        attrItems.push({ Id: 0, Name: '' });
    }
}
async function attrGetAll() {
    let resp = await truckService.truckSpecAttrGetAll();
    if (resp.Result == 1) {
        totalAttrs.splice(0, totalAttrs.length);
        Object.assign(totalAttrs, resp.Items);
    } else {
        totalAttrs.splice(0, totalAttrs.length);
    }
}
//#endregion



onMounted(async () => {
    await search();
})
</script>