<template>
    <Wraper :hidden="hidden" noFooter>
        <a-list :data-source="data" :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 1, xl: 1, xxl: 1 }">
            <a-list-item slot="renderItem" slot-scope="item">
                <a-card>
                    <template #title>
                        <a-tag v-if="item.exemptionState === 'EFFECTIVE'" color="#87d068"> 有效 </a-tag>
                        <a-tag v-else color="#f50"> 无效 </a-tag>
                        {{ `${item.startTime} 至 ${item.endTime}` }}
                    </template>
                    {{ item.exemptionReason }}
                </a-card>
            </a-list-item>
        </a-list>
    </Wraper>
</template>

<script>
import Wraper from '@/components/table/wraper.vue';
import { getExemptionsListApi } from '@/api';
export default {
    components: { Wraper },
    props: { hidden: Function, row: Object },
    data() {
        return {
            data: [],
            loading: false,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            const { placeId, regionId } = this.row;
            this.loading = true;
            const data = await getExemptionsListApi({ placeId, regionId, exemptionType: 'PLACE' });
            this.data = data;
            this.loading = false;
        },
    },
};
</script>
