<template>
    <div class="container" ref="list" @scroll="menu">
        <div class="list" v-if="list.length>0">
            <div class="list-item" v-for="(item,index) in list">
                <div class="top">
                    <div class="title">{{item.orderTime}}</div>
                    <div class="btn" :style="{backgroundColor:color[item.orderStatus]}">{{orderStatus[item.orderStatus]}}</div>
                </div>
                <largeGoodsItem :goodsInfo='item.houseInfo' :type='1'></largeGoodsItem>
                <div class="delContent" @click="cancel(index)" v-if="item.orderStatus<2">取消预约</div>
                <div class="delContent" @click="del(index)" v-else>删除</div>
            </div>

        </div>
        <div class="nothing" v-else>
            <img src="../assets/info_icon_yuyue_kong.png" alt="">
            <div class="title">还没预约任何房源哦～</div>
            <div class="btn">
                <gm-button type='primary' @click="goHome">去逛逛</gm-button>
            </div>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import largeGoodsItem from '@/components/LargeGoodsItem'
import { mapState } from "vuex";
import moment from 'moment'
export default {
    data() {
        return {
            list: [],
            flag: true,
            currentPage: 0,
            color: ['#15A8AA', '#F95D30', '#ADADAD', '#ADADAD']
        }
    },
    created() {
        this.$store.commit('updateLoading', true)
        this.getData()

    },
    computed: {
        ...mapState(["locationInfo", "userInfo", 'orderStatus'])
    },
    methods: {
        getData() {
            if (!this.flag) {
                return
            }
            this.flag = false
            if (this.currentPage == 0) {
                this.list = []
            }
            this.currentPage++
            this.$http.get({
                url: '/seeOrder/page',
                data: {
                    userId: this.userInfo.id,
                    currentPage: this.currentPage,
                    pageNumber: 20,
                    showFlag: 'Y'
                }
            }).then(res => {
                this.$store.commit('updateLoading', false)
                if (res.success) {
                    res.data.pp.forEach(item => {
                        item.orderTime = this.getDayChinese(moment(item.orderTime).format('YYYY-MM-DD dddd HH:mm'))
                        this.list.push(item)
                    })
                    if (res.data.page.currentPage < res.data.page.totalPage) {
                        this.flag = true
                    }
                }
            })
        },
        getDayChinese(time) {
            var list = time.split(' ')
            var week = ''
            switch (list[1]) {
                case 'Monday': week = '周一'; break;
                case 'Tuesday': week = '周二'; break;
                case 'Wednesday': week = '周三'; break;
                case 'Thursday': week = '周四'; break;
                case 'Friday': week = '周五'; break;
                case 'Saturday': week = '周六'; break;
                case 'Sunday': week = '周日'; break;
            }
            return list[0] + ' ' + week + ' ' + list[2]
        },
        menu() {
            var scrollTop = this.$refs.list.scrollTop
            var height = this.$refs.list.offsetHeight
            var AllHeight = this.$refs.list.scrollHeight
            if (scrollTop + height >= AllHeight) {
                this.getData()
            }
        },
        cancel(index) {
            this.$alert({ title: '提示', content: '确认取消预约吗？', showCancel: true, }, () => {
                this.$store.commit('updateLoading', true)
                this.$http.post({
                    url: '/seeOrder/update',
                    data: {
                        id: this.list[index].id,
                        orderStatus: 3
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.$modal.success({ msg: '取消预约成功', duration: 1500 })
                        this.list[index].orderStatus = 3
                    }
                })
            })
        },
        del(index) {
            this.$alert({ title: '提示', content: '确认删除预约吗？', showCancel: true, }, () => {
                this.$store.commit('updateLoading', true)
                this.$http.post({
                    url: '/seeOrder/update',
                    data: {
                        id: this.list[index].id,
                        showFlag: 'N'
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.$modal.success({ msg: '删除成功', duration: 1500 })
                        this.list.splice(index, 1)
                    }
                })
            })
        },
        goHome(){
            this.$router.push({
                name:'home'
            })
        },
    },
    components: { GmButton, largeGoodsItem }
}
</script>
<style lang="less" scoped>
.container {
    background-color: #f2f4f5;
}

.list-item {
    background-color: #fff;
    border-radius: 0.12rem;
    margin: 0.2rem 0.3rem 0;
    position: relative;

    .top {
        display: flex;
        align-items: center;
        height: 1.12rem;
        justify-content: space-between;
        margin: 0 0.3rem;
        border-bottom: 0.02rem solid #f2f4f5;
        .title {
            font-size: 0.3rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 0.42rem;
        }

        .btn {
            font-size: 0.24rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.34rem;
            padding: 0.1rem 0.2rem;
            border-radius: 0.3rem;
        }
    }

    .delContent {
        padding: 0.3rem;
        font-size: 0.24rem;
        color: rgba(170, 172, 173, 1);
        line-height: 0.34rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
.nothing {
    display: flex;
    flex-direction: column;

    img {
        width: 3rem;
        height: 3rem;
        margin: 0.6rem auto;
    }

    .title {
        font-size: 0.24rem;
        color: rgba(170, 172, 173, 1);
        line-height: 0.34rem;
        text-align: center;
    }

    .btn {
        margin: 1.6rem;
    }
}
</style>


