<template>
    <view class="con-body">
        <view>
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'日常走访选择活动类型'" :leftFlag="true" :rightFlag="false">
            </customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            
                <checkbox-group class="block" @change="checkboxChange">
                    <view class="itemClass" v-for="(item, index) in dataList" :key="item.id">
                        <checkbox class='checkBoxClass' :value="item.name"></checkbox>
                        <view class="clientClass">
                            <text class="blue-text">{{ item.name }}</text>
                        </view>
                    </view>
                </checkbox-group>
        </view>
    </view>

</template>


<script setup>
import customHeader from '@/components/customHeader.vue'
import cache from '../../../../utils/cache'
import { reactive } from 'vue'


const dataList = reactive( [
					{id:'1',name:'日常走访'},
					{id:'2',name:'组合拳推广'},
					{id:'3',name:'竞标'},
					{id:'4',name:'型号追踪'},
					{id:'5',name:'重点产品推广'},
					{id:'6',name:'谈价'},
					{id:'7',name:'道歉、感谢'},
					{id:'8',name:'邀约'},
					{id:'9',name:'归零会'},
					{id:'11',name:'高层交流'},
					{id:'12',name:'质量问题处理'},
					{id:'13',name:'供应商大会'},
					{id:'14',name:'新产品推广'},
					{id:'15',name:'技术支持'}
				])

//勾选内容
function checkboxChange(e) {
        cache.set('checkedRCActivityTypeList', e.detail.value)
}

</script>

<style scoped lang="scss">

.con-body{
    background: white;
}

 .white-bg {
    width: 690rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
}

.white-bg.white-bg-2 {
    margin-bottom: 20rpx;
}

.white-bg.white-bg-3 {
    border-radius: 0
}

.white-bg .w-b-title {
    color: #3384DF;
    font-size: 38rpx;
}

.form-con {
    padding: 30rpx 0 0;
}

:deep(.form-con .uni-forms-item) {
    margin-bottom: 22px !important;
}


/* Container for the checkbox group */
.checkbox-group.block {
    width: 100%;
}

/* Each item row */
.itemClass {
    width: 340rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    margin-left: 15rpx;
    border-bottom: 1px solid #eee;
    float: left;
    /* optional divider */
}

/* Checkbox styling */
.checkBoxClass {
    margin-right: 12rpx;
}

/* Content container */
.clientClass {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 36rpx;
    color: #333;
    /* default text color */
}

/* Blue username text */
.blue-text {
    /* or any blue you prefer */
    margin-right: 5rpx;
}

</style>