<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>


		<view class="inner-box">
			<view class="list-cont">
				<radio-group class="block" @change="radioChange">
					<view class="item"   v-for="(item, index) in dataList">
						<radio class='radio' :value="index" ></radio>
						<view class="name">{{item.cusName+"（"+item.shortName+"）"}}</view>
					</view>
				</radio-group>
			</view>
		</view>

        </view>
    </view>
</template>

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



const message = useMessage();

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


onMounted(() => {

})

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




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

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

//监视查询的内容的变化
let queryCusForm = reactive({})
watch(searchContent,(newValue,oldValue)=>{
    queryCusForm.cusName = searchContent.value
    getYsCustomerList(queryCusForm).then(res=>{
        dataList.value = res.rows
    })
})

function radioChange(event) {
     const selectedIndex = event.detail.value
    let test = dataList.value[selectedIndex]
    // 发送全局事件
    uni.$emit('onCustomerSelected', test)
    let cusName = test.cusName;//客户名称
    let cusId = test.cusId;//客户ID
    uni.navigateBack()//返回上一页
}




</script>

<style scoped lang="scss">

.con-body{
    background: white;
}


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

/* Each item row */
.itemClass {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    margin-left: 15rpx;
    border-bottom: 1px solid #eee;
    /* 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;
}
.inner-box {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.list-cont {
  width: 100%;
}

.block {
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.radio {
  margin-right: 12px;
  transform: scale(0.9);
}

.name {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.checked {
  color: #007AFF; /* 选中状态的颜色 */
}
</style>
