<template>
    <view
        style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);"
        class="app">
        <!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
        <z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'>

            <view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;background: #FBE9CB;margin-top: 10px;
				padding: 12px 0px;
				border-radius: 15px;">

                <view class="item">
                    <!-- 	<view class="left-circle"></view>
					<view class="right-circle"></view>
					<view class="item-line"></view> -->

                    <view class="item-top" style="margin-left: 16px;margin-right: 16px;">

                        <text class="item-top-code">预约单号：{{item.newCode}}</text>
                        <text class="item-top-state">{{item.stateValue}}</text>
                    </view>

                    <view
                        style="display: flex;flex-direction: row;align-items: center;margin-left: 16px;margin-right: 16px;margin-top: 15px;">
                        <text
                            style="font-size: 16px;margin-right: 8px;flex: 1;margin-right: 15px;">{{item.storeName}}</text>

                        <!-- 	<view style="display: flex;flex-direction: row;align-items: center;"
							@click="makePhoneCall(item.linkPhone)">
							<image src="../../static/phone-2.png" style="width: 20px;height: 20px;margin-right: 5px;">
							</image>
							<text>咨询电话</text>
						</view> -->

                    </view>


                    <view
                        style="display: flex;flex-direction: row;align-items: center;margin-left: 16px;margin-right: 16px;margin-top: 6px;">
                        <image src="../../static/dingwei.png" style="width: 20px;height: 20px;margin-right: 5px;"
                            mode="aspectFit">
                        </image>
                        <text style="font-size: 12px;color: #666;">{{item.address}}</text>
                    </view>

                    <view class="item-bom" style="margin-left: 16px;margin-right: 16px;margin-top: 10px;">

                        <view class="item-bom-left">

                            <view style="display: flex;flex-direction: row;align-items: center;">
                                <text style="font-size: 12px;color: #666; margin-right: 5px;">提货日期：</text>
                                <text style="font-size: 12px;color: #FD6D2B;">{{item.reserveDate}}</text>
                            </view>

                            <view style="display: flex;flex-direction: row;align-items: center;margin-top: 16px;">
                                <text style="font-size: 12px;color: #666; margin-right: 5px;">提货人：</text>
                                <text style="font-size: 12px;color: #333; margin-right: 5px;">{{item.userName}}</text>
                                <text style="font-size: 12px;color: #333; ">{{item.userPhone}}</text>
                            </view>

                        </view>

                        <view class="item-bom_right">

                            <image src="https://supervise.yxtsoft.com/lpk/image/daiticai.png"
                                style="width: 80px; height: 80px;z-index: 100;border-radius: 20px;">
                            </image>

                        </view>

                    </view>

                    <view style="display: flex;flex-direction: row;align-items: center;width: 100%;margin-top: 15px;">

                        <view
                            style="display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;"
                            @click="cancelReservation(item)">
                            <image src="../../static/close3.png" style="width: 32px;height: 32px;"></image>
                            <text style="font-size: 12px;color: #666;margin-top: 5px;">取消预约</text>
                        </view>

                        <view style="background: #E0DBD0; height: 30px;width: 1px;"></view>

                        <view
                            style="display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;"
                            @click="makePhoneCall(item.linkPhone)">
                            <image src="../../static/phone-3.png" style="width: 32px;height: 32px;"></image>
                            <text style="font-size: 12px;color: #666;margin-top: 5px;">电话咨询</text>
                        </view>

                    </view>


                    <view style="
						height: 30px;margin-top: 5px;">
                        <image src="https://supervise.yxtsoft.com/lpk/image/reservationRecords_icon1.png"
                            style="width: 100%;height: 100%;" mode="scaleToFill"></image>

                    </view>


                    <view class="item_list" v-if="item.showLsit" style="margin-left: 16px;margin-right: 16px;">

                        <view v-for="(child,index) in item.goodsVo"
                            style="display: flex;flex-direction: row;width: 100%;">

                            <view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;
							padding-left: 10px;padding-right: 10px;margin-bottom: 8px;">
                                <text style="font-size: 12px;color: #666;">{{child.goodName}}</text>
                                <text style="font-size: 12px;color: #666;">{{child.num}}{{child.unitName}}</text>
                            </view>

                        </view>

                    </view>

                    <view class="item_btn" v-if="!item.showLsit" @click="showList(item)">
                        <text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text>
                        <image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image>
                    </view>

                    <view class="item_btn" v-if="item.showLsit" @click="showList(item)">
                        <text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text>
                        <image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image>
                    </view>
                </view>

            </view>

        </z-paging>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                styleObject: {
                    'padding-top': '10px',
                    'padding-bottom': '10px',
                    'border-radius': '15px',
                    'background': '#F9F9F9'
                },
                data: []
            }
        },

        onLoad() {
            // this.$refs.paging.complete(_this.data)
            // this.$refs.paging.complete(true)
        },

        methods: {
            cancelReservation(item) {
                var _this = this
                console.log("item", item);
                if (item.cancel) {
                    // 可取消
                    uni.showModal({
                        title: '',
                        content: '确认要取消预约吗？',
                        cancelText: "取消",
                        confirmText: "确定",
                        confirmColor: "#FF9900",
                        success(res) {
                            if (res.confirm) {
                                // console.log('用户点击确定')

                                _this.$api.cancelReservation(item.reserveCode).then((resp) => {

                                    const index = _this.data.findIndex((info) => info.sid === item.sid)
                                    console.log("index》》》》", index)
                                    _this.data.splice(index, 1)

                                }).catch(e => {

                                })

                            } else if (res.cancel) {
                                // console.log('用户点击取消')
                            }
                        }
                    })

                } else {
                    // 超出时限 不可取消
                    this.shortToast('已超出可取消预约提货时间。')
                    return
                }

            },

            makePhoneCall(phone) {
                if (this.stringIsNotEmpty(phone))
                    wx.makePhoneCall({

                        phoneNumber: phone,

                    })
            },
            showList(item) {
                item.showLsit = !item.showLsit
            },
            // 分页的请求
            queryList(pageNo, pageSize) {
                let _this = this
                _this.$api.myOrderListByUserSid({
                    "current": pageNo,
                    "size": pageSize,
                    "params": {
                        "customerSid": getApp().globalData.sid,
                        "state": '0', //0 未提货  1 已提货

                    }
                }).then((resp) => {
                    // 添加数据源
                    this.$refs.paging.complete(resp.records)
                }).catch(e => {
                    // 出错了，点击重试
                    _this.$refs.paging.complete(false);
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .app {
        --bgcolor: #f2f2f2;

    }

    .item {
        position: relative;
        box-sizing: border-box;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        // /*最重要的部分如下：*/
        // background-image: radial-gradient(circle at left 50%, #f2f2f2, #f2f2f2 12px, transparent 12px),
        // 	radial-gradient(circle at right 50%, #f2f2f2, #f2f2f2 12px, transparent 12px);

        .item-line {
            width: 96%;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            margin-left: 7px;
            margin-right: 7px;
            border-bottom: 2rpx dashed #f0f;
            position: absolute;
            height: 20rpx;
            top: 150px;
        }

        .left-circle {
            background-color: var(--bgcolor);
            position: absolute;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            top: 150px;
            left: -50px;
        }


        .right-circle {
            background-color: var(--bgcolor);
            position: absolute;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            top: 150px;
            right: -50px;
        }

        .item-top {
            position: relative; //添加的定位
            z-index: 100;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .item-top-code {
                font-size: 14px;
                color: #333;
            }

            .item-top-state {
                font-size: 14px;
                color: #FF9900;
            }
        }

        .item-bom {
            position: relative; //添加的定位
            z-index: 100;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .item-bom-left {
                display: flex;
                flex-direction: column;
            }

            .item-bom_right {

                border-radius: 20px;
            }
        }

        .item_list {
            position: relative; //添加的定位
            z-index: 100;
            margin-top: 5px;
        }

        .item_btn {
            z-index: 100;
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            justify-content: center;
        }
    }
</style>