<!--樣本送檢列表-->
<template>
    <view class="list-bg">
        <view class="main padding30">
            <view class="box-card" v-for="(item,index) in RecordList" :key="index">
                <view class="list">
                    <view>
                        <view>
                            <text class="text1-style">編號：</text>
                            <text class="text2-style">{{item.ID}}</text>
                        </view>
                        <view><text class="text1-style">時間：</text>
                            <text class="text2-style">{{item.Datetime}}</text>
                        </view>
                        <view>
                            <text class="text1-style">人數：</text>
                            <text class="text2-style">{{item.Amount}}</text>
                        </view>
                    </view>
                    <!--選中圖示-->
                    <checkbox-group @change="checkSelectItem($event, item)">
                        <label>
                            <checkbox :value="item.value" :checked="item.checked" />
                        </label>
                    </checkbox-group>

                </view>
            </view>
        </view>
        <!--按扭-->
        <view class="login-btn-box padding30">
            <view style="margin-top:30rpx;">
                <checkbox-group @change="checkSelect" >
                    <label style="display: flex;">
                        <checkbox :checked="checkTrue"></checkbox>
                        <text>全選</text>
                    </label>
                </checkbox-group>
            </view>
        </view>
    </view>
</template>
<script>
    var _this;
    export default {
        data() {
            return {
                checkTrue: false, //全選選中
                //列表
                RecordList: [{
                    ID: '44568745',
                    Name: '張三',
                    Datetime: '2022-05-25 15:30',
                    Amount: '20',
                    value: '1',
                }, {
                    ID: '44568746',
                    Name: '李四',
                    Datetime: '2022-05-25 15:30',
                    Amount: '20',
                    value: '2',
                }],
            };
        },
        methods: {
            //全選
            checkSelect() {
                if (this.checkTrue == true) {
                    this.checkTrue = false;
                    // 遍歷RecordList陣列 取消全選
                    this.RecordList.forEach(item => {
                        this.$set(item, 'checked', false)
                    })
                } else {
                    this.checkTrue = true;
                    // 遍歷RecordList陣列 設定全選
                    this.RecordList.forEach(item => {
                        this.$set(item, 'checked', true)
                    })
                }

            },
            checkSelectItem(e, item) {
                // 如果是取消選中，就把checked置為false,如果是選中，就給新增一個checked=true
                if (item.checked == true) {
                    this.$set(item, 'checked', false)
                } else {
                    this.$set(item, 'checked', true)
                }
                // 過濾出陣列中checked為true的專案，如果和原RecordList長度相等，就全選顯示
                let newArr = this.RecordList.filter(item => (item.checked == true))
                if (newArr.length === this.RecordList.length) {
                    this.checkTrue = true;
                } else {
                    this.checkTrue = false;
                }
            },
        }
    };
</script>
<style lang="scss" scoped>
    /*通用頁面背景*/
    .list-bg {
        width: 100%;
        height: 100vh;
    }

    /*卡片樣式*/
    .box-card {
        margin-bottom: 30rpx;
        margin-top: 10rpx;
    }

    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .text1-style {
        color: black;
        font-size: 30rpx;
        margin-right: 10rpx;
    }

    .text2-style {
        color: gray;
        font-size: 30rpx;
    }

    .date-style {
        margin: 20rpx 0rpx;
    }

    .login-btn-box {
        width: 100%;
        position: fixed;
        bottom: 5vh;
    }

    .login-btn {
        width: 85%;
        clear: both;
        margin-bottom: 1vh;
        left: 8%;
        z-index: 999;
        transform: translateZ(0);
        bottom: env(safe-area-inset-bottom);
        bottom: constant(safe-area-inset-bottom);
    }
</style>