<template>
    <view style="display: flex;flex-direction: column;height: 100vh; background: #F7F7F7;">
        <loading-state ref="pageView" @request="request">
            <view style="height: 100vh;overflow: hidden;overflow-y: auto;">
                <view v-if="data.payStatus=='2'"
                    style="display: flex;flex-direction: row;align-items: center;width: 100%;justify-content: center;margin-top: 10px;padding: 10px;">
                    <text style="font-size: 14px;">还剩</text>
                    <text
                        style="font-weight: 600;color: #FF5006;font-size: 18px;margin-left: 2px;margin-right: 2px;">{{page.countdown}}</text>
                    <text style="font-size: 14px;">订单自动取消</text>

                </view>

                <view
                    style="background: #fff;border-radius: 10px;display: flex;flex-direction: column;padding: 15px;margin-top: 15px; margin-left: 10px;margin-right: 10px;">

                    <view v-for="(item,index) in data.ordOrderDetails"
                        style=" display: flex;flex-direction: row;align-items: center; margin-bottom: 15px;">

                        <image :src="item.picUrl" @click="itemClick(item.goodsSid)"
                            style="width: 70px;height: 70px;border-radius: 15px;" mode="scaleToFill">
                        </image>

                        <view style="margin-left: 10px;display: flex;flex-direction: column;flex: 1;">

                            <view style="display: flex;flex-direction: row;width: 100%;">

                                <text style="flex: 1;font-weight: 600;font-family: sans-serif;font-size: 14px;"
                                    @click="itemClick(item.goodsSid)">{{item.goodsName}}</text>
                                <text
                                    style="font-weight: 600;font-family: sans-serif;font-size: 14px;">￥{{item.priceUnit}}</text>
                            </view>

                            <!-- <text style="margin-top: 10px;font-size: 12px;color: #999;">{{item.remarks}}</text> -->

                            <view style="margin-top: 8px;display: flex;flex-direction: column;">

                                <view style="display: flex;flex-direction: row;align-items: center;">
                                    <!--   <text style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
									font-size: 10px;color: #EE752F;">{{item.priceUnit}}元/{{item.unitName}}</text> -->
                                    <text
                                        style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
									font-size: 10px;color: #EE752F;  margin-right: 10px; ">{{item.numofPart}}{{item.specificationUnit}}/{{item.unitName}}</text>
                                </view>

                                <text
                                    style="margin-top: 12px;font-size: 12px;color: #999;">份数：{{item.partNumber}}</text>

                            </view>

                        </view>

                    </view>

                    <view style="display: flex;flex-direction: column;
				border-top: 1px solid #EFEFEF;padding-top: 15px;">

                        <view
                            style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
                            <text>商品总额</text>
                            <text>￥{{data.totalTee}}</text>
                        </view>

                        <!-- 	<view
							style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 15px;">
							<text>附加费</text>
							<text>￥{{data.surcharge}}</text>
						</view> -->

                    </view>

                    <view style="display: flex;flex-direction: row;align-items: center;
				border-top: 1px solid #EFEFEF;padding-top: 15px;margin-top: 15px;">

                        <view style="flex: 1;">
                        </view>

                        <view v-if="data.payStatus=='4'"
                            style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
                            <text>实付</text>
                            <text style="font-size: 16px;font-weight: 600;color: #FF5006;">￥{{data.totalTee}}</text>
                        </view>

                        <view v-if="data.payStatus=='2'"
                            style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
                            <text style="color: #FF5006;margin-right: 3px;font-size: 14px;">需付款</text>
                            <text style="color: #FF5006;font-size: 16px;font-weight: 600;">￥{{data.totalTee}}</text>
                        </view>

                        <view v-if="data.payStatus=='3'"
                            style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
                            <text style="color: #666;margin-right: 3px;font-size: 14px;">需付款</text>
                            <text style="color: #666;font-size: 16px;font-weight: 600;">￥{{data.totalTee}}</text>
                        </view>

                    </view>


                </view>

                <view style="background: #fff;border-radius: 10px;margin-top: 12px;margin-left: 10px;margin-right: 10px;
			display: flex;flex-direction: column;padding: 12px 16px;margin-bottom: 100px;">

                    <text style="font-size: 16px;">订单信息</text>

                    <view style="display: flex;flex-direction: column;margin-top: 15px; ">

                        <view style="display: flex;flex-direction: row;align-items: center;">

                            <text style="font-size: 14px;color: #999;">订单编号</text>
                            <text
                                style="margin-left: 15px;font-size: 14px;color: #333;word-break: break-all;">{{data.outTradeNo}}</text>
                        </view>

                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">

                            <text style="font-size: 14px;color: #999;">下单时间</text>
                            <text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.createTime}}</text>
                        </view>

                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">

                            <text style="font-size: 14px;color: #999;">支付方式</text>
                            <text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.payType}}</text>
                        </view>

                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"
                            v-if="data.payStatus=='4'">

                            <text style="font-size: 14px;color: #999;">付款时间</text>
                            <text style="margin-left: 15px;font-size: 14px;color: #333;">{{data.payTime}}</text>
                        </view>

                    </view>

                </view>

            </view>
        </loading-state>

        <view v-if="data.payStatus=='2'||data.payStatus=='4'"
            style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center; 
		box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">

            <view style="flex: 1;"></view>

            <text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
					padding: 0px 20px;border-radius: 20px;margin-right: 10px;" @click="continuePy"
                v-if="data.payStatus=='2'">继续付款</text>


            <view style="display: flex;flex-direction: row;align-items: center;" v-if="data.payStatus=='4'">
                <text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
                		padding: 0px 20px;border-radius: 20px;margin-right: 10px;" @click="refund">申请退款</text>

                <text style="font-size: 16px;color: #666;  border: 1px #D3D3D3 solid; height: 5vh;line-height: 5vh;
						padding: 0px 20px;border-radius: 20px;" @click="makeInvoice(data.sid)" v-if="data.invoiceStatus=='0'">开具发票</text>
                <text style="font-size: 16px;color: #666;  border: 1px #D3D3D3 solid; height: 5vh;line-height: 5vh;
								padding: 0px 20px;border-radius: 20px;" v-if="data.invoiceStatus=='1'">发票开具中</text>
            </view>
        </view>

        <!-- 	<view v-if="data.payStatus=='4'&&data.invoiceStatus=='3'"
			style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center; 
		box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">

			<view style="flex: 1;"></view>
			<view style="display: flex;flex-direction: row;align-items: center;">
				<text style="font-size: 16px;color: #666;  border: 1px #D3D3D3 solid; height: 5vh;line-height: 5vh;
						padding: 0px 20px;border-radius: 20px;" @click="makeInvoice(data.sid)">重新开票</text>
			</view>
		</view> -->

        <!-- <view v-if="data.payStatus=='2'"
			style="position: absolute; bottom: 0px; display: flex;flex-direction: row;width: 100%;align-items: center; 
		box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 8vh;border-top: 1px solid #EFEFEF;">

			<view style="flex: 1;"></view>
			<text style="font-size: 16px;color: #fff; background-color: #FF9900; height: 5vh;line-height: 5vh;
					padding: 0px 20px;border-radius: 20px;" @click="continuePy">继续付款</text>

		</view -->



    </view>

