<template>
    <view class="container">
        <view class="head-block">
            <view class="content">
                <view class="search-box flex flex-y-center">
                    <input type="text" v-model="serch" class="search-input" placeholder="请输入商品名称"
                        placeholder-class="placeholder" />

                </view>
                <view class="date-search flex box-pack-between flex-y-center">
                    <picker mode="date" @change="chooseStartTime">
                        <view class="date-box" :class="[start_time?'':'placeholder']">{{start_time || '请选择开始时间'}}</view>
                    </picker>
                    <view>至</view>
                    <picker mode="date" @change="chooseEndTime">
                        <view class="date-box" :class="[end_time?'':'placeholder']">{{end_time || '请选择结束时间'}}</view>
                    </picker>
                </view>
                <picker class="store-search" :range="storeList" range-key="title" @change="chooseStore"
                    v-if="can_choose_store">
                    <view class="store-name" :class="[store_id?'':'placeholder']">
                        {{store_name || '请选择门店'}}
                    </view>
                </picker>
                <view class="btn-block">
                    <view class="btn reset-btn" @click="onReset">重置</view>
                    <view class="btn sub-btn" @click="onSubmit">筛选</view>
                </view>

            </view>
            <view class="table">
                <view class="tr tb-h" style="border-bottom:none;border-top: 1rpx solid #efefef;">
                    <view class="th td" style="width:27%">商品名</view>
                    <view class="th td" style="width:25%">门店</view>
                    <view class="th td" style="width:16%">下单数</view>
                    <view class="th td" style="width:16%">支付数</view>
                    <view class="th td" style="width:16%">支付率</view>
                </view>
            </view>
        </view>
        <view class="table">
            <view class="tr" v-for="(item,index) in list">
                <view class="td" style="width:27%">{{item.name}}</view>
                <view class="td" style="width:25%">{{item.store_name}}</view>
                <view class="td" style="width:16%">{{item.num}}</view>
                <view class="td" style="width:16%">{{item.pay_num}}</view>
                <view class="td" style="width:16%">{{item.pay_rate}}</view>
            </view>

            <view class="no-more" v-if="!has_more" style="padding: 40rpx 0;">
                ---没有更多了---
            </view>
        </view>
        <view class="is-iphone-x"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                can_choose_store: false,
                admin_id: "",
                store_id: "",
                store_name: "",
                serch: "",
                start_time: "",
                end_time: "",
                storeList: [],
                list: [],
                page: 1,
                has_more: true,
                params: {
                    store_id: '', //176 string 是                    搜索： 门店id
                    serch: '', //string 是                    搜索： 商品名称
                    start_time: '', // 2022 - 02 - 17 string 是                    搜索： 开始时间
                    end_time: '', // 2022 - 02 - 17 string 是                    搜索： 结束时间
                }
            }
        },
        onLoad(options) {
            if (options.store_id) {
                this.store_id = options.store_id
                this.can_choose_store = false
                this.params.store_id = options.store_id
            } else {
                this.can_choose_store = true
                this.getStoreList()
            }
            this.getList()
            let now = new Date()

        },
        onReachBottom() {
            if (this.has_more) {
                this.getList(this.page + 1)
            }
        },
        methods: {
            onReset() {
                this.serch = ""
                this.start_time = ""
                this.end_time = ""
                this.store_id = this.can_choose_store ? '' : this.store_id
                this.store_name = this.can_choose_store ? '' : this.store_name
                this.params = {
                    store_id: this.can_choose_store ? '' : this.store_id, //176 string 是                    搜索： 门店id
                    serch: '', //string 是                    搜索： 商品名称
                    start_time: '', // 2022 - 02 - 17 string 是                    搜索： 开始时间
                    end_time: '', // 2022 - 02 - 17 string 是                    搜索： 结束时间
                }
                this.page = 1
                this.list = []
                this.has_more = true
                this.getList()
            },
            onSubmit() {
                this.params = {
                    store_id: this.store_id, //搜索： 门店id
                    serch: this.serch, //搜索： 商品名称
                    start_time: this.start_time, // 2022-02-17 搜索： 开始时间
                    end_time: this.end_time, // 2022-02-17 搜索： 结束时间
                }
                this.page = 1
                this.list = []
                this.has_more = true
                this.getList()
            },
            getList(page = 1) {
                let params = JSON.parse(JSON.stringify(this.params))
                params.admin_id = uni.getStorageSync("admin_id");
                params.page = page
                params.limit = 10

                this.request({
                    url: 'smdcshop/statistics_index',
                    data: params
                }).then(res => {
                    if (res.data.length > 0) {
                        this.list = this.list.concat(res.data)
                        this.has_more = res.data.length < 10 ? false : true
                        this.page = page
                    } else {
                        this.has_more = false
                    }
                })
            },
            chooseStartTime(e) {
                this.start_time = e.detail.value
                if (this.end_time && new Date(e.detail.value).getTime() > new Date(this.end_time).getTime()) {
                    this.end_time = ""
                }
            },
            chooseEndTime(e) {
                this.end_time = e.detail.value
                if (this.start_time && new Date(this.start_time).getTime() > new Date(e.detail.value).getTime()) {
                    this.start_time = ""
                }
            },
            chooseStore(e) {
                let index = e.detail.value
                this.store_id = this.storeList[index].id
                this.store_name = this.getStoreName(this.storeList[index].id)
            },
            getStoreList() {
                this.request({
                    url: "Smdcshop/shop_store_index",
                    data: {
                        admin_id: uni.getStorageSync("admin_id")
                    }
                }).then(res => {
                    this.storeList = res.data
                    if (this.store_id) {

                        this.store_name = this.getStoreName(this.store_id)
                    }
                })
            },
            getStoreName(store_id) {
                let store = this.storeList.find(item => {
                    return item.id == store_id
                })
                return store.title
            },
        }
    }
