<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">
                            <template #rowItem-time>
                                <el-date-picker
                                    v-if="listSearchParams.time == 'custom'"
                                    style="height: 28px;flex-grow: 0;width: 225px;"
                                    v-model="listSearchParams.startAndEndTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    size="default"
                                />
                            </template>
                        </SearchBlock>
                    </div>
                    <div class="content_right">
                        <el-button class="delete_button_border_no_bg" @click="OpenAuditDialog">
                            赢单申请
                            <span class="bubble">{{ winnerOrderNum }}</span>
                        </el-button>
                        <el-button class="button_border" @click="OpenOperationLogDialog">操作日志</el-button>
                    </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>
                    </div>
                </template>
            </Table>

        </div>

        <!-- 赢单申请审核弹窗 -->
        <PreviewDialog 
            dialogWidth="1000px"
            class="audit_dialog"
            :previewVisible="auditDialogVisible"  
            title="审核申请" 
            :customFooter="true"
            @close="CloseAuditDialog">
            <TabSearch :tabList="tabList" :defaultTabKey="defaultAuditStatus" tab-type="box" />
            <ul class="audit_list_container">
                <li 
                    v-for="(item, index) in auditList" 
                    :key="item.id"
                    class="audit_card"
                >
                    <!-- 1. 顶部信息栏：时间、学校、产品、状态标签 -->
                    <div class="card_header">
                        <div class="header_left">
                            <span class="time_text">{{ item.followUpTime }}</span>
                            <span class="school_name">{{ item.schoolName }}</span>
                            <span class="product_name">{{ item.followUpProduct }}</span>
                            <!-- 使用 el-tag 模拟“赢单”状态 -->
                            <el-tag type="success" effect="light" size="small" class="status_tag">
                                {{ item.followUpStatus }}
                            </el-tag>
                        </div>
                        <div class="header_right">
                            <el-button class="delete_button_border_no_bg">驳回赢单</el-button>
                            <el-button class="button_border">通过赢单</el-button>
                        </div>
                    </div>

                    <!-- 2. 中部人员信息：跟进人、联系人、职务 -->
                    <div class="card_info">
                        <span>跟进人：{{ item.followUpUser }}</span>
                        <span>联系人：{{ item.contactPerson }}</span>
                        <span>职务：{{ item.jobTitle }}</span>
                    </div>
                    <!-- 3. 底部跟进内容 -->
                    <div class="card_content">
                        跟进内容：{{ item.followUpContent }}
                    </div>
                </li>
            </ul>
            <template #close>
                <el-button @click="CloseAuditDialog" class="button_background" >关闭</el-button>
            </template>
            <template #confirm><i></i></template>
        </PreviewDialog>

        <!-- 操作日志弹窗 -->
         <PreviewDialog title="操作记录" 
            class="operation_log_dialog"
            :customFooter="true"
            :previewVisible="operationLogDialogVisible" 
            @close="CloseOperationLogDialog">


            <!-- 搜索列表 -->
            <SearchBlock :searchList="operationLogSearchList" 
                @searchChange="HandleLogBlockSearchChange">
                <template #rowItem-time>
                    <el-date-picker
                        v-if="logSearchParams.time === 'custom'"
                        style="height: 28px;flex-grow: 0;width: 225px;"
                        v-model="logSearchParams.startAndEndTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                    />
                </template>
            </SearchBlock>

            <FormSearchGroup :searchList="[
                    {
                        key:'queryStr',
                        type:'input',
                        placeholder:'请输入关键字搜索',
                        hidden:false,
                        defaultValue:'',
                        disabled:false
                    }
                ]" @searchChange="HandleLogBlurSearchChange"/>


            <!-- 日志列表 -->
            <div>
                <ul class="log_list_container">
                    <li 
                        v-for="(item, index) in operationLogList" 
                        :key="item.id"
                        class="audit_card">
                        <!-- 1. 顶部信息栏 -->
                        <div class="card_header">
                            <div class="header_left">
                                <span class="time_text">{{ item.operationTime }}</span>
                                <span class="school_name">{{ item.operatorName }}</span>
                                <span class="school_name">{{ item.schoolName }}</span>
                                <span class="product_name">{{ item.operationType }}</span>
                            </div>
                        </div>
                        <!-- 2. 底部内容 -->
                        <div class="card_content">
                            操作内容：{{ item.operationContent }}
                        </div>
                    </li>
                </ul>

                <div class="page_pagination">
                    <span style="flex:1 1;color: #666666;font-size: 14px;">共 {{ logTotalNum  }} 条数据</span>
                    <!-- background layout="sizes, prev, pager, next"  -->
                    <el-pagination 
                        :current-page="logCurrentPage" 
                        :page-size="logPageSize" 
                        :page-sizes="[20, 50, 100]" 
                        background layout="sizes, prev, pager, next" 
                        :total="Number(logTotalNum)" 
                        @current-change="(val)=>HandleLogPaginaionChange({type:'currentPage',val})" 
                        @size-change="(val)=>HandleLogPaginaionChange({type:'pageSize',val})" />
                </div>
            </div>

            <template #close>
                <el-button @click="CloseOperationLogDialog" class="button_background" >关闭</el-button>
            </template>
            <template #confirm><i></i></template>

         </PreviewDialog>

    </div>
