<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSection from 'src/components/common/VnSection.vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import FixedAssetFilter from './FixedAssetFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';

const user = useState().getUser();
const { t } = useI18n();
const tableRef = ref();

const dataKey = 'FixedAssetList';

const columns = computed(() => [
    {
        align: 'right',
        name: 'id',
        label: t('globals.id'),
        width: '35px',
        chip: {
            condition: () => true,
        },
        isId: true,
    },
    {
        align: 'left',
        name: 'description',
        label: t('globals.description'),
        cardVisible: true,
        columnClass: 'expand',
    },
    {
        name: 'companyFk',
        label: t('globals.company'),
        component: 'select',
        attrs: {
            url: 'companies',
            optionValue: 'code',
        },
        format: ({ company }) => company?.code,
        cardVisible: true,
    },
    {
        name: 'value',
        label: t('fixedAsset.value'),
        component: 'number',
        format: ({ value }) => toCurrency(value),
        cardVisible: true,
        columnFilter: false,
    },
    {
        align: 'center',
        name: 'firstAmortizated',
        label: t('fixedAsset.firstAmortizated'),
        toolTip: t('fixedAsset.firstAmortizatedTooltip'),
        component: 'date',
        format: ({ firstAmortizated }) => dashIfEmpty(toDate(firstAmortizated)),
        cardVisible: true,
    },
    {
        align: 'center',
        name: 'lastAmortizated',
        label: t('fixedAsset.lastAmortizated'),
        toolTip: t('fixedAsset.lastAmortizatedTooltip'),
        component: 'date',
        format: ({ lastAmortizated }) => dashIfEmpty(toDate(lastAmortizated)),
        cardVisible: true,
    },
    {
        align: 'center',
        name: 'finished',
        label: t('fixedAsset.finished'),
        toolTip: t('fixedAsset.finishedTooltip'),
        component: 'date',
        format: ({ finished }) => dashIfEmpty(toDate(finished)),
        cardVisible: true,
    },
    {
        align: 'center',
        name: 'discharged',
        label: t('fixedAsset.discharged'),
        toolTip: t('fixedAsset.dischargedTooltip'),
        component: 'date',
        format: ({ discharged }) => dashIfEmpty(toDate(discharged)),
        cardVisible: true,
    },
    {
        name: 'amortization',
        label: t('fixedAsset.amortization'),
        component: 'number',
        format: ({ amortization }) => toCurrency(amortization),
        cardVisible: true,
        columnFilter: false,
    },
    {
        name: 'nature',
        label: t('fixedAsset.nature'),
        component: 'select',
        attrs: {
            url: 'Ppes/getNatures',
            optionValue: 'nature',
            optionLabel: 'nature',
        },
        format: ({ nature }) => dashIfEmpty(nature),
        cardVisible: true,
    },
    {
        name: 'plan',
        label: t('fixedAsset.plan'),
        toolTip: t('fixedAsset.planTooltip'),
        component: 'select',
        attrs: {
            url: 'PpePlans',
            optionValue: 'rate',
            optionLabel: 'days',
        },
        format: ({ plan }) => dashIfEmpty(`${plan?.rate * 100}% - ${plan?.days} days`),
        cardVisible: true,
    },
    {
        name: 'group',
        label: t('globals.group'),
        component: 'select',
        attrs: {
            url: 'PpeGroups',
            optionValue: 'id',
            optionLabel: 'description',
        },
        format: ({ group }) => dashIfEmpty(group?.description),
        cardVisible: true,
    },
    {
        name: 'locationFk',
        label: t('fixedAsset.location'),
        component: 'select',
        attrs: {
            url: 'PpeLocations',
            optionValue: 'code',
            optionLabel: 'description',
        },
        format: ({ location }) =>
            dashIfEmpty(`${location?.code} - ${location?.description}`),
        cardVisible: true,
    },
    {
        labelAbbreviation: t('fixedAsset.isInvestmentAssetAbbr'),
        label: t('fixedAsset.isInvestmentAsset'),
        toolTip: t('fixedAsset.isInvestmentAsset'),
        name: 'isInvestmentAsset',
        component: 'checkbox',
        cardVisible: true,
    },
    {
        labelAbbreviation: t('fixedAsset.isDoneAbbr'),
        label: t('fixedAsset.isDone'),
        toolTip: t('fixedAsset.isDone'),
        name: 'isDone',
        component: 'checkbox',
        cardVisible: true,
    },
]);
</script>