</script>

<style lang="scss">
    .head-block {

        background: #fff;
        width: 100%;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        z-index: 10;
        overflow: hidden;
        box-shadow: 0 0 10rpx #ccc;

        .search-box {

            margin-top: 14rpx;
            padding: 0 24rpx;

            .search-input {
                background: #f8f8f8;
                flex: auto;
                height: 60rpx;
                padding: 0 20rpx;
                border-radius: 12rpx;
                font-size: 24rpx;
                color: #333;
            }

        }

        .date-search {
            margin-top: 14rpx;
            padding: 0 24rpx;
            font-size: 24rpx;

            .date-box {
                height: 60rpx;
                width: 300rpx;
                line-height: 60rpx;

                flex: none;
                background-color: #F8f8f8;
                border-radius: 12rpx;
                padding: 0 20rpx;
            }
        }

        .store-search {
            padding: 0 24rpx;
            margin-top: 14rpx;

            .store-name {
                height: 60rpx;
                line-height: 60rpx;
                font-size: 24rpx;
                background-color: #F8f8f8;
                border-radius: 12rpx;
                padding: 0 20rpx;

            }
        }

        .btn-block {
            margin: 14rpx 0;
            padding: 0 24rpx;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: stretch;

            .btn {
                height: 48rpx;
                border-radius: 12rpx;
                width: 160rpx;
                flex: none;
                font-size: 26rpx;
                text-align: center;
                line-height: 48rpx;
            }

            .reset-btn {
                background: #e8e8e8;
                color: #333;
            }

            .sub-btn {
                color: #fff;
                background: linear-gradient(180deg, #6fa8f8, #328afe);
            }
        }

    }

    .table {
        width: 100%;

        .tr {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: stretch;
            border-bottom: 1rpx solid #d6d6d6;

            .td {
                flex: none;

                padding: 20rpx 10rpx;
                text-align: center;
                font-size: 24rpx;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .th {
                font-weight: 500;

            }
        }


    }

    .placeholder {
        color: #888;
    }
</style>
