<template>
    <view class="site-confirm">
        <view class="sc-section">
            <view class="sc-address">
                <view class="sa-name">
                    <image mode="aspectFit" :src="occupyInfo.storeInfo.logo || ''"></image>
                    <text>{{occupyInfo.storeInfo.name || '-'}}</text>
                </view>
                <view class="sa-detail">
                    <view>地址：</view>
                    <view>{{occupyInfo.storeInfo.venue_addr || '-'}}</view>
                </view>
            </view>
            <view class="sc-order-info">
                <view class="soi-line">
                    <view>预定项目：</view>
                    <view><view>{{occupyInfo.typeInfo.name || '-'}}</view></view>
                </view>
                <view class="soi-line">
                    <view>预定日期：</view>
                    <view><view>{{occupyInfo.dateInfo.dayStr || '-'}}({{occupyInfo.dateInfo.showDateStr || '-'}})</view></view>
                </view>
                <view class="soi-line">
                    <view>预定场次：</view>
                    <view>
                        <block v-for="(e, i) in occupyInfo.venueList" :key="i">
                            <view>{{e.parentObj.venue_name || '-'}} {{e.durations || '-'}} (¥{{e.price || '-'}})</view>
                        </block>
                    </view>
                </view>
                <view class="soi-total">
                    <text>小计（共{{(occupyInfo.venueList&&occupyInfo.venueList.length) || 0}}场）</text>
                    ¥{{ totalPrice || 0 }}
                </view>
            </view>
            <view class="sc-switch">
                <view><view><text>*</text>是否联动开灯</view><switch @change="switchChange" color="#009874"></switch></view>
                <view>联动开灯开启后，会根据占用时间自动开灯</view>
            </view>
            <view class="sc-ipt">
                <view class="si-price">
                    <view class="sp-tit">收取金额</view>
                    <view class="sp-frame"><input v-model="ocPrice" type="number" /></view>
                </view>
                <view class="si-reason">
                    <view class="sr-tit">占用原因</view>
                    <view class="sr-frame">
                        <textarea placeholder="多行输入…"  v-model="ocReaon"></textarea>
                    </view>
                </view>
            </view>
        </view>
        <cover-view class="sc-fixed-bot">
            <cover-view class="sfb-view" hover-class="hover-active" @click="confirmOccupy">确定</cover-view>
        </cover-view>
    </view>
