<template>
    <el-card shadow="never" class="list-card">
        <template #header>
            <div class="top_nav flex">
                <div class="nav_list" v-for="item in liaisonNav" @click="changeNav(item.value)">
                    {{ item.label }}
                    <i :class="item.value == queryParams.queryRangeType ? 'on' : ''"></i>
                </div>
            </div>
            <div class="search table_area">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-row :gutter="16">
                        <el-col :span="4">
                            <el-form-item prop="liaisonName">
                                <el-input v-model="queryParams.liaisonName" placeholder="搜索联系人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="customerName">
                                <el-input v-model="queryParams.customerName" placeholder="搜索关联客户" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="birthday">
                                <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="YYYY-MM-DD"
                                    placeholder="请选择生日" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="liaisonRoleDictValue">
                                <SelectDict v-model="queryParams.liaisonRoleDictValue" placeholder="请选择角色" dictCode="liaison_role"></SelectDict>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if='showAll'>
                            <el-form-item prop="rangeTime">
                                <el-date-picker
                                    v-model="rangeTime"
                                    type="datetimerange"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    start-placeholder="最后跟进"
                                    end-placeholder="最后跟进"
                                    @change="changeTime"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if='!showAll'>
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                                <el-button type="primary" icon="ArrowDown" text @click="showAll=true">展开检索</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="16" v-if='showAll'>
                        <el-col :span="4">
                            <el-form-item prop="ownerBy">
                                <SelectUser v-model="queryParams.ownerByIds" multiple placeholder="归属人员"></SelectUser>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                                <el-button type="primary" icon="ArrowUp" text @click="showAll=false">收起检索</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                </el-form>
            </div>
        </template>

        <Table ref="liaisonTable" :tableParams="tableParams" :btnRole="btnRole" @handleAdd="handleAdd('add')"
            @handleEdit="handleAdd('edit', $event)" @selectionChange="handleSelectionChange">
            <template #left>
                <el-button v-hasPermi="['customer:liaison:fyj']" @click="sendEmail('multiple')">发邮件</el-button>
            </template>
        </Table>
    </el-card>
</template>

<script setup name="liaison" lang="ts">
import { listLiaison, delLiaison } from '@/api/customer/liaison';
import { LiaisonVO, LiaisonQuery } from '@/api/customer/liaison/types';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'
import { useDictCache } from '@/hooks/web/useDict'

const { queryDictDetailByCodes } = useDictCache(['liaison_role'])
queryDictDetailByCodes()

const router = useRouter();
const btnRole = ref([
    { type: 'add', hasPermi: `customer:liaison:add` },
    { type: 'edit', hasPermi: `customer:liaison:edit` },
    { type: 'remove', hasPermi: `customer:liaison:remove` },
    { type: 'import', hasPermi: `customer:liaison:import` },
    { type: 'export', hasPermi: `customer:liaison:export` }
]);
const showAll = ref(false)
const queryFormRef = ref<ElFormInstance>();

const liaisonNav = [
    { label: '全部联系人', value: 0 },
    { label: '我的联系人', value: 10 },
    { label: '下属的联系人', value: 30 },
    // { label: '我协作的', value: 40 },
    // { label: '下属协作的', value: 50 }
]
const changeNav = (val: number) => {
    queryParams.value.queryRangeType = val
    handleQuery()
}

const rangeTime = ref()
const changeTime = (value: string[] | null) => {
    queryParams.value.lastFollowUpBeginTime = value ? value[0] : ''
    queryParams.value.lastFollowUpEndTime = value ? value[1] : ''
}

const tableParams = reactive<tableTypes<LiaisonQuery, LiaisonVO>>({
    cloumnCode: 'liaison',
    menuId: router.currentRoute.value?.meta?.menuId,
    tableColumn: [
        { show: true, label: '联系人姓名', prop: 'name', sortable: true, render: ({ column }: { column: LiaisonVO }) => {
            return h('span', { class: 'link', onClick: () => { detail(column.id) } }, column.name)
        } },
        { show: true, label: '关联客户', prop: 'customerId', sortable: false, render: ({ column }: { column: LiaisonVO }) => {
            return h('span', { class: 'link', onClick: () => { customerDetail(column.customerId,column.customerForm) } }, column.customerName)
        } },
        { show: true, label: '电子邮箱', prop: 'email', sortable: true },
        { show: true, label: '固定电话', prop: 'fixedLineTelephone', sortable: false },
        { show: true, label: '角色', prop: 'liaisonRoleName', sortable: false },
        { show: true, label: '部门职务', prop: 'departmentPosition', sortable: false },
        { show: true, label: '最后跟进', prop: 'lastFollowUpTime', sortable: false },
        { show: false, label: '手机号码', prop: 'telephone', sortable: false },
        { show: false, label: '传真号码', prop: 'faxNumber', sortable: false },
        { show: false, label: '邮政编码', prop: 'postcode', sortable: false },
        { show: false, label: '联系方式', prop: 'contactInformation', sortable: false },
        { show: false, label: '备注信息', prop: 'remarks', sortable: false },
        { show: false, label: 'qq', prop: 'qq', sortable: false },
        { show: false, label: 'skype', prop: 'skype', sortable: false },
        { show: false, label: '旺旺', prop: 'wangwang', sortable: false },
        { show: false, label: '微信', prop: 'wechat', sortable: false },
        { show: false, label: 'Facebook', prop: 'facebook', sortable: false },
        { show: false, label: 'Whatsapp', prop: 'whatsapp', sortable: false },
        { show: false, label: '创建时间', prop: 'createTime', sortable: true },
        { show: false, label: '修改时间', prop: 'updateTime', sortable: false },
        {
            show: true, label: '操作', width: 180, prop: 'operation', disabledMove: true, render: ({ column }: { column: LiaisonVO }) => {
                return [
                    auth.hasPermi('customer:liaison:fyj') ?
                    h(ElButton, { link: true, type: 'primary', onClick: () => { sendEmail('alone', column.email) } }, '发邮件') : '',
                ]
            }
        },
    ],
    queryParams: {
        blurry: undefined,
        queryRangeType: 0,
        birthday: undefined,
        liaisonRoleDictValue: undefined,
        lastFollowUpBeginTime: undefined,
        lastFollowUpEndTime: undefined,
        ownerByIds: undefined,
        liaisonName: undefined,
        customerName: undefined,
    },
    listFn: listLiaison,
    delFn: delLiaison,
    keyId: 'id',
    importCode: 'IMPORT_LIAISON_EXCEL',
    exportCode: 'EXPORT_LIAISON_EXCEL',
    commonQueryOrderBy: 'createTime'
})

const { queryParams } = toRefs(tableParams);

const liaisonTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    liaisonTable.value.getData()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

/** 新增按钮操作 */
const handleAdd = (type: string, data?: LiaisonVO) => {
    router.push('./liaison/add?type=' + type + "&id=" + data?.id)
}

const detail = (id: number | string) => {
    router.pushTarget('/customer/liaison/detail?id=' + id + '&scopeMenuId=' + router.currentRoute.value?.meta?.menuId)
}

const customerDetail = (customerId: number | string,customerForm:number | string) => {
    if(customerForm==10){
        router.pushTarget('/customer/customerDetail?id=' + customerId)
    }else{
        router.pushTarget('/clue/detail?id=' + customerId)
    }
    
}

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

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')
}
</script>
