<template>
    <div class="main_container">
        <div class="page_item end_item">
            <!-- 顶部公海设置 -->
            <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">公海设置</div>
                    </div>
                </div>
            </div>

            <!-- 公海设置的具体表单内容 -->
            <div class="high_seas_config">
                <div class="config_item">
                    <span class="label_text">客户持有上限：</span>
                    <el-input type="number" value="100"  />
                    <span>个</span>
                </div>
                <div class="config_item">
                    <span class="label_text">每日手动退回公海上限：</span>
                    <el-input type="number" value="15"  />
                    <span>个</span>
                </div>
                <div class="config_item">
                    <span class="label_text">无跟进自动退回公海天数：</span>
                    <el-input type="number" value="15" />
                    <span>天</span>
                </div>
            </div>


            <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">字段设置</div>
                    </div>
                </div>
            </div>

            <!-- 字段设置区域 -->
            <div class="field_settings_area">
                <SettingCard cardTitle="地区管理" :cardItems="region_list"
                    :middleColumnItm="{name:'province',label:'省份'}"
                    :defaultTableData="region_list"/>
                <SettingCard cardTitle="学段管理" :cardItems="stage_list"
                    :middleColumnItm="{name:'phaseOfStudyingName',label:'学段名称'}"
                    :defaultTableData="stage_list"/>
                <SettingCard cardTitle="产品管理" :cardItems="product_list"
                    :middleColumnItm="{name:'productName',label:'产品名称'}"
                    :defaultTableData="product_list"/>
                <SettingCard cardTitle="跟进状态" :cardItems="status_list" 
                    :middleColumnItm="{name:'followUpStatus',label:'跟进状态'}"
                    :defaultTableData="status_list"/>
                <SettingCard cardTitle="职务管理" :cardItems="job_list"
                    :middleColumnItm="{name:'positionName',label:'职务名称'}"
                    :defaultTableData="job_list"/>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import SettingCard from '@/components/settingCard/SettingCard.vue';

// 模拟图片中的数据
const region_list = ref([
    { province: '北京市' },
    { province: '上海市' },
    { province: '天津市' },
    { province: '广东' },
    { province: '辽宁' },
    { province: '河南' },
    { province: '河北' },
    { province: '湖南' },
    { province: '湖北' },
    { province: '云南' },
    { province: '福建' },
    { province: '海南' },
    { province: '四川' },
    { province: '初中' },
    { province: '初中' },
    { province: '初中' },
    { province: '初中' }
]);
const stage_list = ref([
    { phaseOfStudyingName: '幼儿园' },
    { phaseOfStudyingName: '小学' },
    { phaseOfStudyingName: '初中' },
    { phaseOfStudyingName: '高中' },
    { phaseOfStudyingName: '完中' },
    { phaseOfStudyingName: '九年一贯' },
    { phaseOfStudyingName: '十二年一贯' },
    { phaseOfStudyingName: '职高' },
    { phaseOfStudyingName: '大学' },
    { phaseOfStudyingName: '初中' }
]);
const product_list = ref([
    { productName: '大数据精准教学诊断平台' },
    { productName: '选择题智能判分' },
    { productName: '教学材料采集' },
    { productName: '教师校本研修' },
    { productName: '学生校本课程学习' },
    { productName: '智能校本选课' },
    { productName: '教师专业发展' },
    { productName: '协同教研备课' },
    { productName: '校园信息发布' },
    { productName: '智能评教评学' },
    { productName: '智能考场编排' },
    { productName: '智能听课评课' },
    { productName: '基础数据管理' }
]);
const status_list = ref([
    { followUpStatus: '线索建立' },
    { followUpStatus: '需求调研' },
    { followUpStatus: '方案演示' },
    { followUpStatus: '试用测试' },
    { followUpStatus: '项目搁置' },
    { followUpStatus: '输单' },
    { followUpStatus: '赢单' }
]);

const job_list = ref([
    { positionName: '校长' },
    { positionName: '副校长' },
    { positionName: '执行校长' },
    { positionName: '教学主任' },
    { positionName: '教务主任' },
    { positionName: '信息主任' }
]);
</script>


<style lang="scss" scoped>
.grade_title{
    margin-bottom: 16px;
}
/* 公海配置行 */
.high_seas_config {
    display: flex;
    flex-wrap: wrap;
    gap:20px 100px;

    margin-bottom: 48px;
    font-size: 14px;
    color: #333;

    .config_item {
        display: flex;
        align-items: center;
        gap:10px;
        .label_text {
            flex-shrink: 0;
        }
        .el-input{
            width: 80px;
        }
    }
}

// 字段设置区域
.field_settings_area {
    display: flex;
    flex-direction: column;
    gap:16px;
}
</style>