<template>
    <u-popup :show="modelValue" :closeOnClickOverlay="true" :closeable="true" @close="close">
        <view class="device-popup">
            <view class="title">
                <text>选择桩点</text>
            </view>
            <u-tabs
                :list="tabs"
                :scrollable="false"
                :lineWidth="0"
                :activeStyle="{
                    color: '#303133'
                }"
                :inactiveStyle="{
                    color: '#7C7E82'
                }"
                :itemStyle="{
                    flex: '0 0 120rpx!important'
                }"
                @change="handleChangeTab"
            ></u-tabs>
            <view class="brand" v-if="activeTab === 0">
                <BrandCard
                    v-for="item in brandList"
                    :key="item.id"
                    :item="item"
                    @updateItem="updateItem"
                />
            </view>
            <view class="style" v-if="activeTab === 1">
                <StyleCard
                    v-for="item in deviceList"
                    :key="item.id"
                    :item="item"
                    @change="updateStyle"
                />
            </view>
            <TFooterBtn :text="btnFieldMap[activeTab]" @handle-btn-click="handleSelected" />
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import BrandCard from './brand-card.vue'
import StyleCard from './style-card.vue'

defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:modelValue', 'close', 'handleSelectedList'])

const tabs = reactive([{ name: '品牌' }, { name: '款式' }])
const brandList = ref([
    { id: 1, image: '', name: '品牌一', chekced: false },
    { id: 2, image: '', name: '品牌一', chekced: false },
    { id: 3, image: '', name: '品牌一', chekced: false },
    { id: 4, image: '', name: '品牌一', chekced: false },
    { id: 5, image: '', name: '品牌一', chekced: false },
    { id: 6, image: '', name: '品牌一', chekced: false },
    { id: 7, image: '', name: '品牌一', chekced: false },
    { id: 8, image: '', name: '品牌一', chekced: false },
    { id: 9, image: '', name: '品牌一', chekced: false }
])
// 更新选中品牌列表
const updateItem = payload => {
    const { checked, id } = payload
    brandList.value.forEach(item => {
        if (item.id === id) {
            item.chekced = checked
        }
    })
}

const activeTab = ref(0)
const handleChangeTab = item => {
    activeTab.value = item.index
}

const deviceList = ref([
    { id: 1, brandName: '品牌一', children: [{ id: 11, name: '设备名称一', checked: false }] },
    { id: 2, brandName: '品牌二', children: [{ id: 21, name: '设备名称一', checked: false }] }
])
// 更新选中款式列表
const updateStyle = payload => {
    const { checked, pId, cId } = payload
    deviceList.value.forEach(item => {
        if (item.id === pId) {
            item.children.forEach(child => {
                if (child.id === cId) {
                    child.checked = checked
                }
            })
        }
    })
}
const btnFieldMap: Record<number, string> = {
    0: '选择款式',
    1: '确定'
}
const handleSelected = () => {
    if (activeTab.value === 0) {
        // 品牌
        console.log(brandList.value)
    } else if (activeTab.value === 1) {
        // 款式
        // console.log(deviceList.value)
        close()
        // 过滤出选中款式
        const selectedList = deviceList.value.filter(item =>
            item.children.some(child => child.checked)
        )
        emit('handleSelectedList', selectedList)
    }
}

const close = () => {
    emit('update:modelValue', false)
    emit('close')
}
</script>

<style lang="scss" scoped>
.device-popup {
    min-height: 1000rpx;
    max-height: 1000rpx;
    display: flex;
    flex-direction: column;
    .title {
        margin: 32rpx 32rpx 48rpx;
    }
    .brand,
    .style {
        flex: 1;
        overflow-y: auto;
        margin-top: 18rpx;
    }
    .style {
        margin-top: 24rpx;
    }
}
</style>
