<template>
    <app-layout title="订单详情">
        <view class="state-textbox">
            <text class="state-text">{{ stateText }}</text>
            <text class="state-desc" v-if="stateDesc">{{ stateDesc }}</text>
        </view>
        <view class="order-detail-header">
            <view class="select-group">
                <view class="select-item" :class="{ active: tabIndex == 0 }" @click="showWorker">
                    <text class="text">服务师傅</text>
                </view>
                <view class="select-item" :class="{ active: tabIndex == 1 }" @click="switchTab(1)">
                    <text class="text">订单详情</text>
                </view>
            </view>
        </view>
        <view class="order-detail-body">
            <view v-show="tabIndex == 0" class="detail-tab">
                <!-- 不存在具体师傅时，判断服务师傅展示方式 -->
                <block v-if="utils.isType(order.worker, 'object') && !utils.isType(order.worker.id, 'number')">
                    <!-- 报价订单如果列表不为空则展示师傅列表 -->
                    <block v-if="order.listType == 't2' && order.orderType == 2">
                        <view v-if="utils.isType(order.workerList, 'array') && order.workerList.length > 0" class="worker-group">
                            <view class="worker-item" v-for="(item, index) in order.workerList" :key="index">
                                <view class="datetime">{{ item.createTime }}</view>
                                <view class="price">
                                    <text class="title">报价金额</text>
                                    <text class="number">¥ {{ utils.formatNumber(item.price, 2) }}</text>
                                </view>
                                <view class="detail" @click="workerDetail(item.id)">
                                    <worker-item :data="item" :showPrice="false" />
                                </view>
                                <view class="action">
                                    <view class="btn" @click="chooseWorker(item.uid)">选择师傅</view>
                                </view>
                            </view>
                        </view>
                        <view v-if="utils.isType(order.workerList, 'array') && order.workerList.length == 0" class="desc-text">
                            当前暂无师傅报价
                        </view>
                    </block>
                    <!-- 购买订单、一口价订单展示暂无师傅 -->
                    <view
                        v-if="
                            ((order.listType == 't1' || order.listType == 't2') && order.orderType == 1) || order.listType == 't3'
                        "
                        class="desc-text"
                    >
                        当前暂无师傅接单
                    </view>
                </block>
                <!-- 存在师傅信息，展示师傅详情 -->
                <block v-if="utils.isType(order.worker, 'object') && utils.isType(order.worker.id, 'number')">
                    <view class="desc-text">{{ order.worker.id }}-{{ order.worker.name }}</view>
                </block>
            </view>
            <view v-show="tabIndex == 1" class="detail-tab tab1">
                <view class="order-detail">
                    <view class="section info">
                        <view class="section-title">订单信息</view>
                        <view class="info-row">
                            <text class="title">订单编号：</text>
                            <text class="text">{{ order.orderId }}</text>
                            <text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
                        </view>
                        <block v-if="listType == 't1' || listType == 't2'">
                            <view class="info-row">
                                <text class="title">服务分类：</text>
                                <text class="text">{{ order.cate }}</text>
                            </view>
                            <view class="info-row limit-line clamp-1">
                                <text class="title">需求内容：</text>
                                <text class="text">{{ order.content }}</text>
                            </view>
                            <view class="info-row">
                                <text class="title">下单时间：</text>
                                <text class="text">{{ order.createTime }}</text>
                            </view>
                            <view class="info-row">
                                <text class="title">服务时间：</text>
                                <text class="text">{{ order.serviceTime }}</text>
                            </view>
                        </block>
                        <block v-if="listType == 't3'">
                            <view class="info-row">
                                <text class="title">上门时间：</text>
                                <text class="text">{{ order.serviceTime }}</text>
                            </view>
                        </block>
                    </view>
                    <block v-if="listType == 't1' || listType == 't2'">
                        <view class="section insurance">
                            <service-insurance :showSwitch="false" />
                        </view>
                        <view class="section address">
                            <view class="section-title">服务信息</view>
                            <view class="address-box">
                                <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>
                                    </view>
                                    <view class="detail">
                                        <text>{{ order.address.address }}{{ order.address.detail }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="section demand">
                            <view class="section-title">需求信息</view>
                            <view class="demand-box">
                                <view class="textarea-box">
                                    <text class="textarea">{{ order.content }}</text>
                                </view>
                                <view class="common-form-container">
                                    <view class="upload-item">
                                        <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>
                    </block>
                    <block v-if="listType == 't3'">
                        <view class="section address">
                            <view class="section-title">取货地址</view>
                            <view class="address-box">
                                <text class="iconfont icon-dingwei"></text>
                                <view>
                                    <view class="detail">
                                        <text>{{ order.pickupAddress }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="section address">
                            <view class="section-title">卸货地址</view>
                            <view class="address-box">
                                <text class="iconfont icon-dingwei"></text>
                                <view>
                                    <view class="detail">
                                        <text>{{ order.unloadAddress }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
        <view class="common-bottom-components" :style="{ bottom: 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" @refresh="refresh" />
            </view>
        </view>
        <widget-service :showService="showService" @close="showService = false" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WorkerItem from "@/components/worker/item";
import ServiceInsurance from "@/components/service/insurance";
import OrderAction from "@/components/order/action";
import WidgetService from "@/components/widgets/service";
export default {
    name: "order-detail",
    data() {
        return {
            utils: this.$utils,
            pageConfig: {},
            showService: false,
            tabIndex: 0,
            tabHeight: 0,
            stateText: "",
            stateDesc: "",
            stateTextColor: "",
            id: 0,
            listType: "",
            orderType: 0,
            order: {
                address: {},
            },
            showDetail: false,
            showList: false,
        };
    },
    components: {
        AppLayout,
        WorkerItem,
        ServiceInsurance,
        OrderAction,
        WidgetService,
    },
    async onLoad(e) {
        this.pageConfig = getApp().globalData.pageConfig;

        if (e.id && e.id > 0) {
            this.id = e.id;
        } else {
            return this.$utils.toast("参数错误").then(() => {
                this.$utils.toPage("", {}, "back");
            });
        }
        if (e.list) {
            this.listType = e.list;
        }
        if (e.tab && e.tab == "detail") {
            this.switchTab(1);
        } else {
            this.switchTab(0);
        }
        await this.loadDetail();
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 展示师傅
         */
        showWorker() {
            if (this.$utils.isType(this.order.worker, "object") && this.$utils.isType(this.order.worker.id, "number")) {
                this.$utils.toPage("/pages/worker/detail?id=" + this.order.worker.id);
            } else {
                this.switchTab(0);
            }
        },
        /**
         * 切换Tab
         */
        switchTab(index) {
            this.tabIndex = index;
        },
        // 复制订单号
        copyOrderId(orderId) {
            const that = this;
            uni.setClipboardData({
                data: orderId,
                success(result) {
                    that.$utils.toast("内容已复制");
                },
                fail(error) {
                    that.$utils.toast("复制失败");
                },
            });
        },
        /**
         * 师傅详情
         */
        workerDetail(id) {
            this.$utils.toPage("/pages/worker/detail?id=" + id);
        },
        /**
         * 选择师傅
         */
        chooseWorker(uid) {
            const that = this;
            uni.showModal({
                title: "确认选择该师傅？",
                complete(res) {
                    if (res.confirm) {
                        that.$models.order
                            .chooseWorker(that.id, uid)
                            .then((msg) => {
                                that.$utils.toast(msg).then(() => {
                                    that.loadDetail();
                                });
                            })
                            .catch((e) => {
                                that.$utils.toast(e);
                            });
                    }
                },
            });
        },
        /**
         * 加载详情
         */
        async loadDetail() {
            await this.$models.order
                .orderDetail({
                    request: {
                        api: "order.detail." + this.listType,
                        data: {
                            id: this.id,
                        },
                    },
                    listType: this.listType,
                })
                .then((detail) => {
                    let [stateText, stateDesc, stateTextColor] = this.$models.order.stateText(
                        this.listType,
                        detail.orderType,
                        detail.state
                    );
                    this.stateText = stateText;
                    this.stateDesc = stateDesc;
                    this.stateTextColor = stateTextColor;
                    this.order = {
                        ...detail,
                        listType: this.listType,
                    };
                })
                .catch((e) => {
                    this.$utils.toast(e).then(() => {
                        this.$utils.toPage("", {}, "back");
                    });
                });
        },
        /**
         * 刷新页面
         */
        refresh() {
            this.loadDetail();
        },
        /**
         * 预览图片
         */
        previewImage(index) {
            uni.previewImage({
                urls: this.order.images,
                current: index,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.state-textbox {
    width: 750rpx;
    box-sizing: border-box;
    background: #8c9bec;
    padding: 30rpx;
    color: #ffffff;
    text-align: center;
    .state-text {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 40rpx;
    }
    .state-desc {
        display: block;
        font-size: 24rpx;
        line-height: 24rpx;
        margin-top: 26rpx;
    }
}
.select-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin-bottom: 20rpx;
    .select-item {
        width: 210rpx;
        height: 115rpx;
        box-sizing: border-box;
        text-align: center;
        .text {
            font-size: 30rpx;
            color: #999999;
            line-height: 115rpx;
        }
    }
    .select-item.active {
        border-bottom: 7rpx solid #8b9aeb;
        .text {
            font-weight: bold;
            color: #8b9aeb;
        }
    }
}
.order-detail-body {
    padding-bottom: 120rpx;
}
.detail-tab {
    width: 100%;
    .desc-text {
        color: #999999;
        font-size: 28rpx;
        line-height: 200rpx;
        text-align: center;
    }
}
.worker-group {
    width: 100%;
    .worker-item {
        width: 100%;
        box-sizing: border-box;
        padding: 0 40rpx;
        background-color: #ffffff;
        margin-bottom: 30rpx;
    }
    .datetime {
        font-size: 28rpx;
        color: #999999;
        line-height: 28rpx;
        padding: 30rpx 0;
    }
    .price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 40rpx;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            color: #010101;
        }
        .number {
            font-size: 40rpx;
            font-weight: bold;
            color: #ec7655;
        }
    }
    .detail {
        margin-top: 40rpx;
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #e8e7e7;
    }
    .action {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 30rpx 0;
        .btn {
            display: inline-block;
            padding: 15rpx 26rpx;
            background-color: #8c9bec;
            border-radius: 28rpx;
            font-size: 26rpx;
            color: #ffffff;
        }
    }
}
.order-detail {
    width: 100%;
    .section {
        width: 100%;
        box-sizing: border-box;
        background-color: #ffffff;
        margin-bottom: 22rpx;
        .section-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            margin-bottom: 30rpx;
        }
    }
    .section:last-child {
        margin-bottom: 0;
    }
    .info,
    .address,
    .demand {
        padding: 40rpx;
    }
    .info-row {
        position: relative;
        width: 100%;
        height: 30rpx;
        font-size: 28rpx;
        line-height: 30rpx;
        margin-bottom: 22rpx;
        .title {
            color: #999999;
        }
        .text {
            color: #000000;
        }
        .copy {
            color: #8194f2;
            margin-left: 24rpx;
        }
    }
    .info-row:last-child {
        margin-bottom: 0;
    }
    .address-box {
        display: flex;
        align-items: center;
        .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;
        }
        .detail {
            color: #2d2d2d;
            line-height: 36rpx;
        }
    }
    .demand-box {
        .textarea {
            display: inline-block;
            min-height: 190rpx;
            padding: 0;
            font-size: 26rpx;
            color: #666666;
        }
        .common-form-container {
            .upload-item {
                padding: 0;
            }
        }
    }
}
.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>