<template>
	<view class="con-body">
		<view class="con-bg">
			<!-- 头部 -->
			<customHeader ref="customHeaderRef" :title="'个人详情查看统计表'" :leftFlag="true" :rightFlag="false"></customHeader>

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height"></view>

			<!-- 正文内容 -->
			<view>
				<!-- 搜索 -->
				<view class="search">
					<picker :value="index1" @change="handlePlace1" :range="monthArray" :range-key="'name'"
						class="picker-bg">
						<view class="picker">
							<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong"
								size="18"></uni-icons>
							<view>{{ monthArray[index1]?.name || '选择月份' }}</view>
							<uni-icons type="down" size="18"></uni-icons>
						</view>
					</picker>
					<!-- <picker @change="handlePlace" :value="index2" :range="palceArray" class="picker-bg"
						:range-key="'name'">
						<view class="picker">
							<uni-icons type="person" size="18"></uni-icons>
							<view>{{palceArray[index2]?.name || '选择区域' }}</view>
							<uni-icons type="down" size="18"></uni-icons>
						</view>
					</picker> -->
					<view class="picker-bg">
					            <view class="picker">
					              <uni-icons type="person" size="18" color="#ffffff"></uni-icons>
					              <input 
					                class="search-input"
					                v-model="formData.bandResult" 
					                placeholder="输入业务员"
					                placeholder-style="color:#ffffff;font-size:28rpx"
					              />
					            </view>
					          </view>
					<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
				</view>

				<!-- 回款信息查询 -->
				<view class="white-bg">
					<view class="table-title">回款信息查询</view>
					<view v-if="loading" class="loading-container">
											<uni-load-more status="loading" contentText="加载中..."></uni-load-more>
										</view>
										<!-- 添加空数据提示 -->
										<view v-else-if="tableData.length === 0" class="empty-tip">
											暂无数据
										</view>
					
					
					<table v-else  class="my-table">
						<tr>
							<th class="tab-width100">业务员姓名</th>
							<th class="tab-width160">客户名称</th>
							<th>目标回款</th>
							<th>实际回款</th>
							<th>完成度</th>
						</tr>
						<tr v-for="(item, index) in tableData" :key="index">
							<td>{{ item.userName }}</td>
							<td class="txtLeft">{{ item.cusName }}</td>
							<td>{{ item.targetAmount }}</td>
							<td>{{ item.backNum }}</td>
							<td>{{ item.jisuan }}</td>
						</tr>
					</table>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import customHeader from '@/components/customHeader.vue'
	import {
		getDate
	} from '@/utils/datetime.js'
	import {
		getPersonalPaymentCollectionTable
	} from '@/api/crm/api_ys.js' 
const loading = ref(false) // 加载状态
	const index1 = ref(0)
	const index2 = ref(0)
	let peopleIndex = ref(0);
	// 选择列表
	let bindPickerChange = (e) => {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		peopleIndex.value = e.detail.value
	}

	let searchValue = ref(null)
	// 查询搜索跳转
	let handleSearch = () => {
		getCrmMarketInformationList();
	}
	// 表单数据
	const formData = ref({
		month: "1",
		bandResult: '',
	})
	const tableData  = ref([])
	const palceArray = ref([{
		id: 1,
		name: '北京大区'
	}, {
		id: 2,
		name: '市场三部'
	}, {
		id: 3,
		name: '市场二部'
	}, {
		id: 4,
		name: '南方大区'
	}, {
		id: 5,
		name: '北方大区'
	}, {
		id: 6,
		name: '西部大区'
	}])
	const monthArray = ref([
	  { id: 1, name: '1月' },
	  { id: 2, name: '2月' },
	  { id: 3, name: '3月' },
	  { id: 4, name: '4月' },
	  { id: 5, name: '5月' },
	  { id: 6, name: '6月' },
	  { id: 7, name: '7月' },
	  { id: 8, name: '8月' },
	  { id: 9, name: '9月' },
	  { id: 10, name: '10月' },
	  { id: 11, name: '11月' },
	  { id: 12, name: '12月' }
	])
			const handlePlace1 = (e) => {
				index1.value = e.detail.value
				console.log('index1:', monthArray.value[e.detail.value]?.name)
				formData.value.month = monthArray.value[e.detail.value]?.id || ''
			}
			const handlePlace = (e) => {
				index2.value = e.detail.value
				console.log('index2:', palceArray.value[e.detail.value]?.name)
				formData.value.region = palceArray.value[e.detail.value]?.name || ''
			}
			
			// 获取数据列表
			const getCrmMarketInformationList = async () => {
				loading.value = true
				try {
					const res = await getPersonalPaymentCollectionTable(formData.value);
					// 直接赋值给响应式变量
					tableData.value = res.rows || []
					console.log('获取到的数据:', tableData.value)
				} catch (error) {
					console.error('获取数据失败:', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'error'
					})
				} finally {
					loading.value = false
				}
			}
			// 获取数据列表（无参数）
			const getPersonalPaymentCollectionTableNoPo = async () => {
				loading.value = true
				try {
					const res = await getPersonalPaymentCollectionTable();
					// 直接赋值给响应式变量
					tableData.value = res.rows || []
					console.log('获取到的数据:', tableData.value)
				} catch (error) {
					console.error('获取数据失败:', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'error'
					})
				} finally {
					loading.value = false
				}
			}
				onMounted(() => {
					getPersonalPaymentCollectionTableNoPo()
				})
			
</script>

<style scoped>
  /* 新增搜索输入框样式 */
  .search-input {
    flex: 1;
    height: 100%;
    color: #ffffff;
    font-size: 28rpx;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 10rpx;
    line-height: 1;
  }

  .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  /* 保持原有样式 */
  .search {
    display: flex;
    padding: 0 30rpx;
  }

  .search .btn-search {
    border: none;
    background: none;
    line-height: normal;
    color: #fff;
    line-height: 56rpx !important;
    padding: 10rpx 0 0;
    text-align: left;
    cursor: pointer;
  }

  .search .btn-search::after {
    display: none;
  }

  .search .picker-bg {
    /* display: flex; */
    background-color: #6FA2F8;
    border-radius: 25px;
    color: #fff;
    font-size: 28rpx;
    padding: 0rpx 20rpx;
    /* #ifndef APP-PLUS */
    padding: 10rpx 20rpx 0 20rpx;
    /* #endif */
    margin-right: 20rpx;
    /* 设置固定宽度确保布局一致 */
    width: 102.72px;
  }

  .search .picker-bg .picker {
    display: flex;
    align-items: center;
    width: 100%; /* 确保picker占据全部宽度 */
    /* #ifndef APP-PLUS */
    padding-top: 2rpx;
    /* #endif */
  }

  .search .picker-bg .picker .uni-icons {
    color: #fff !important;
  }

  .search .picker-bg .picker .uni-icons:first-child {
    margin-right: 10rpx;
  }

  .search .picker-bg .picker .uniui-down {
    margin-left: 20rpx;
  }

  .white-bg {
    width: 750rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
    padding: 20rpx 0rpx;
    margin-top: 20rpx;
    /* #ifdef APP-PLUS */
    height: calc(100vh - 135px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 112px);
    /* #endif */
  }

  .table-title {
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #E7E7E7;
    padding-bottom: 20rpx;
  }
</style>