<template>
    <view class="con-body">
        <view>
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'走访报告添加我方参与人员'" :leftFlag="true" :rightFlag="false">
            </customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>
            <uni-easyinput prefixIcon="search" v-model="searchContent" placeholder="请输入客户人员名称" clearable
                @iconClick="iconClick">
            </uni-easyinput>
                <checkbox-group class="block" @change="checkboxChange">
                    <view class="itemClass" v-for="(item, index) in dataList" :key="item.userId">
                        <checkbox class='checkBoxClass' :value="item.nickName"></checkbox>
                        <view class="clientClass">
                            <text class="blue-text">{{ item.nickName }}</text>
                        </view>
                    </view>
                </checkbox-group>
        </view>
    </view>
</template>

<script setup>
import customHeader from '@/components/customHeader.vue'
import {myUserNameList } from '../../../../api/crm/activity/activity'
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMessage } from '../../../../utils/message'
import cache from '../../../../utils/cache'



const message = useMessage();

//点击查询客户人员
const queryParams = ref({
    cusName: '',
    nickName:'',
    pageNum: 1,
    pageSize: 10
})

onMounted(() => {
    getMyUserNameList()
})

let chooseType = ref()
onLoad(options => {
    queryParams.value.cusName = options.cusName
    chooseType.value = options.chooseType
})
const dataList = ref([])

function getMyUserNameList() {
    myUserNameList(queryParams.value).then(res => {
        dataList.value = res.rows
    })
}


//查询某一客户人员
let searchContent = ref('')

function iconClick() {
    message.toast('点击了查询，当前内容：' + searchContent.value)
}

//监视查询的内容的变化
watch(searchContent,(newValue,oldValue)=>{
    queryParams.value.nickName = searchContent.value
    //变化了之后，重新查询内容
    myUserNameList(queryParams.value).then(res => {
        dataList.value = res.rows
    })
})



//勾选内容
function checkboxChange(e) {
    //这里要根据传递来的不同的内容，生成不同的setCache方法
    if(chooseType.value=='日常走访'){
        cache.set('checkedRCMyUserList', e.detail.value)
    }
        if(chooseType.value=='业务招待'){
        cache.set('checkedYWMyUserList', e.detail.value)
    }
        if(chooseType.value=='技术交流'){
        cache.set('checkedJSMyUserList', e.detail.value)
    }
        if(chooseType.value=='来厂参观'){
        cache.set('checkedLCMyUserList', e.detail.value)
    }
        if(chooseType.value=='党建活动'){
        cache.set('checkedDJMyUserList', e.detail.value)
    }
        if(chooseType.value=='文体活动'){
        cache.set('checkedWTMyUserList', e.detail.value)
    }
        if(chooseType.value=='联谊活动'){
        cache.set('checkedLYMyUserList', 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>
