<template>
    <up-popup :show="modelValue" mode="right" @close="handleClose" @open="handleOpen">
        <ut-navbar :fixed="false" bgColor="transparent">
            <template #left>
                <view class="c-#333 f-s-34 f-w-5">请选择种养殖所在基地</view>
            </template>
        </ut-navbar>
        <view class="h-86 pd-20 pt-0">
            <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" margin="0" :border="false" placeholder="搜基地名称、编号、地址、负责人" bgColor="#f7f7f7" height="86rpx" borderRadius="16rpx"></ut-search>
        </view>
        <view class="d-flex pl-20 mb-20">
            <view class="f-s-26 w-90 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(0)" :style="{ backgroundColor: activeSelect == 0 ? '#37A954' : '', color: activeSelect == 0 ? '#FFF' : '' }">全部</view>
            <view class="f-s-26 w-150 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(1)" :style="{ backgroundColor: activeSelect == 1 ? '#37A954' : '', color: activeSelect == 1 ? '#FFF' : '' }">GAP基地</view>
            <view class="f-s-26 w-200 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(2)" :style="{ backgroundColor: activeSelect == 2 ? '#37A954' : '', color: activeSelect == 2 ? '#FFF' : '' }">三无一全基地</view>
        </view>
        <view class="w-700 d-flex" id="scroll">
            <scroll-view class="w-50% bg-#f7f7f7 c-#fff" :style="`height: calc(100vh - ${top}px)`" scroll-y="true">
                <view v-for="(item, index) in 10" :key="index" class="border-#E6E6E6 pd-20 title" :class="{ activeTitle: activeBase == index }" @click="changeBase(index)">
                    <view class="">
                        <text class="base">香格里拉市虎跳峡镇宝山村基地 </text>
                        <text class="area">12000平方米</text>
                    </view>
                    <view class="pt-10">
                        <view class="label">GAP</view>
                    </view>
                </view>
            </scroll-view>
            <scroll-view class="w-50% pd-16" :style="`height: calc(100vh - ${top}px)`" scroll-y="true">
                <up-checkbox label="全选" labelColor="#333" name="agree" usedAlone :checked="aloneChecked" @change="handleAllCheckboxChange"></up-checkbox>
                <!-- 复选框组包含全选框 -->
                <up-checkbox-group activeColor="#37a954" :modelValue="checkBox" @change="handleCheckboxGroupChange" iconPlacement="right" placement="column">
                    <up-checkbox v-for="(item, index) in mixData" :key="index" :name="item?.name" :label="item?.label"></up-checkbox>
                </up-checkbox-group>
            </scroll-view>
        </view>
    </up-popup>
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
const instance = getCurrentInstance();
defineProps<{
    modelValue: boolean;
}>();
const form = ref({
    keyword: '',
});
// 定义emit事件：通知父组件状态变化
const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void;
    (e: 'open'): void;
    (e: 'close'): void;
}>();

// 处理关闭事件
function handleClose() {
    emit('update:modelValue', false);
    emit('close');
}

// 处理打开事件
function handleOpen() {
    emit('open');
}
// 处理切换搜索
const activeSelect = ref(0);
const changeSelect = (index: number) => {
    activeSelect.value = index;
};

// 处理搜索
const changeSeach = () => {
    console.log('搜索关键词:', form.value.keyword);
    // 这里可以添加实际的搜索逻辑
};
// 切换基地>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const activeBase = ref(0);
const changeBase = (index: number) => {
    activeBase.value = index;
};
// 选择checkbox>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 所有复选框的name值
//模拟数据
const mixData = ref([
    {
        name: 'red',
        label: '红色',
    },
    {
        name: 'green',
        label: '绿色',
    },
    {
        name: 'blue',
        label: '蓝色',
    },
]);
let allCheckboxNames: string[] = [];
setTimeout(() => {
    mixData.value.forEach((item) => {
        allCheckboxNames.push(item.name);
    });
}, 2000);

let checkBox = ref<string[]>([]);
const aloneChecked = ref(false);

// 全选框change事件处理
const handleAllCheckboxChange = (value: boolean) => {
    aloneChecked.value = value;
    if (value) {
        // 全选：将checkBox设置为所有name
        checkBox.value = [...allCheckboxNames];
    } else {
        // 取消全选：清空checkBox
        checkBox.value = [];
    }
};

// 复选框组change事件处理
const handleCheckboxGroupChange = (value: string[]) => {
    checkBox.value = value;
    // 检查是否所有复选框都被选中
    const allSelected = allCheckboxNames.every((name) => value.includes(name));
    aloneChecked.value = allSelected;
};
const top = ref(0);
onMounted(() => {
    const querys = uni.createSelectorQuery().in(instance?.proxy);
    querys
        .select('#scroll')
        .boundingClientRect((data: any) => {
            top.value = data.top;
        })
        .exec();
});
</script>
<style scoped lang="scss">
:deep(.u-border-bottom) {
    border-color: transparent !important;
}
.title {
    .base {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
    }
    .area {
        font-size: 24rpx;
        color: #999;
    }
    .label {
        font-size: 24rpx;
        color: #37a954;
        border-radius: 100rpx;
        background-color: #e3efe6;
        width: max-content;
        padding-left: 14rpx;
        padding-right: 14rpx;
        padding-top: 6rpx;
        padding-bottom: 6rpx;
    }
}
.activeTitle {
    background-color: #37a954;
    .base {
        font-size: 28rpx;
        color: #fff;
        font-weight: 500;
    }
    .area {
        font-size: 24rpx;
        color: #ebf6ee;
    }
    .label {
        font-size: 24rpx;
        color: #fff;
        border-radius: 100rpx;
        background-color: #5fba76;
        width: max-content;
        padding-left: 14rpx;
        padding-right: 14rpx;
        padding-top: 6rpx;
        padding-bottom: 6rpx;
    }
}
:deep(.u-checkbox-label--left) {
    flex-direction: row-reverse !important;
}
:deep(.u-checkbox__icon-wrap) {
    margin-right: 0 !important;
    margin-left: 10px;
}
</style>
