<template>
    <view class="order-search">
        <view class="os-bar">
                <view>
                    <image mode="aspectFit" src="/static/images/icon/search.png"></image>
                    <input placeholder="你输入订单号" v-model="searchTxt" confirm-type="search" @confirm="iptConfirm" />
                    <image v-if="searchTxt!=''" mode="aspectFit" src="/static/images/icon/round_close.png" @click="clearSearch"></image>
                </view>
            </view>
        <view class="os-none" v-if="orderList === null">
            <image mode="aspectFit" src="/static/images/icon/no_order.png"></image>
            <view>没有该订单数据</view>
        </view>
        <view class="os-content" v-else>
            <view class="os-list">
                <view class="ol-item" v-for="(e,i) in orderList" :key="i" >
                    <reservation-order :order-info="e" v-if="orderType == 3"></reservation-order>
                    <membership-order :order-info="e" v-if="orderType == 4"></membership-order>
                    <integral-order :order-info="e" v-if="orderType == 5"></integral-order>
					<timing-order :order-info="e" v-if="orderType == 1"></timing-order>
					<organize-order  :order-info="e" v-if="orderType == 10"></organize-order>

                    <!-- 20210910  -->
                    <curriculum :order-info="e" v-if="orderType == 12"></curriculum>
                    <value-card :order-info="e" v-if="orderType == 18"></value-card>
                    <spectacular-monent :order-info="e" v-if="orderType == 15"></spectacular-monent>
                    <club-rental :order-info="e" v-if="orderType == 16"></club-rental>

                    <device :order-info="e" v-if="isDevice()&&!isNotDeviceTemp()" :order-type="orderType"></device>
                    <locker :order-info="e" v-if="orderType == 7"></locker>
                    <competition :order-info="e" v-if="orderType == 14"></competition>
                    <mall v-if="orderType == 2" :order-info="e"></mall>
                    <rent-and-sale v-if="orderType == 8" :order-info="e"></rent-and-sale>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import reservation_order from '../../components/reservation_order/reservation_order';
import integral_order from '../../components/integral_order/integral_order';
import membership_order from '../../components/membership_order/membership_order';
import timing_order from '../../components/timing_order/timing_order.vue'
import organize_order from '../../components/organize_order/organize_order.vue'
// 20210910 新增订单模块
import value_card from '../../components/order_list/value_card/value_card.vue';
import curriculum from '../../components/order_list/curriculum/curriculum.vue';
import spectacular_monent from '../../components/order_list/spectacular_monent/spectacular_monent.vue';
import club_rental from '../../components/order_list/club_rental/club_rental.vue';

import locker from '../../components/order_list/locker/locker.vue';
import rent_and_sale from '../../components/order_list/rent_and_sale/rent_and_sale.vue';
import mall from '../../components/order_list/mall/mall.vue'; 
import device from '../../components/order_list/device/device.vue';  // 售货柜/浴室/咖啡
import competition from '../../components/order_list/competition/competition.vue';  // 赛事

import { API } from '../../js/api';
import { servers } from '../../js/server';
import util from '../../utils/util';
import { mapState } from 'vuex';