<template>
    <VnSection
        :data-key="dataKey"
        :columns="columns"
        prefix="fixedAsset"
        :array-data-props="{
            url: 'ppes/filter',
        }"
    >
        <template #advanced-menu>
            <FixedAssetFilter :data-key="dataKey" />
        </template>
        <template #body>
            <VnTable
                ref="tableRef"
                :data-key="dataKey"
                :columns="columns"
                redirect="fixed-asset"
                :create="{
                    urlCreate: 'Ppes/createFixedAsset',
                    title: t('fixedAsset.createFixedAsset'),
                    onDataSaved: ({ id }) => tableRef.redirect(id),
                    formInitialData: {
                        nature: 'INMOVILIZADO',
                        companyFk: user.companyFk,
                    },
                }"
                :disable-option="{ card: true }"
                :right-search="false"
            >
                <template #more-create-dialog="{ data }">
                    <div class="col-span-2">
                        <VnRow>
                            <VnInput
                                v-model="data.id"
                                :label="$t('globals.id')"
                                required
                            />
                            <VnInputNumber
                                v-model="data.value"
                                :label="$t('fixedAsset.value')"
                                required
                            />
                        </VnRow>
                        <VnRow>
                            <VnInput
                                v-model="data.description"
                                :label="$t('globals.description')"
                                required
                            />
                        </VnRow>
                        <VnRow>
                            <VnInputDate
                                v-model="data.firstAmortizated"
                                :label="$t('fixedAsset.firstAmortizated')"
                                placeholder="dd-mm-aaaa"
                            />
                            <VnInputDate
                                v-model="data.lastAmortizated"
                                :label="$t('fixedAsset.lastAmortizated')"
                                placeholder="dd-mm-aaaa"
                            />
                        </VnRow>
                        <VnRow>
                            <VnSelect
                                url="Ppes/getSubaccounts"
                                v-model="data.account"
                                :label="$t('fixedAsset.account')"
                                option-value="code"
                                option-label="code"
                                hide-selected
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        <QItemSection>
                                            <QItemLabel>{{
                                                `${scope.opt?.description}`
                                            }}</QItemLabel>
                                            <QItemLabel caption>
                                                {{ `#${scope.opt?.code}` }}
                                            </QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </template>
                            </VnSelect>
                            <VnSelect
                                url="Ppes/getEndowments"
                                v-model="data.endowment"
                                :label="$t('fixedAsset.endowment')"
                                option-value="code"
                                option-label="code"
                                hide-selected
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        <QItemSection>
                                            <QItemLabel>{{
                                                `${scope.opt?.description}`
                                            }}</QItemLabel>
                                            <QItemLabel caption>
                                                {{ `#${scope.opt?.code}` }}
                                            </QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </template>
                            </VnSelect>
                        </VnRow>
                        <VnRow>
                            <VnAccountNumber
                                :label="$t('fixedAsset.elementAccount')"
                                v-model="data.elementAccount"
                                required
                            />
                            <VnSelect
                                url="PpePlans"
                                v-model="data.planFk"
                                :label="$t('fixedAsset.plan')"
                                option-value="id"
                                :option-label="
                                    (value) => `${value.rate * 100}% - ${value.days} days`
                                "
                                hide-selected
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        <QItemSection>
                                            <QItemLabel>{{
                                                `${scope.opt?.rate * 100}% - ${scope.opt?.days} days`
                                            }}</QItemLabel>
                                            <QItemLabel caption>
                                                {{ `#${scope.opt?.id}` }}
                                            </QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </template>
                            </VnSelect>
                        </VnRow>
                        <VnRow>
                            <VnSelect
                                url="Ppes/getNatures"
                                v-model="data.nature"
                                :label="$t('fixedAsset.nature')"
                                option-value="nature"
                                option-label="nature"
                                hide-selected
                            />
                            <VnSelect
                                url="PpeGroups"
                                v-model="data.groupFk"
                                :label="$t('globals.group')"
                                option-value="id"
                                option-label="description"
                                hide-selected
                            />
                        </VnRow>
                        <VnRow>
                            <VnSelect
                                url="Companies"
                                :fields="['id', 'code']"
                                v-model="data.companyFk"
                                :label="$t('globals.company')"
                                option-value="id"
                                option-label="code"
                                hide-selected
                            />
                            <VnSelect
                                url="PpeLocations"
                                v-model="data.locationFk"
                                :label="$t('fixedAsset.location')"
                                option-value="code"
                                :option-label="
                                    (value) => `${value.code} - ${value.description}`
                                "
                                hide-selected
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        <QItemSection>
                                            <QItemLabel>{{
                                                `${scope.opt?.description}`
                                            }}</QItemLabel>
                                            <QItemLabel caption>
                                                {{ `#${scope.opt?.code}` }}
                                            </QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </template>
                            </VnSelect>
                        </VnRow>
                    </div>
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>
