<template>
    <app-layout title="订单详情">
        <view class="order-detail-container">
            <view class="detail-section">
                <view class="order-head">
                    <view class="order-title">
                        <text class="type" :style="{ backgroundColor: typeTextBg }">
                            {{ typeText }}
                        </text>
                        <text class="text">{{ order.cate }}</text>
                    </view>
                    <view class="state" :style="{ color: stateTextColor }">
                        {{ stateText }}
                    </view>
                </view>
                <view class="order-body">
                    <view class="order-desc-row datetime">
                        <text class="text">订单号：{{ order.orderId }}</text>
                        <text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
                    </view>
                    <view class="order-desc-row datetime">
                        <text class="text">{{ order.createTime }}</text>
                    </view>
                </view>
            </view>
            <block v-if="listType == 't1' || listType == 't2'">
                <view class="detail-section">
                    <view class="section-title">需求信息</view>
                    <view class="section-content">
                        <view class="demand-item">
                            <view class="title">需求内容：</view>
                            <view class="content">
                                {{ order.content }}
                            </view>
                        </view>
                        <view class="demand-item">
                            <view class="title">上门时间：</view>
                            <view class="content service-time">
                                <text class="datetime">
                                    {{ order.serviceTime }}
                                </text>
                                <!-- <text class="iconfont icon-bianji"></text> -->
                            </view>
                        </view>
                        <view class="demand-item">
                            <view class="demand-images">
                                <view class="image-box" v-for="(item, index) in order.images" :key="index">
                                    <image class="image" :src="item" mode="aspectFill" @click="previewImage(index)" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="detail-section">
                    <view class="section-title">上门地址</view>
                    <view class="address-box" @click="openLocation(order.address.lng, order.address.lat)">
                        <text class="iconfont icon-dingwei"></text>
                        <view>
                            <view class="contact limit-line clamp-1">
                                <text class="name">
                                    {{ order.address.name }}({{ order.address.gender == 1 ? "先生" : "女士" }})
                                </text>
                                <text class="mobile">{{ order.address.mobile }}</text>
                                <text class="call" @click.stop="utils.callPhone(order.address.mobile)">拨号</text>
                            </view>
                            <view class="detail">
                                <text>{{ order.address.address }}{{ order.address.detail }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <block v-if="listType == 't3'">
                <view class="detail-section">
                    <view class="section-title">取货时间</view>
                    <view class="section-content">
                        <view class="demand-item">
                            <view class="title">上门时间：</view>
                            <view class="content service-time">
                                <text class="datetime">
                                    {{ order.serviceTime }}
                                </text>
                                <!-- <text class="iconfont icon-bianji"></text> -->
                            </view>
                        </view>
                    </view>
                </view>
                <view class="detail-section">
                    <view class="section-title">取货地址</view>
                    <view class="address-box" @click="openLocation(order.pickupAddress.lng, order.pickupAddress.lat)">
                        <text class="iconfont icon-dingwei"></text>
                        <view>
                            <view class="contact limit-line clamp-1">
                                <text class="name">
                                    {{ order.pickupAddress.name }}({{ order.pickupAddress.gender == 1 ? "先生" : "女士" }})
                                </text>
                                <text class="mobile">{{ order.pickupAddress.mobile }}</text>
                                <text class="call" @click.stop="utils.callPhone(order.pickupAddress.mobile)">拨号</text>
                            </view>
                            <view class="detail">
                                <text>{{ order.pickupAddress.address }}{{ order.pickupAddress.detail }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="detail-section">
                    <view class="section-title">卸货地址</view>
                    <view class="address-box" @click="openLocation(order.unloadAddress.lng, order.unloadAddress.lat)">
                        <text class="iconfont icon-dingwei"></text>
                        <view>
                            <view class="contact limit-line clamp-1">
                                <text class="name">
                                    {{ order.unloadAddress.name }}({{ order.unloadAddress.gender == 1 ? "先生" : "女士" }})
                                </text>
                                <text class="mobile">{{ order.unloadAddress.mobile }}</text>
                                <text class="call" @click.stop="utils.callPhone(order.unloadAddress.mobile)">拨号</text>
                            </view>
                            <view class="detail">
                                <text>{{ order.unloadAddress.address }}{{ order.unloadAddress.detail }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <view class="detail-section">
                <text class="price-box">¥ {{ utils.formatNumber(order.price, 2) }}</text>
            </view>
        </view>
        <view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <view class="service" @click="showService = true">
                <text class="iconfont icon-kefu"></text>
                <text class="text">客服</text>
            </view>
            <view class="action">
                <order-action :order="order" @confirmPrice="showPriceModal(order.id)" @refresh="refresh" />
            </view>
        </view>
        <order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="finishOrder" />
        <widget-service :showService="showService" @close="showService = false" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import OrderAction from "@/components/order/action";
import GetAction from "@/components/get/action";
import OrderConfirmPrice from "@/components/order/confirm-price";
import WidgetService from "@/components/widgets/service";
export default {
    name: "order-detail",
    data() {
        return {
            utils: this.$utils,
            models: this.$models,
            pageConfig: {},
            showConfirmModal: false,
            listType: "",
            typeText: "",
            typeTextBg: "",
            stateText: "",
            stateTextColor: "",
            showService: false,
            order: {
                address: {},
            },
        };
    },
    components: {
        AppLayout,
        OrderAction,
        GetAction,
        OrderConfirmPrice,
        WidgetService,
    },
    onLoad(e) {
        this.pageConfig = getApp().globalData.pageConfig;
        if (e.id && e.id > 0) {
            this.id = e.id;
        } else {
            this.$utils.toast("参数错误");
            return;
        }
        this.listType = e.list;
    },
    onShow() {
        this.loadDetail();
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        openLocation(lng, lat) {
            uni.openLocation({
                longitude: parseFloat(lng),
                latitude: parseFloat(lat),
            });
        },
        copyOrderId(orderId) {
            const that = this;
            uni.setClipboardData({
                data: orderId,
                success(result) {
                    that.$utils.toast("内容已复制");
                },
                fail(error) {
                    that.$utils.toast("复制失败");
                },
            });
        },
        showPriceModal(id) {
            this.$store.commit("order/setConfirmId", id);
            this.showConfirmModal = true;
        },
        /**
         * 确认订单
         */
        finishOrder(e) {
            this.showConfirmModal = false;
            this.$models.order
                .finishOrder({
                    request: {
                        api: "order.finish." + this.listType,
                        data: {
                            id: e.id,
                            money: e.price,
                        },
                    },
                })
                .then((response) => {
                    this.$utils.toast(response.msg).then(() => {
                        this.$store.commit("system/refreshOrder", true);
                        this.loadDetail();
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
        /**
         * 订单详情
         */
        loadDetail() {
            this.$models.order
                .getDetail({
                    request: {
                        api: "order.detail." + this.listType,
                        data: {
                            id: this.id,
                        },
                    },
                    listType: this.listType,
                })
                .then((order) => {
                    let [typeText, typeTextBg] = this.$models.order.typeText(this.listType, order.orderType);
                    this.typeText = typeText;
                    this.typeTextBg = typeTextBg ? typeTextBg : "#8b9beb";
                    let [stateText, stateTextColor] = this.$models.order.stateText(this.listType, order.orderType, order.state);
                    this.stateText = stateText;
                    this.stateTextColor = stateTextColor ? stateTextColor : "#999999";
                    this.order = order;
                });
        },
        /**
         * 刷新页面
         */
        refresh() {
            this.$store.commit("system/refreshOrder", true);
            this.loadDetail();
        },
        /**
         * 预览图片
         */
        previewImage(index) {
            uni.previewImage({
                urls: this.order.images,
                current: index,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.order-detail-container {
    padding-bottom: 120rpx;
}
.detail-section {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
    background-color: #ffffff;
    margin-bottom: 24rpx;
    .section-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #000000;
    }
}
.order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .order-title {
        display: flex;
        align-items: center;
        .type {
            display: inline-block;
            box-sizing: border-box;
            padding: 9rpx 24rpx;
            border-radius: 10rpx;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 24rpx;
            margin-right: 22rpx;
        }
        .text {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            line-height: 30rpx;
        }
    }
    .state {
        font-size: 26rpx;
        line-height: 32rpx;
    }
}
.order-body {
    width: 100%;
    .order-desc-row {
        position: relative;
        width: 100%;
        font-size: 28rpx;
        line-height: 30rpx;
        margin-top: 30rpx;
        .title {
            color: #999999;
        }
        .text {
            color: #000000;
        }
        .copy {
            color: #8194f2;
            margin-left: 24rpx;
        }
    }
}
.demand-item {
    width: 100%;
    display: flex;
    font-size: 28rpx;
    line-height: 36rpx;
    margin-top: 40rpx;
    .title {
        width: 150rpx;
        flex-shrink: 0;
        color: #999999;
    }
    .content {
        width: 100%;
        color: #000000;
    }
    .service-time {
        display: flex;
        justify-content: space-between;
        .datetime {
            color: #000000;
        }
        .iconfont {
            font-size: 32rpx;
            color: #999999;
        }
    }
}
.demand-images {
    display: flex;
    flex-wrap: wrap;
    .image-box {
        width: 133.2rpx;
        height: 133.2rpx;
        background: rgba(184, 180, 179, 0);
        box-sizing: border-box;
        border-radius: 25rpx;
        overflow: hidden;
        border: 1px solid #f7f7f7;
        .image {
            width: 100%;
            height: 100%;
        }
    }
}
.address-box {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    .iconfont {
        font-size: 40rpx;
        color: #8194f2;
        padding: 0 50rpx;
    }
    .contact,
    .detail {
        font-size: 26rpx;
        font-weight: 500;
    }
    .contact {
        color: #000000;
        line-height: 26rpx;
        margin-bottom: 16rpx;
        .mobile {
            margin: 0 10rpx;
        }
        .call {
            color: #8194f2;
        }
    }
    .detail {
        color: #2d2d2d;
        line-height: 36rpx;
    }
}
.price-box {
    font-size: 48rpx;
    line-height: 48rpx;
    font-weight: bold;
    color: #ec7655;
}
.common-bottom-components {
    .service {
        display: flex;
        align-items: center;
        .iconfont {
            font-size: 60rpx;
            color: #999999;
        }
        .text {
            display: inline-block;
            font-size: 28rpx;
            color: #999999;
            margin-left: 10rpx;
        }
    }
}
</style>