<template>
    <div class="page_summaryDetail">
        <van-sticky>
            <div class="summaryDetailTitle">
                <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
                <span class="titleName">耗材统计</span>
                <span style="visibility: hidden;">张三</span> 
            </div>
        </van-sticky>
        <div style="width:100%;overflow-x:auto;">
            <div class="toolBox1">
                <div class="toolOne" @click="startShow = true">
                    <div style="display: flex;align-items: center;">
                        {{ startTime }}
                        <van-icon name="arrow-down" />
                    </div>
                </div>
                <div class="toolOne" @click="endShow = true">
                    <div style="display: flex;align-items: center;">
                        {{ endTime }}
                        <van-icon name="arrow-down" />
                    </div>
                </div>
                <div class="toolOne" @click="typeShow = true">
                    <div style="display: flex;align-items: center;">
                        {{ type }}
                        <van-icon name="arrow-down" />
                    </div>
                </div>
                <div class="toolOne" @click="areaShow = true">
                    <div style="display: flex;align-items: center;">
                        {{ area }}
                        <van-icon name="arrow-down" />
                    </div>
                </div>
            </div>
        </div>
        <div class="summaryList">
            <div class="summaryListOne">
                <span>商品类型</span>
                <span>规格名称</span>
                <span>数量</span>
            </div>
            <div class="summaryListOne" v-for="item in 30">
                <span>透析器</span>
                <span>FX80</span>
                <span>1</span>
            </div>
        </div>

        <!-- 弹出层 -->
        <div>
            <van-popup
                v-model="typeShow"
                position="bottom"
                :style="{ height: '40%' }"
            >
                <van-picker
                show-toolbar
                :columns="columns"
                @cancel="typeShow = false"
                @confirm="chooseType"
                />
            </van-popup>
            <van-popup
                v-model="areaShow"
                position="bottom"
                :style="{ height: '40%' }"
            >
                <van-picker
                show-toolbar
                :columns="areaColumns"
                @cancel="areaShow = false"
                @confirm="chooseArea"
                />
            </van-popup>
            <van-popup
                v-model="startShow"
                position="bottom"
                :style="{ height: '40%' }"
            >
                <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="getstartTime"
                @cancel="startShow = false"
                />
            </van-popup>
            <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
                <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="getstartTime2"
                @cancel="endShow = false"
                />
            </van-popup>
            <van-action-sheet
                v-model="newShow"
                :actions="actions"
                cancel-text="取消"
                @select="onCancelOne"
            />
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            type:'全部班',
            area:'全部分区',
            typeShow: false,
            areaShow: false,
            startShow: false,
            endShow: false,
            startTime: "请选择",
            endTime: "请选择",
            minDate: new Date(1970, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            columns:['全部班','早上班','下午班','晚上班'],
            areaColumns:['A区',"B区"]
        }
    },
    methods:{
        getstartTime(value) {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let day = value.getDate();
            if (month >= 1 && month <= 9) {
                month = `0${month}`;
            }
            if (day >= 1 && day <= 9) {
                day = `0${day}`;
            }

            this.startTime = `${year}-${month}-${day}`;
            this.startShow = false;
        },
        getstartTime2(value) {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let day = value.getDate();
            if (month >= 1 && month <= 9) {
                month = `0${month}`;
            }
            if (day >= 1 && day <= 9) {
                day = `0${day}`;
            }

            this.endTime = `${year}-${month}-${day}`;
            this.endShow = false;
        },
        chooseType(value){
            this.type = value
            this.typeShow = false
        },
        chooseArea(value){
            this.area = value
            this.areaShow = false
        }
    }
    
}
</script>


<style lang="scss" scoped>
.page_summaryDetail{
    .summaryDetailTitle {
        background: #fff;
        padding: 0 0.6rem;
        height: 1.66rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
            font-size: 0.53rem;
        }
    }
    .jiantou {
        font-size: 0.8rem;
        font-weight: 600;
        margin-right: 0.53rem;
    }
    .titleName {
        font-size: 0.6rem;
        font-weight: 600;
    }
    .toolBox1 {
        display: flex;
        height: 1.6rem;
        align-items: center;
        width:110%;
        .toolOne {
            width: 3.4rem;
            height: 1rem;
            background: rgba(246, 246, 246, 1);
            border-radius: 5px;
            text-align: center;
            font-size: 0.42rem;
            color: #8d8d8d;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: 0.42rem;
        }
        .toolNewOne{
            width: 2.4rem;
        }
    }
    .summaryList{
        padding-bottom: 1.66rem;
        font-size: 0.53rem;
        .summaryListOne{
            height: 1.3rem;
            padding: 0 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #e5e5e5;
            >span:nth-of-type(1){
                width:50%
            }
            >span:nth-of-type(2){
                width:30%
            }
            >span:nth-of-type(3){
                width:20%
            }
        }
    }
}
</style>


<style lang="scss">
.page_summaryDetail{
    .van-picker__toolbar{
        height: 1.46rem;
        line-height: 1.46rem;
    }
    .van-picker__cancel, .van-picker__confirm{
        padding: 0 0.53rem;
        font-size: 0.46rem;
    }
    .van-picker-column{
        font-size: 0.53rem;
    }
    .van-picker-column__item{
        padding: 0 0.14rem;
    }
    .van-action-sheet__item{
        height: 1.6rem;
    }
    .van-action-sheet__cancel, .van-action-sheet__item{
        height: 1.6rem;
        font-size: 0.53rem;
        line-height: 1.6rem;
    }
    .van-action-sheet__gap{
        height: 0.26rem;
    }
    .van-action-sheet__cancel::before{
        height: 0.26rem;
    }
    .van-action-sheet__item{
        height: 1.6rem;
    }
    .van-action-sheet__cancel, .van-action-sheet__item{
        height: 1.6rem;
        font-size: 0.53rem;
        line-height: 1.6rem;
    }
    .van-action-sheet__gap{
        height: 0.26rem;
    }
    .van-action-sheet__cancel::before{
        height: 0.26rem;
    }
}
</style>
