<template>
    <div>
        <a-table :columns="columns" :data="list">
            <template #sex="{ record }">
                <a-tag :color="record.sex === '0' ? 'blue' : 'red'"
                    >{{ record.sex === '0' ? '男' : '女' }}
                </a-tag>
            </template>
            <template #policy="{ record }">
                <div>
                    <a-tag :color="record.policy === '0' ? 'red' : 'green'"
                        >{{ record.policy === '0' ? '否' : '是' }}
                    </a-tag>
                </div>
            </template>
            <template #menu="{ record }">
                <div>
                    <edit-contacts
                        :customer-id="customerId"
                        :info="record"
                        @ok="fetchList"
                    ></edit-contacts>
                </div>
            </template>
        </a-table>
    </div>
</template>

<script>
import editContacts from '@/views/base/customer/components/edit-contacts.vue'

export default {
    components: {
        editContacts
    },
    props: {
        customerId: {
            required: true,
            type: String,
            default: ''
        }
    },
    watch: {
        customerId: {
            handler(val) {
                if (val) {
                    this.fetchList()
                }
            },
            immediate: true
        }
    },

    data() {
        return {
            page: { page: 0, size: 10, total: 0 },
            list: [],
            columns: [
                {
                    title: '姓名',
                    dataIndex: 'name'
                },
                {
                    title: '性别',
                    slotName: 'sex'
                },
                {
                    title: '手机号码',
                    dataIndex: 'phone'
                },
                {
                    title: '职务',
                    dataIndex: 'post'
                },
                {
                    title: '关键决策人',
                    slotName: 'policy'
                },
                {
                    title: '备注',
                    dataIndex: 'remark'
                },

                {
                    title: '操作',
                    slotName: 'menu'
                }
            ]
        }
    },
    methods: {
        fetchList() {
            const data = { customerId: this.customerId, ...this.page }
            this.$api.contacts.page(data).then(res => {
                if (res.code === 200) {
                    this.list = res.data.records
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
