<template>
    <div class="nav_detail">
        <Table ref="liaisonTable" :tableParams="tableParams" :btnRole="leftBtn" @handleAdd="handleAdd('add')"
            @handleEdit="handleAdd('edit', $event)" @selectionChange="handleSelectionChange" :rightBtn="[]">
            <template #left>
                <el-button @click="sendEmail('multiple')" v-hasPermi="[`${ props.perPrefix }:detail:tab_lxr_fyj`]">发邮件</el-button>
                <el-button @click="batchDelete()" type="danger" v-hasPermi="[`${ props.perPrefix }:detail:tab_lxr_sc`]">删除</el-button>
            </template>
        </Table>
    </div>
</template>


<script setup lang="ts">
import { listLiaison, delLiaison } from '@/api/customer/liaison';
import { LiaisonVO, LiaisonQuery } from '@/api/customer/liaison/types';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'
    const props = defineProps({
        //关联客户id
        customerId: {
            type: [String, Number],
        },
        perPrefix: {
            type: String,
        },
        resourceType: {
            type: String,
        },
        resourceTypeId: {
            type: String,
        },
        nonId: {
            type: String
        },
        customerForm: {
            type: Number
        }
    })

    const emits = defineEmits(['changeRoute'])

    const leftBtn = ref([
        { type: 'add', hasPermi: `${ props.perPrefix }:detail:tab_lxr_tj` },
        { type: 'edit', hasPermi: `${ props.perPrefix }:detail:tab_lxr_dr` },
        { type: 'remove', hasPermi: `${ props.perPrefix }:detail:tab_lxr_sc` },
        { type: 'export', hasPermi: `${ props.perPrefix }:detail:tab_lxr_dc` }
    ])

    const tableParams = reactive<tableTypes<LiaisonQuery, LiaisonVO>>({
        tableColumn: [
            { show: true, label: '联系人姓名', prop: 'name', sortable: true },
            { show: true, label: '手机号码', prop: 'telephone' },
            { show: true, label: '角色', prop: 'liaisonRoleName' },
            { show: true, label: '部门职务', prop: 'departmentPosition' },
            { show: true, label: '电子邮箱', prop: 'email', width: 200, sortable: true },
            { show: true, label: '固定电话', prop: 'fixedLineTelephone' },
            { show: true, label: 'skype', prop: 'skype' },
            { show: true, label: 'Facebook', prop: 'facebook' },
            { show: true, label: 'Whatsapp', prop: 'whatsapp' },
            {
                show: true, label: '操作', width: 220, prop: 'operation', disabledMove: true, render: ({ column }: { column: LiaisonVO }) => {
                    let emailBtn = auth.hasPermi(`${ props.perPrefix }:detail:tab_lxr_fyj`) ?
                        h(ElButton, { link: true, type: 'primary', onClick: () => { sendEmail('alone', column.email) } }, '发邮件') : ''
                    let detailBtn = auth.hasPermi(`${ props.perPrefix }:detail:tab_lxr_xq`) ?
                        h(ElButton, { link: true, type: 'primary', onClick: () => { getDetail(column.id) } }, '详情') : ''
                    return [
                        emailBtn,
                        detailBtn
                    ]
                }
            },
        ],
        queryParams: {
            customerId: props.customerId,
            resourceType: props.resourceType,
            resourceTypeId: props.resourceTypeId,
            nonId: props.nonId,
            correlation: 1
        },
        listFn: listLiaison,
        delFn: delLiaison,
        keyId: 'id',
        exportCode: 'EXPORT_LIAISON_EXCEL',
        commonQueryOrderBy: 'createTime'
    })

    /** 多选框选中数据 */
    const ids = ref<LiaisonVO[]>([])
    const handleSelectionChange = (selection: LiaisonVO[]) => {
        ids.value = selection
    }

    /** 新增按钮操作 */
    const router = useRouter();
    const handleAdd = (type: string, data?: LiaisonVO) => {
        if (props.resourceType == '30') {
            router.push('/customer/liaison/add?type=' + type + "&resourceType=" + props.resourceType + '&resourceTypeId=' + props.resourceTypeId + '&customerId=' + props.customerId + "&id=" + data?.id)
            return
        }

        router.push('/customer/liaison/add?type=' + type + "&id=" + data?.id + '&customerId=' + props.customerId + '&customerForm=' + props.customerForm)
    }

    const sendEmail = (type: string, email?: string) => {
        let mails = ''
        if(type == 'alone') {
            mails = email
        }else{
            if(ids.value.length == 0){
                ElMessage.error("请选择数据")
                return false
            }else{
                mails = ids.value.map(item => item.email).join(",")
            }
        }
        const { href } = router.resolve({
            path: '/email/send',
            query: {
                email: mails
            }
        })
        window.open(href, '_blank')
    }

    const liaisonTable = ref()
    const batchDelete = () => {
        if(ids.value.length == 0) {
            ElMessage.error("请选择数据")
            return false
        }
        ElMessageBox.confirm(
            '是否确认删除当前所选数据？',
            '确认提示',
            { type: 'warning', confirmButtonText: '提交' }
        ).then(() => {
            delLiaison(ids.value.map(item => item.id)).then(res => {
                if(res.success) {
                    ElMessage.success('删除成功')
                    liaisonTable.value.getData()
                }else{
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => { })
    }

    const getDetail = (id: string | number) => {
        router.pushTarget('/customer/liaison/detail?id=' + id)
        emits('changeRoute', id)
    }

    defineExpose({
        open
    })


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

</style>