</template>


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

import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
import {tableColumns} from './table'
import TabSearch from '@/baseComponents/TabSearch.vue';

/**
 * 1. 默认列表 表格数据有关内容
 */
const tableData = ref([
    {
        id: 1,
        customerType: '首单客户',
        schoolName: '流星花园学校',
        contactPerson: '张三',
        jobTitle: '校长',
        educationStage: '中学',
        province: '北京市', // 新增列数据
        region: '西城区',   // 新增列数据
        groupName: '1小组', // 新增列数据
        followUpUser: '张三',
        followUpProduct: '大数据精准教学',
        followUpStatus: '试用测试',
        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案跟进文案跟进文案跟进文案',
        followUpTime: '2026-03-11 9:00',
    },
    {
        id: 2,
        customerType: '首单客户',
        schoolName: '北京师达',
        contactPerson: '张三',
        jobTitle: '校长',
        educationStage: '中学',
        province: '北京市',
        region: '西城区',
        groupName: '1小组',
        followUpUser: '张三',
        followUpProduct: '大数据精准教学',
        followUpStatus: '试用测试',
        followUpContent: '跟进文案跟进文案跟进文案跟进文案...',
        followUpTime: '2026-03-11 9:00',
    },
    {
        id: 3,
        customerType: '首单客户',
        schoolName: '北京五十七中学',
        contactPerson: '张三',
        jobTitle: '校长',
        educationStage: '中学',
        province: '北京市',
        region: '西城区',
        groupName: '1小组',
        followUpUser: '张三',
        followUpProduct: '大数据精准教学',
        followUpStatus: '试用测试',
        followUpContent: '跟进文案跟进文案跟进文案',
        followUpTime: '2026-03-11 9:00',
    }
]);

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 winnerOrderNum = ref(5)
// 审核弹窗数据
const auditDialogVisible = ref(false)
const defaultAuditStatus = ref(0)

const waitAuditNum = ref(0)
const auditPassNum = ref(0)
const auditRejectNum = ref(0)
const tabList = computed(()=>[
    {
        label:'待审核',
        key:0,
        suffix:waitAuditNum.value,
    },
    {
        label:'已通过',
        key:1,
        suffix:auditPassNum.value,
    },
    {
        label:'已驳回',
        key:2,
        suffix:auditRejectNum.value,
    },

])
const auditList = ref([
    {
        id:'1',
        followUpTime: '26-02-19 19:00',
        schoolName: '北京师达学校',
        followUpProduct: '大数据精准教学',
        followUpStatus: '赢单',
        followUpUser: '张三',
        contactPerson: '严谨',
        jobTitle: '校长',
        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文'
    },
    {
        id:'2',
        followUpTime: '26-02-19 19:00',
        schoolName: '北京师达学校',
        followUpProduct: '大数据精准教学',
        followUpStatus: '赢单',
        followUpUser: '张三',
        contactPerson: '严谨',
        jobTitle: '校长',
        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
    },
     {
        id:'3',
        followUpTime: '26-02-19 19:00',
        schoolName: '北京师达学校',
        followUpProduct: '大数据精准教学',
        followUpStatus: '赢单',
        followUpUser: '张三',
        contactPerson: '严谨',
        jobTitle: '校长',
        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
    }
])

