<template>
    <Table url="/ranger/inspection/api/v1/units" rowKey="unitId" addBtn :buttons="buttons" ref="table">
        <template #search="{ query }">
            <MoreItem :label="$t('table.region')">
                <UrlSelect
                    url="/ranger/inspection/api/v1/region/list"
                    v-model="query.regionId"
                    labelFiled="regionName"
                    valueFiled="regionId"
                    :placeholder="$t('select.placeholder')"
                />
            </MoreItem>
            <MoreItem :label="$t('table.place')">
                <UrlSelect
                    v-model="query.placeId"
                    :url="
                        query.regionId ? `/ranger/inspection/api/v1/place/regions/${query.regionId}/list` : ''
                    "
                    labelFiled="placeName"
                    valueFiled="placeId"
                    :placeholder="$t('select.placeholder')"
                />
            </MoreItem>
            <MoreItem :label="$t('table.unitName')">
                <a-input v-model="query.inputValue" :placeholder="$t('input.placeholder')" />
            </MoreItem>
        </template>

        <template #drawer="drawer">
            <AddAndEdit v-bind="drawer" />
        </template>

        <a-table-column :title="$t('table.unitName')" data-index="unitName" />
        <a-table-column :title="$t('table.placeName')" data-index="placeName" />
        <a-table-column :title="$t('table.equipmentCode')" data-index="equipmentCode" />
        <a-table-column :title="$t('table.reviser')" data-index="editorName" />
        <a-table-column :title="$t('table.revisionTime')" data-index="editTime" />
    </Table>
</template>

<script>
import Table from '@/components/table/table.vue';
import UrlSelect from '@/components/MySelect/url_select.vue';
import MoreItem from '@/components/table/more_item.vue';
import AddAndEdit from './add_edit.vue';

export default {
    components: { Table, UrlSelect, MoreItem, AddAndEdit },
    data() {
        return {
            buttons: [
                { label: this.$t('table.edit'), click: this.edit },
                { label: this.$t('table.details'), click: this.view },
                { label: this.$t('table.exemption'), click: this.view },
                // { label: '文档', click: this.view },
                {
                    type: 'confirm',
                    url: (row) => `/ranger/inspection/api/v1/units/${row.unitId}`,
                    after: this.refresh,
                },
            ],
        };
    },
    methods: {
        refresh() {
            this.$refs.table.getData();
        },
        edit(row) {
            this.$refs.table.show({ row, title: this.$t('table.edit'), type: 'edit' });
        },
        view(row) {
            this.$refs.table.show({ row, title: this.$t('table.details'), type: 'view' });
        },
    },
};
</script>