</template>

<script>
    export default {
        data() {
            return {
                page: {
                    sid: "",
                    countdown: "",
                    nowDate: ""
                },
                data: {}
            }
        },
        onLoad(options) {

            this.page.sid = options.sid

        },
        onShow() {
            this.request()
        },
        methods: {
            itemClick(goodsSid) {
                uni.navigateTo({
                    url: '/pages/good/goodsDetail?sid=' + goodsSid
                })
            },
            // 获取数据
            request() {

                let _this = this

                _this.$api.orderDetails(_this.page.sid).then((resp) => {
                    _this.data = resp
                    _this.page.nowDate = resp.nowDate

                    if (_this.data.payStatus == 2)
                        _this.countTime() // 倒计时

                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(2)
                    })

                }).catch(e => {
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(1)
                    })
                })
            },
            continuePy() {

                var list = this.page.countdown.split(":")
                var mm = list[0] // 获取分钟数
                var ss = list[1] // 获取秒数

                var totalSeconds = Number(mm) * 60 + Number(ss)

                this.data.result.remainder = totalSeconds
                // console.log("==============",this.data.result.remainder);
                this.$pay(this.data.result)
            },
            countTime() {
                var that = this;
                // var date = new Date();
                // var now = date.getTime();
                // var now = that.data.nowDate;
                // console.log("now", that.page.nowDate);
                var endDate = new Date(that.data.endTime); //设置截止时间
                var end = endDate.getTime();
                // console.log("end", end);
                var leftTime = end - that.page.nowDate; //时间差    
                var d, h, m, s, ms;
                // console.log("leftTime", leftTime);

                if (leftTime >= 0) {
                    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                    h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                    m = Math.floor(leftTime / 1000 / 60 % 60);
                    s = Math.floor(leftTime / 1000 % 60);
                    ms = Math.floor(leftTime % 1000);
                    ms = ms < 100 ? "0" + ms : ms
                    s = s < 10 ? "0" + s : s
                    m = m < 10 ? "0" + m : m
                    h = h < 10 ? "0" + h : h
                    that.page.countdown = m + ":" + s
                    //递归每秒调用countTime方法，显示动态时间效果
                    that.page.nowDate = that.page.nowDate + 1000
                    setTimeout(that.countTime, 1000);
                } else {
                    that.page.countdown = '00:00:00'
                    that.data.payStatus = '3'
                    that.changePayState()
                }
            },
            changePayState() {
                let _this = this
                _this.$api.changePayState(_this.page.sid).then((resp) => {

                }).catch(e => {

                })
            },
            makeInvoice(sid) {
                // let _this = this

                // var params = {
                // 	outTradeNo: _this.data.outTradeNo,
                // 	totalTee: _this.data.totalTee,
                // 	// phone: getApp().globalData.mobile,
                // }

                // console.log("makeInvoice", params);

                // _this.$api.wxElectronicInvoice(params).then((resp) => {

                // 	console.log("wxElectronicInvoice", resp);

                // 	wx.navigateToMiniProgram({
                // 		appId: resp.appid,
                // 		path: resp.auth_url,
                // 		success(res) {
                // 			console.log('navigateToMiniProgram success:', res)
                // 		},
                // 		fail(error) {
                // 			console.log('navigateToMiniProgram fail:', error)
                // 		},
                // 		complete(res) {
                // 			console.log('navigateToMiniProgram complete:', res)
                // 		}
                // 	})

                // }).catch(e => {

                // })


                uni.navigateTo({
                    url: "/pages/me/makeInvoice?sid=" + sid
                })

            },

            refund() {

                uni.navigateTo({
                    url: "/pages/me/applyRefund?sid=" + this.page.sid
                })

                // uni.navigateTo({
                //     url: "/pages/me/refundDetail?sid=" + this.page.sid
                // })
            }

        }


    }
</script>

<style>

</style>