const OpenAuditDialog = ()=>{
    auditDialogVisible.value = true
}
const CloseAuditDialog = ()=>{
    auditDialogVisible.value = false
}

/**
 * 4. 操作日志有关数据
 */
const operationLogList = ref([
    {
        id:1,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '编辑学校信息',
        operationContent: '学校名称【北京109中学】学段【初中】调整为学校名称【北京一零九中学】学段【九年一贯】。'
    },
    {
        id:2,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '删除联系人',
        operationContent: '删除 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
    },
    {
        id:3,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '新增联系人',
        operationContent: '新增 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
    },
    {
        id:4,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '编辑联系人',
        operationContent: '联系人姓名【张三】职务【校长】手机电话【17820681226】备注【文案文案】调整为 联系人姓名【李四】职务【校长】手机电话【17820681226】备注【文案文案】。'
    },
    {
        id:5,
        operationTime: '26-02-19 19:00',
        operatorName: '张安顺',
        schoolName: '北京师达学校',
        operationType: '转至公海',
        operationContent: '将客户转至公海。'
    }
]);

//操作日志搜索项 及操作
const logSearchParams = ref({})
const HandleLogBlockSearchChange = (params,key)=>{
    logSearchParams.value = {
        ...logSearchParams.value,
        ...params
    }
}
const HandleLogBlurSearchChange = (params,key)=>{
    listSearchParams.value = {
        ...listSearchParams.value,
        ...params
    }
} 

// 操作日志弹窗数据 及相关操作 
const operationLogDialogVisible = ref(false)
const OpenOperationLogDialog = ()=>{
    operationLogDialogVisible.value = true
}
const CloseOperationLogDialog = ()=>{
    operationLogDialogVisible.value = false
}

// 日志分页有关数据 及操作
const logCurrentPage = ref(1)
const logPageSize = ref(20)
const logTotalNum = ref(0)
const HandleLogPaginaionChange = (params)=>{
    const {type,val} = params
    if(type == 'currentPage'){
        // 处理页面跳转

    }else if(type == 'pageSize'){
        // 处理页容量
    }
}


</script>


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

.content_right{
    align-self: flex-start;
    flex-wrap: wrap;
    gap:20px !important;

    .delete_button_border_no_bg{
        position: relative;
        .bubble{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top:-10px;
            right: -10px;
            width: 20px;
            height: 20px;
            font-size: 12px;
            background: #F56C6C;
            border-radius: 50%;
            color: white;
        }
    }
}


.operation_log_dialog,
.audit_dialog{
    :deep(.custom){
        display: flex;
        flex-direction: column;
        gap:16px;
    }

    :deep(.el-dialog__body){
        max-height: 500px;
        min-height: 500px;
    }
}

.log_list_container,
.audit_list_container {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .audit_card {
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #EBEEF5;
        display: flex;
        flex-direction: column;
        gap:8px;

        /* 顶部布局 */
        .card_header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap:10px;

            .header_left {
                display: flex;
                align-items: center;
                gap:8px;
                font-weight: 600;
                color: #333333;

                .status_tag {
                    height: 25px;
                    padding:0 8px;
                    font-weight: 400;
                    font-size: 12px;
                    background: rgba(46,100,250,0.1);
                    border-radius: 4px;
                    color: #2E64FA;
                }
            }
            .header_right{
                display: flex;
                gap:16px;
                .el-button{
                    margin:0 !important;
                }
            }
        }

        /* 中部布局 */
        .card_info {
            display: flex;
            align-items: center;
            gap:11px;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
        }

        /* 底部内容布局 */
        .card_content {
            font-weight: 400;
            font-size: 12px;
            color: #999999;
        }
    }
}

.audit_list_container{
    .audit_card{
        padding: 12px 16px;
        .header_left {
            font-size: 14px;
        }
    }
}

.log_list_container{
    .audit_card{
        padding:8px 12px;
        .header_left{
            font-size: 12px;
        }
    }
}


</style>