<template>
    <div>
        <a-button class="ml-10" type="primary" size="small" @click="show = true"
            >选择联系人
        </a-button>
        <a-modal v-model:visible="show" width="780px" @before-ok="submit">
            <div class="flex flex-center flex-justify-between">
                <div class="flex flex-center flex-justify-start">
                    <a-input
                        placeholder="请输入联系人姓名搜索"
                        style="width: 280px"
                        size="small"
                    ></a-input>
                    <a-button type="primary" class="ml-20" size="small"
                        >搜索
                    </a-button>
                </div>
                <edit-contacts :customer-id="customerId" @ok="fetchList" />
            </div>
            <a-table
                class="mt-20"
                :columns="columns"
                :data="list"
                @row-click="checked"
            >
                <template #name="{ record }">
                    <div>{{ record.name }} {{ record.phone }}</div>
                </template>
                <template #menu="{ record }">
                    <div>
                        <icon-check-circle-fill v-if="record.checked" />
                        <icon-check-circle v-else class="green" />
                    </div>
                </template>
            </a-table>
        </a-modal>
    </div>
</template>

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

export default {
    components: {
        editContacts
    },
    props: {
        customerId: {
            required: true,
            type: String,
            default: ''
        }
    },
    watch: {
        show: {
            handler(val) {
                if (val) {
                    this.fetchList()
                }
            }
        }
    },
    data() {
        return {
            page: {
                page: 0,
                size: 10,
                total: 0
            },
            show: false,
            list: [],
            checkList: [],
            columns: [
                {
                    title: '姓名',
                    slotName: 'name'
                },
                {
                    title: '操作',
                    slotName: 'menu'
                }
            ]
        }
    },
    methods: {
        checked(row) {
            row.checked = !row.checked
            if (row.checked) {
                this.checkList.push(row)
            } else {
                this.checkList = this.checkList.filter(e => e.id !== row.id)
            }
        },
        fetchList() {
            const data = { customerId: this.customerId, ...this.page }
            this.$api.contacts.page(data).then(res => {
                if (res.code === 200) {
                    this.list = res.data.records.map(e => {
                        e.checked = false
                        return e
                    })
                    this.page.total = res.data.total
                }
            })
        },
        submit(done) {
            this.$emit('ok', this.checkList)
            done()
        }
    }
}
</script>

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