<template>
    <!-- 定義一個按鈕，用于打開彈出層 -->
    <view style="width: 200px">
        <button @click="openSpecs">彈出</button>
    </view>
    <!-- 彈出層視圖，注意這里的ref="popup"，這里背景特意標紅了，方便看到效果 -->
    <uni-popup class="updatePopup" background-color="red" ref="popup" type="center"> 你好 </uni-popup>
</template>

<script setup lang="ts">
    import { ref } from "vue";

    // 這里的這個變量名，必須和上面的ref="popup"的變量名相同，這樣就相當于綁定了這個元素了
    const popup = ref(null);

    // 按鈕調(diào)用該方法打開彈出層
    function openSpecs() {
        popup.value.open();
    }
</script>

<style>
</style>

<template>
    <view class="background">
        <!-- 標題 -->
        <view style="text-align: center">
            <text class="title">{{ title }}</text>
        </view>
        <!-- 區(qū)域滾動視圖 -->
        <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'">
            <!-- 結合分組和數(shù)據(jù)選擇器展示數(shù)據(jù)，不是本文的重點 -->
            <uni-group mode="card" top="0" v-for="item in specsList" :key="item.key" :title="item.text"  id="group">
                <uni-data-checkbox mode="tag" :v-model="item.value" :localdata="item.option"></uni-data-checkbox>
            </uni-group>
        </scroll-view>
    </view>
</template>
<script setup lang="ts">
    import { onMounted, ref } from "vue";

    // 下面都是一些生成數(shù)據(jù)的邏輯，可以不關心。
    let title = "標題測試";

    interface iOption {
        key: number;
        text: string;
        disable: boolean;
        value: number;
    }

    interface iSpecs {
        key: number;
        text: string;
        value: number;
        option: iOption[];
    }

    const specsList: iSpecs[] = new Array<iSpecs>(3);
    for (let i = 0; i < 10; i++) {
        const optionList: iOption[] = new Array<iOption>(i + 1);
        for (let j = 0; j < i + 1; j++) {
            optionList[j] = {
                key: j,
                text: "屬性" + j,
                disable: false,
                value: j,
            };
        }
        specsList[i] = {
            key: i,
            text: "規(guī)格" + i,
            value: i,
            option: optionList,
        };
    }

    // 這里是為了確定滾動區(qū)域的高度，不給高度不滾動的，這里的效果或許還有點問題。
    const scrollH = ref(0);
    onMounted(() => {
        let group = uni.createSelectorQuery().select("#group"); //根據(jù)id獲取一個規(guī)格組的高度
        // prettier-ignore
        group.boundingClientRect((data) => {
            //計算高度：高度控制在3個規(guī)格組的高度以內(nèi)，即3個組以內(nèi)不需要滾動,+10是因為實測獲取的高度比真實高度少一點，不加的話就會需要小范圍的滾動一下
            if (specsList.length<3){
                scrollH.value=(data.height+10)* specsList.length
            }else{
                scrollH.value=(data.height+10)*3
            }
            }).exec();
    });
</script>
<style>
    .background {
        background-color: white;
        border-radius: 10px;
    }
    .title {
        font-size: x-large;
        font-family: "Times New Roman", Times, Cursive;
        text-align: center;
    }
</style>

<uni-popup background-color="red" ref="popup" type="center">
     <SelectSpecs></SelectSpecs>
</uni-popup>

<script setup lang="ts">
    import { ref } from "vue";
    import SelectSpecs from "../goods/view/selectSpecs.vue"; //導入組件
	.......
</script>

<template>
    <!-- 定義一個按鈕，用于打開彈出層 -->
    <view style="width: 200px">
        <button @click="openSpecs">彈出</button>
    </view>
    <!-- 彈出層視圖，注意這里的ref="popup"，這里背景特意標紅了，方便看到效果 -->
    <view style="max-width: 80%">
        <uni-popup background-color="red" ref="popup" type="center">
            <SelectSpecs></SelectSpecs>
        </uni-popup>
    </view>
</template>

    <uni-popup class="updatePopup" background-color="red" ref="popup" type="center">
        <SelectSpecs></SelectSpecs>
    </uni-popup>

<style scoped>
    .updatePopup :deep(.uni-popup__wrapper) {
        max-width: 80%;
    }
</style>

<template>
	<view>
		<view class="sign_text" @tap="toggle('center')">
			<text style="line-height: 60px;margin-top: 12px;">點擊彈出</text>
		</view>
		<!-- 普通彈窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view style="color: green;">
					這是一個彈窗
				</view>
				<view style="color: red;" @click="close()">
					關閉彈窗
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//彈窗開啟
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			//彈窗關閉
			close() {
				this.$refs.popup.close()
			},

		}
	}
</script>

<style>
	.popup-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 200px;
		width: 280px;
		background-color: #fff;
		border-radius: 10px;
	}

</style>