<template>
    <a-col :span="12">
        <a-card hoverable style="width: 100%">
            <img
                class="tw-h-40"
                slot="cover"
                alt="example"
                :src="value.pictureUrl && value.pictureUrl[0].thumbUrl"
            />
            <template slot="actions" class="ant-card-actions">
                <div class="tw-h-full" @click="onEdit">编辑</div>
                <div class="tw-h-full">
                    <Del class="tw-h-full" :onOk="onDel" />
                </div>
            </template>
            <a-card-meta :title="value.certificateName">
                <template #description>
                    <div>证件号码：{{ value.certificateCode }}</div>
                    <div>有效期：{{ value.expirationDate }}</div>
                    <div class="tw-mt-2">
                        <a-tag color="#f50" v-if="value.authorityDepartmentName">
                            {{ value.authorityDepartmentName }}
                        </a-tag>
                        <a-tag color="#2db7f5"> {{ value.certificateTypeName }} </a-tag>
                    </div>
                </template>
            </a-card-meta>
        </a-card>
    </a-col>
</template>

<script>
import Del from '@/components/popconfirm_delete/index.vue';
export default {
    components: { Del },
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: Object,
    },
    watch: {
        value: {
            handler(val) {
                console.log(val);
            },
            deep: true,
        },
    },
    data() {
        return {};
    },
    methods: {
        onEdit() {
            this.$emit('edit', this.value);
        },
        onDel() {
            this.$emit('del', this.value);
        },
    },
};
</script>