</template>
<script>
import { mapState } from 'vuex';
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util';
export default {
    data(){
        return {
            ocPrice: '',
            ocReaon: '',
            light_up: false,
        }
    },
    computed: {
        ...mapState([ 'occupyInfo' ]),
        totalPrice(){
            let { occupyInfo } = this;
            let _list = occupyInfo.venueList || [];
            if(!_list.length)return 0;
            let _price = 0;
            _list.forEach(e=>_price += +e.price);
            console.warn(_price)
            return _price.toFixed(2);
        }
    },
    onLoad(){
        console.log(this.occupyInfo)
    },
    methods: {
        switchChange(e){
            this.light_up = e.detail.value
        },
        confirmOccupy: util.debounce(function(){
            let { storeInfo, dateInfo, venueList, typeInfo } = this.occupyInfo;
            let { ocPrice, ocReaon, light_up } = this;
            util.showLoad();
            servers.post({
                url: API.venue.venueTakeUp,
                data: {
                    brand_id: storeInfo.brand_id,
                    reason: ocReaon,
                    amount: +ocPrice,
                    group: storeInfo.id,
                    date: dateInfo.dateStr,
                    items: venueList.map(el=>{
                        return {
                            venue_id: el.parentObj.venue_id,
                            venue_name: el.parentObj.venue_name,
                            duration: el.durations,
                            price: el.price
                        }
                    }),
                    light_up,
                },
                isDefaultGet: false
            })
            .then(res=>{
                util.hideLoad();
                if(res.data.code == 0){
                    
                    util.showNone(res.data.message || '操作成功！');
                    let _res = res.data.data || {};
                    let _qrStr = `?brand_id=${_res.brand_id}&order_no=${_res.order_no}`
                    util.routeTo(`/pages/site/occupy_success/occupy_success${_qrStr}`, 'rT');
                    // setTimeout(_=>{
                    //     util.routeTo();
                    //     util.previousPageFunction({ // 刷新占用列表
                    //         fnName: 'refreshList',
                    //         query: null
                    //     })
                    // }, 1200)
                }else{
                    util.showNone(res.data.message || '操作失败！');
                }
            })
            .catch(util.hideLoad)

        }, 300, true),
    },
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .site-confirm{
        padding-bottom: 138upx;
        padding-bottom: calc( 138upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 138upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        .sc-section{
            background-color: #fff;
        }
        .sc-address{
            padding: 24upx 24upx 20upx;
            border-bottom: 2upx solid #D8D8D8;
            .sa-name{
                margin-bottom: 24upx;
                line-height: 44upx;
                font-size: 32upx;
                font-weight: 500;
                color: #333;
                @include textHide(1);
                >image{
                    margin-right: 2upx;
                    vertical-align: middle;
                    width: 34upx;
                    height: 34upx;
                }
            }
            .sa-detail{
                display: flex;
                >view{
                    line-height: 40upx;
                    color: #9a9a9d;
                    font-size: 28upx;
                    &:first-child{
                        flex-shrink: 0;
                    }
                    &:nth-child(2){
                        flex-grow: 1;
                        word-break: break-all;
                        @include textHide(2);
                    }
                }
            }
        }
        .sc-order-info{
            padding: 22upx 0;
            margin: 0 auto;
            width: 702upx;
            border-bottom: 2upx solid #D8D8D8;
            .soi-line{
                display: flex;
                margin-bottom: 8upx;
                >view{
                    &:first-child{
                        flex-shrink: 0;
                        margin-right: 8upx;
                        line-height: 52upx;
                        font-size: 28upx;
                        color: #9a9a9d;
                    }
                    &:nth-child(2){
                        flex-grow: 1;
                        >view{
                            font-size: 28upx;
                            line-height: 52upx;
                            color: #333;
                            @include textHide(1);
                        }
                    }
                }
            }
            .soi-total{
                margin-top: 30upx;
                text-align: right;
                font-size: 28upx;
                line-height: 52upx;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                >text{
                    color: #9a9a9d;
                }
            }
        }
        .sc-switch{
            padding: 40upx 24upx 0;
            >view{
                &:first-child{  
                    margin-bottom: 10upx;
                    @include centerFlex(space-between);
                    >view{
                        font-size: 32upx;
                        color: #333;
                        >text{
                            color: #EA5061;
                        }
                    }
                }
                &+view{
                    padding: 0 24upx;
                    font-size: 24upx;
                    line-height: 34upx;
                    color: #9A9A9D;
                }
            }
        }
        .sc-ipt{
            margin: 0 auto;
            padding-top: 40upx;
            padding-bottom: 62upx;
            width: 682upx;
            .si-price{
                margin-bottom: 12upx;
                @include centerFlex(flex-start);
                .sp-tit{
                    flex-shrink: 0;
                    margin-right: 28upx;
                    line-height: 40upx;
                    font-size: 28upx;
                    color: #333;
                }
                .sp-frame{
                    padding: 0 20upx;
                    width: 262upx;
                    height: 56upx;
                    border: 2upx solid #D8D8D8;
                    border-radius: 10upx;
                    >input{
                        width: 100%;
                        height: 100%;
                        font-size: 28upx;
                        color: #333;
                    }
                }
            }
            .si-reason{
              .sr-tit{
                margin-bottom: 18upx;
                font-size: 28upx;
                color: #333;
              }  
              .sr-frame{
                  padding: 20upx 10upx;
                  width: 682upx;
                  height: 260upx;
                  border: 2upx solid #D8D8D8;
                  border-radius: 10upx;
                  font-size: 28upx;
                  line-height: 40upx;
                  color: #333;
              }
            }
        }
        .sc-fixed-bot{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            padding-top: 10upx;
            padding-bottom: 10upx;
            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: #fff;
            .sfb-view{
                margin: 0 auto;
                width: 702upx;
                height: 88upx;
                line-height: 88upx;
                text-align: center;
                font-size: 32upx;
                background-color: #FF873D;
                color: #fff;
                border-radius: 44upx;
            }
        }
    }
</style>