export default {
    components: {
        'reservation-order': reservation_order,
        'membership-order': membership_order,
        'integral-order': integral_order,
		'timing-order': timing_order,
		'organize-order': organize_order,
        // <!-- 20210910  -->
        'spectacular-monent': spectacular_monent,
        'value-card': value_card,
        'curriculum': curriculum,
        'club-rental': club_rental,

        'locker': locker,
        'rent-and-sale': rent_and_sale,
        'mall': mall,
        'device': device,
        'competition': competition,
    },
    computed: {
        ...mapState(['brandInfo']),
    },
    data(){
        return {
            orderType: '',
            searchTxt: '',
            orderList: [],
            page: 1,
        }
    },
    onLoad(options){
        this.orderType = options.type;
    },
    onReachBottom(){
        let { orderType, searchTxt, page } = this;
        this.getOrderList({
            key: searchTxt,
            orderType,
            page: ++page
        })
    },
    methods: {
        refreshList(){
            let { orderType, searchTxt } = this;
            this.page = 1;
            this.orderList = [];
            this.getOrderList({
                key: searchTxt,
                orderType,
            })
        },
        clearSearch(){
            this.searchTxt = '';
        },
        iptConfirm(e){
            let { value } = e.detail;
            let { orderType } = this;
            this.page = 1;
            this.orderList = [];
            this.getOrderList({
                key: value,
                orderType,
            })
        },
        getApiUrl(type = this.orderType){
            if(type == 3)return API.reservationOrder;
            if(type == 4)return API.membershipOrder;
            if(type == 5)return API.integralOrder;
			if(type == 1)return API.timeOrder;
			if(type == 10)return API.organizeOrderList;
            // <!-- 20210910  -->
            if(type == 12)return API.venueCourseOrderList; // 课程订单
            if(type == 18)return API.userValueCardList; // 储值卡订单
            if(type == 15)return API.momentOrderList; // 高光时刻
            if(type in deviceTypeObj())return API.hardwareOrderList; // 硬件管理
            if(type == 14)return API.appointmentOrderList; // 高光时刻
            if(type == 2)return API.shop2OrderList; // 商城订单
        },
        // 是否为设备，统一接口
        isDevice(){
            let { orderType } = this;
            return orderType in deviceTypeObj()
        },
        // 设备接口/不同模板
        isNotDeviceTemp(){
            let { orderType } = this;
            return orderType == 7 || orderType == 16 || orderType == 8
        },
        getOrderList({
            key = "",
            page = 1,
            page_size = 15,
            orderType = this.orderType
        }){
            let { brandInfo } = this;
            util.showLoad();
            servers.get({
                url: this.getApiUrl(orderType),
                data: {
                    key,
                    begin: '',
                    end: '',
                    status: '',
                    brand_id: brandInfo.brand.id,
                    stadium_id: '',
                    page,
                    page_size,
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let { list } = res;
                if(page == 1){
                    let _oL = (!list||list.length<=0) ? null : list; // null 判断是否显示 无订单页
                    return this.orderList = _oL;
                }
                let _list = list || [];
                if(_list.length<=0)return util.showNone('没有更多！');
                this.page = page;
                this.orderList = [ ...this.orderList, ..._list ];
            })
            .catch(util.hideLoad)
        },
    }
}

// 设备类型
function deviceTypeObj(){
    /*
        VendingOrderType    OrderType = "vending_order"  售货柜
        WaterValveOrderType OrderType = "water_valve_order"  浴室
        LockerOrderType     OrderType = "locker_order"    储物柜
        LeaseOrderType      OrderType = "lease_order"     租售柜
        CoffeeOrderType     OrderType = "coffee_order"    咖啡机
        RentBlllOrderType OrderType = "rent_ball_order"   租球机  16
    
    */
    let _obj = {
        16: 'rent_ball_order',
        6: 'vending_order',
        11: 'water_valve_order',
        9: 'coffee_order',
        7: 'locker_order',
        8: 'lease_order',
    }
    return _obj
}
</script>

<style lang="scss" scoped>
    @import "../../style/public.scss";
    .order-search{
        .os-bar{
            margin-bottom: 24upx;
            height: 144upx;
            background-color: #fff;
            @include centerFlex(center);
            >view{
                padding: 0 20upx;
                height: 92upx;
                width: 702upx;
                border-radius: 10upx;
                background-color: #f2f2f7;
                @include centerFlex(center);
                >image{
                    margin-right: 20upx;
                    flex-shrink: 0;
                    width: 40upx;
                    height: 40upx;
                }
                >input{
                    flex-grow: 1;
                    font-size: 32upx;
                    line-height: 44upx;
                    color: #1A1A1A;
                    &+image{
                        flex-shrink: 0;
                        margin-right: 0;
                        margin-left: 20upx;
                        width: 32upx;
                        height: 32upx;
                    }
                }
            }
        }
        .os-list{
            padding: 0 24upx;
            .ol-item{
                margin-bottom: 24upx;
            }
        }
        .os-none{
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 168upx;
            top: calc(168upx + var(--window-top));
            padding-top: 164upx;
            background-color: #fff;
            >image{
                margin: 0 auto 12upx;
                display: block;
                width: 380upx;
                height: 380upx;
            }
            >view{
                font-size: 28upx;
                line-height: 40upx;
                text-align: center;
                color: #9c9c9f;
            }
        }
    }
</style>