<template>
    <div class="main_container">
        <TopBackNav>
            <template #topRight>
                <div class="header_content">
                    <span>{{ customerBaseMsg.schoolName }}</span>
                    <el-tag type="success" effect="light" size="small" class="status_tag">
                        {{ customerBaseMsg.customerType }}
                    </el-tag>
                </div>
                <div class="desc">
                    <span>学段：{{ customerBaseMsg.educationStage }}</span>
                    <span>省份：{{ customerBaseMsg.province }}</span>
                    <span>地区：{{ customerBaseMsg.district }}</span>
                    <span>地址：{{ customerBaseMsg.address }}</span>
                    <span>归属人：{{ customerBaseMsg.owner }}</span>
                    <span>认领时间：{{ customerBaseMsg.claimTime }}</span>
                    <span>上次跟进时间：{{ customerBaseMsg.lastFollowUpTime }}</span>
                </div>
                <div class="action">
                    <el-button class="button_background"><img :src="peopleEditIcon" alt=""> 写跟进</el-button>
                    <el-button class="button_border"><img :src="addIcon" alt=""> 新增联系人</el-button>
                    <el-button class="button_refresh"><img :src="editIcon" alt=""> 编辑</el-button>
                    <el-button class="button_refresh"><img :src="poepleMoveIcon" alt=""> 转至公海</el-button>
                    <el-button class="button_refresh"><img :src="exchangeIcon" alt=""> 转让</el-button>
                    <el-button class="button_refresh"><img :src="logIcon" alt=""> 操作记录</el-button>
                </div>
            </template>
        </TopBackNav>

        <div class="page_item bottom_detail end_item">
            <TabSearch :defaultTabKey="defaultShowTab" 
                tabType="line" :tabList="tabList" 
                @tabChange="HandleTabChange"
                />
            <div class="page_solid_line" />
            <div class="page_jg_20"></div>
            <ContactDetail v-if="defaultShowTab === 'contactDetails'"></ContactDetail>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TopBackNav from '@/baseComponents/TopBackNav.vue';
import addIcon from '@/assets/icon/add.svg';
import peopleEditIcon from '@/assets/icon/people_edit.png'
import poepleMoveIcon from '@/assets/icon/people_move.png'
import editIcon from '@/assets/icon/edit.svg'
import exchangeIcon from '@/assets/icon/exchange.png'
import logIcon from '@/assets/icon/log.png'
import TabSearch from '@/baseComponents/TabSearch.vue';
import {tabList} from './tabSearch'
import ContactDetail from './contactDetail/index.vue'

const customerBaseMsg = ref({
  schoolName: '北京市第一零九中学',
  customerType: '首单客户',
  educationStage: '九年一贯',
  province: '北京',
  district: '东城区',
  address: '北京市东城区葱店西街56号',
  owner: '张三',
  claimTime: '2024-09-20',
  lastFollowUpTime: '2025-03-12'
});

const defaultShowTab = ref('contactDetails')
const HandleTabChange = (val)=>{
    defaultShowTab.value = val
}

</script>



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

    :deep(.top_right){
        flex: 1 1;
        .header_content{
            display: flex;
            align-items: center;
            gap:10px;
            font-weight: 600;
            font-size: 20px;
            color: #333333;
            line-height: 28px;
            .status_tag{
                height: 25px;
                border-radius: 4px ;
                padding:0 8px;
                font-weight: 400;
                font-size: 12px;
                color: #2E64FA;
                background: rgba(46,100,250,0.1);
            }
        }
        .desc{
            display: flex;
            gap:5px 16px;
            flex-wrap: wrap;
            font-size: 12px;
            color: #999999;
            margin-top: 8px;
            margin-bottom: 16px;
        }

        .action{
            display: flex;
            gap:16px;
            .el-button{
                margin:0;
                img{
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>