<template>
    <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="customerName">
                        <el-input v-model="queryParams.customerName" placeholder="搜索线索信息" clearable
                            prefix-icon="Search" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item prop="liaisonName">
                        <el-input v-model="queryParams.liaisonName" placeholder="搜索联系人" clearable
                            prefix-icon="Search" />
                    </el-form-item>
                </el-col>
                <el-col :span="4" v-if="props.type=='public'">
                    <el-form-item prop="reasonPublicCustomerDictValue">
                        <SelectDict v-model="queryParams.reasonPublicCustomerDictValue" placeholder="置公原因"
                            dictCode="reason_public_customer"></SelectDict>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item prop="continent">
                        <el-cascader style="width: 100%" placeholder="区域名称" :options="region" v-model="regionValue"
                            clearable filterable @change="getRegion" />
                    </el-form-item>
                </el-col>
                <el-col :span="4" v-if='showAll'>
                    <el-form-item prop="customerStatusDictValue">
                        <SelectDict v-model="queryParams.clueStatusDictValue" placeholder="线索状态" dictCode="clue_status">
                        </SelectDict>
                    </el-form-item>
                </el-col>
                <el-col :span="4" v-if='showAll && !queryParams.hasPublicCustomer'>
                    <el-form-item prop="ownerBy">
                        <SelectUser v-model="queryParams.ownerByIds" multiple placeholder="归属人员"></SelectUser>
                    </el-form-item>
                </el-col>
                <el-col :span="6" v-if='!showAll'>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button @click="reset">重置</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" v-if="props.type == 'public'">
                    <el-form-item prop="formerOwnerByList">
                        <SelectUser multiple v-model="queryParams.formerOwnerByList" placeholder="前归属人员"></SelectUser>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item prop="customerSourceDictValue">
                        <SelectDict v-model="queryParams.customerSourceDictValue" placeholder="线索来源"
                            dictCode="customer_source"></SelectDict>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="lastFollowUpTime">
                        <el-date-picker v-model="daterange" type="datetimerange" range-separator="-"
                            start-placeholder="最后跟进" end-placeholder="最后跟进" value-format="YYYY-MM-DD HH:mm:ss"
                            @change="getDate" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button @click="reset">重置</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>

<script setup lang="ts">
    import { useDictCache } from '@/hooks/web/useDict'
    import {region} from '@/utils/region';

    const { queryDictDetailByCodes } = useDictCache(['customer_source', 'clue_status', 'reason_public_customer'])
    queryDictDetailByCodes()

    const props = defineProps(['queryParams','type'])
    const emit = defineEmits(['handleQuery'])
    const showAll = ref(false)
    const search = () => {
        emit('handleQuery')
    }

    const daterange = ref('')
    const getDate = (val: string[] | null) => {
        props.queryParams.lastFollowUpBeginTime = val ? val[0] : ''
        props.queryParams.lastFollowUpEndTime = val ? val[1] : ''
    }

    const queryFormRef = ref()
    const reset = () => {
        regionValue.value = []
        props.queryParams.country = ''
        queryFormRef.value?.resetFields();
        daterange.value = ""
        props.queryParams.lastFollowUpBeginTime = ""
        props.queryParams.lastFollowUpEndTime = ""
        emit('handleQuery')
    }
    const regionValue = ref([])
    const getRegion = (value) => {
        props.queryParams.country = value?value[1]:''
    }
</script>
