<template>
    <my-card class="tw-flex">
        <div class="tw-mr-2.5" :class="$style.container" style="flex-basis: 500px">
            <Table
                url="/ranger/inspection/api/v1/items"
                rowKey="itemId"
                :width="700"
                :buttons="buttons"
                noMargin
            >
                <template #search="{ query }">
                    <MoreItem label="地区">
                        <UrlSelect
                            url="/ranger/inspection/api/v1/region/list"
                            v-model="query.regionId"
                            labelFiled="regionName"
                            valueFiled="regionId"
                        />
                    </MoreItem>
                    <MoreItem label="指标名称">
                        <a-input v-model="query.itemName" />
                    </MoreItem>
                </template>
                <a-table-column title="巡检指标" data-index="itemName" />
                <a-table-column title="单元" data-index="unitName" />
            </Table>
        </div>
        <div :class="$style.container" class="tw-flex-1 tw-h-10"></div>
    </my-card>
</template>

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

export default {
    components: { Table, MoreItem, UrlSelect },
    data() {
        return {
            buttons: [
                {
                    label: '添加',
                    click: this.addToChart,
                    isHidden(row) {
                        return row.__isHidden__;
                    },
                },
            ],
        };
    },
    methods: {
        addToChart(row) {
            console.log(row);
            this.$set(row, '__isHidden__', true);
        },
    },
};
</script>

<style module>
.container {
    @apply tw-border tw-border-gray-300 tw-border-solid tw-rounded;
}
</style>
