<template>
    <view class="search-result">
        <view class="store-bar">
            <text>当前门店</text>
            <picker mode="selector" :range="stadiumList" range-key="name" @change="stadiumChange">
                <view>
                    <input disabled v-model="curStadium.name" />
                    <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
                </view>
            </picker>
        </view>
        <view class="r-timer-select">
            <picker mode="date" @change="dateChange">
                <view>
                    <text>核销日期：{{curDate || '-'}}</text>
                    <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
                </view>
            </picker>
            <view>核销数量：{{writeOffList.length || 0}}</view>
        </view>
        <view class="r-order-list">
            <view class="l-item" v-for="(e, i) in writeOffList" :key="i">
                <view class="i-name">{{ e.extension.stadium_name || '-' }}</view>
                <view class="i-lines">
                    <view>
                        <view>订单编号：{{ e.order_no || '-' }}</view>
                        <view>（{{ e.type || '-' }}）</view>
                    </view>
                    <view>
                        <view>用户昵称：{{ e.extension.nickname || '-' }}</view>
                    </view>
                    <view>
                        <view>核销码： {{ e.verify_code || '-' }}</view>
                    </view>
                    <view>
                        <view>验证方式：{{ e.desc || '-' }}</view>
                    </view>
                    <view>
                        <view>核销时间：{{ e.verify_time || '-'}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="r-bottom-btn"><view @click="toOperate">核销订单</view></view>
    </view>
</template>

<script>
import util from '../../../utils/util';
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import { mapState } from 'vuex';
import { WRITE_OFF_STORE_NAME } from '../../../js/once_name';
export default {
    computed: {
        ...mapState([ 'brandInfo' ]),
    },
    data(){
        return {
            stadiumList: [],    // 店铺列表
            curStadium: {},     // 当前店铺
            writeOffList: [],    // 核销列表,
            curDate: util.formatDate({}),
            page: 1,
            totalNum: 0, 
        }
    },
    // 20210716测试：取消分页，返回当天
    // onReachBottom(){
    //     let { page, curDate, curStadium } = this;
    //     this.getList({
    //         brand_id: curStadium.brand_id || '',
    //         stadium_id: curStadium.id || '',
    //         date: curDate || '',
    //         page: ++page,
    //     });
    // },
    onLoad(){
        this.initPage();
    },
    onShow(){
        let { curStadium } = this;
        if(curStadium&&curStadium.id)this.refreshList();
    },
    methods: {
        refreshList(){
            let { curDate, curStadium } = this;
            this.page = 1;
            this.writeOffList = [];
            this.getList({
                brand_id: curStadium.brand_id || '',
                stadium_id: curStadium.id || '',
                date: curDate || '',
            });
        },

        dateChange(e){
            this.curDate = e.detail.value;
            this.$nextTick(this.refreshList);
        },
        stadiumChange(e){
            let { stadiumList } = this;
            this.curStadium = stadiumList[e.detail.value];
            this.$nextTick(this.refreshList);
        },

        async initPage(){
            let { brandInfo } = this;
            try{
                let _storeList = await this.getStoreList({ brand_id: brandInfo.brand.id || '' });
                this.stadiumList = _storeList || [];
                if(_storeList.length) this.curStadium = _storeList[0];
                this.$nextTick(this.refreshList);
            }catch(err){
                console.warn('加载数据失败！', err);
            }
        },
        toOperate(){
            let { stadiumList, curStadium } = this;
            util.$_emit(WRITE_OFF_STORE_NAME, {
                stadiumList,
                curStadium,
            })
            util.routeTo(`/pages/write_off/operate/operate`, 'nT');
        },
        getList({ brand_id, stadium_id = '', date = '', page = 1, page_size = '' }){
            util.showLoad();
            servers.get({
                url: API.writeOff.listVerifyRecord,
                data: { brand_id, stadium_id, date, page, page_size },
                failMsg: '加载失败！',
            })
            .then(res=>{
                util.hideLoad();
                this.totalNum = res.total || 0;
                let _list = res.list || [];
                if(page == 1)return this.writeOffList = _list;
                if(!_list.length)return util.showNone('没有更多！');
                this.page = page;
                this.writeOffList = [...this.writeOffList, ..._list];
                
            })
        },
        getStoreList({
            page=1,
            page_size=9999,
            brand_id='',
        }){
            return servers.get({
                url: API.stadiumList,
                data: {
                    page,
                    page_size,
                    brand_id,
                },
                failMsg: '获取列表失败！'
            })
            .then(res=>{
                let _list = res.list || [];
                return _list
            })
        }
    }
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    page{
        background-color: #f2f2f7;
    }
    .search-result{
        padding-bottom: 132upx;
        padding-bottom: calc( 132upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 132upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        .store-bar{
            padding: 0 24upx;
            height: 144upx;
            background-color: #fff;
            @include centerFlex(space-between);
            >text{
                margin-right: 20upx;
                flex-shrink: 0;
                font-size: 28upx;
                color: #9C9C9F;
            }
            >picker{
                flex-grow: 1;
            }
            view{
                padding: 0 20upx;
                height: 92upx;
                border-radius: 10upx;
                background: #f2f2f2;
                @include centerFlex(space-between);
                >input{
                    flex-grow: 1;
                    height: 100%;
                    font-size: 28upx;
                    color: #333;
                }
                >image{
                    flex-shrink: 0;
                    flex-grow: 0;
                    width: 28upx;
                    height: 28upx;
                }
            }
        }
        .r-timer-select{
            padding: 0 24upx;
            margin-bottom: 10upx;
            @include centerFlex(space-between);
            picker{
                flex-shrink: 0;
                view{
                    padding: 24upx 0;
                    >text{
                        font-weight: 500;
                        font-size: 32upx;
                    }   
                    >image{
                        margin-left: 16upx;
                        vertical-align: middle;
                        width: 22upx;
                        height: 22upx;
                    }
                }
            }
            >view{
                max-width: 40%;
                text-align: right;
                font-weight: 500;
                font-size: 32upx;
                @include textHide(1);
            }
        }
        .r-order-list{
            padding: 0 24upx;
            .l-item{
                margin-bottom: 24upx;
                padding: 0 20upx;
                border-radius: 10upx;
                background-color: #fff;
                .i-name{
                    height: 100upx;
                    line-height: 98upx;
                    border-bottom: 2upx solid #D8D8D8;
                    font-weight: 500;
                    font-size: 28upx;
                    color: #1a1a1a;
                }
                .i-lines{
                    padding-top: 8upx;
                    padding-bottom: 32upx;
                    >view{
                        display: flex;
                        >view{
                            min-width: 0;
                            line-height: 52upx;
                            font-size: 28upx;
                            color: #9c9c9f;
                            @include textHide(1);
                            &+view{
                                flex-shrink: 0;
                                color: $themeColor;
                            }
                        }
                        
                    }
                }
            }
        }
        .r-bottom-btn{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 10upx 24upx;
            padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
            padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
            background-color: #f2f2f7;
            >view{
                height: 112upx;
                line-height: 112upx;
                text-align: center;
                font-size: 32upx;
                border-radius: 10upx;
                color: #fff;
                background-color: $themeColor;
            }
        }
    }
</style>