<template>
    <div class="main_container">
        <div class="page_item end_item">
            <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <SearchBlock :searchList="headerSearchList"  @searchChange="HandleBlockSearchChange" />
                    </div>
                </div>
            </div>
            <FormSearchGroup :searchList="[
                {
                    key:'queryStr',
                    type:'input',
                    placeholder:'请输入关键字搜索',
                    hidden:false,
                    defaultValue:'',
                    disabled:false
                }
            ]" @searchChange="HandleBlurSearchChange"/>


            <Table :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum" 
                :tableColumns="tableColumns" :tableData="tableData">
                <template #num="{currentIndex}">
                    {{ (currentPage - 1) * pageSize + currentIndex }}
                </template>
                
                <template #followUpContent="{row}">
                    <span class="two_line_ellipsis">{{ row.followUpContent }}</span>
                </template>

                <template #operation="{row}">
                    <div class="table_row_option">
                        <span class="option_button_editor">编辑</span>
                        <span class="option_button_editor" @click="GoToDetail(row)">详情</span>
                    </div>
                </template>
            </Table>

        </div>
    </div>
</template>


<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import SearchBlock from '@/baseComponents/SearchBlock.vue';
import {headerSearchList} from './searchBlock'
import Table from '@/baseComponents/Table.vue';
import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import {tableColumns} from './table'


const router = useRouter()
/**
 * 1. 默认列表 表格数据有关内容
 */
const tableData = ref([
    {
        id: 1,
        customerType: '首单客户',
        schoolName: '流星花园学校',
        educationStage: '中学',
        provinceName: '北京市',
        cityName: '西城区',
        groupName: '小组',
        owner: '张三',
        claimTime: '2026-03-11',
        lastFollowUpTime: '2026-03-11'
    },
    {
        id: 2,
        customerType: '首单客户',
        schoolName: '北京师达',
        educationStage: '中学',
        provinceName: '北京市',
        cityName: '西城区',
        groupName: '小组',
        owner: '张三',
        claimTime: '2026-03-11',
        lastFollowUpTime: '2026-03-11'
    },
    {
        id: 3,
        customerType: '首单客户',
        schoolName: '北京五十七中学',
        educationStage: '中学',
        provinceName: '北京市',
        cityName: '西城区',
        groupName: '小组',
        owner: '张三',
        claimTime: '2025-11-01',
        lastFollowUpTime: '2025-11-01'
    }
]);
const currentPage = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)


/**
 * 2.默认列表 筛选项有关数据
 */
const listSearchParams = ref({})
const HandleBlockSearchChange = (params,key)=>{
    listSearchParams.value = {
        ...listSearchParams.value,
        ...params
    }
}
const HandleBlurSearchChange = (params,key)=>{
    // console.log('blurl--',params)
    listSearchParams.value = {
        ...listSearchParams.value,
        ...params
    }
}

/**
 * 3. 表格操作
 */
const GoToDetail = (row)=>{
    router.push(`myCustomerDetail?id=${row.id}`)
}


</script>


<style lang="scss" scoped>
.end_item{
    gap:16px;
}

</style>