<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="switchTab(0)">
                    <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">
            <swiper
                class="list-tab-list"
                :current="tabIndex"
                :duration="300"
                @change="switchTab($event.detail.current)"
                :style="{ height: tabHeight + 'px' }"
            >
                <swiper-item>
                    <view class="detail-tab tab0">
                        <!-- 师傅列表 -->
                        <view class="worker-group">
                            <view class="worker-item" v-for="(item, index) in order.workerList" :key="index">
                                <view class="datetime"> 2022-10-18 10:56:34</view>
                                <view class="price">
                                    <text class="title">报价金额</text>
                                    <text class="number">¥ 306.00</text>
                                </view>
                                <view class="detail" @click="workerDetail(item.id)">
                                    <worker-item :data="item" />
                                </view>
                                <view class="action">
                                    <view class="btn" @click="chooseWorker(item.id)">选择师傅</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view 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>
                                <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>
                            </view>
                            <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">测试(先生)</text>
                                            <text class="mobile">13108196080</text>
                                        </view>
                                        <view class="detail">
                                            <text>四川省成都市涪城区剑门门路西段书亦烧 仙草(成都七中店) 测试</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.src" mode="aspectFill" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <view class="service" @click="utils.serviceActions()">
                <text class="iconfont icon-kefu"></text>
                <text class="text">客服</text>
            </view>
            <view class="action">
                <order-action :order="order" @afterPay="afterPay" />
            </view>
        </view>
    </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";
export default {
    name: "order-detail",
    data() {
        return {
            utils: this.$utils,
            pageConfig: {},
            tabIndex: 0,
            tabHeight: 0,
            stateText: "",
            stateDesc: "",
            stateTextColor: "",
            id: 0,
            listType: "",
            orderType: 0,
            order: {},
        };
    },
    components: {
        AppLayout,
        WorkerItem,
        ServiceInsurance,
        OrderAction,
    },
    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.tab && e.tab == "detail") {
            this.switchTab(1);
        } else {
            this.switchTab(0);
        }
        if (e.list) {
            this.listType = e.list;
        }

        this.loadDetail();
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 切换Tab
         */
        switchTab(index) {
            this.tabIndex = index;
            this.$nextTick(() => {
                this.setTabHeight();
            });
        },
        setTabHeight() {
            let element = ".tab" + this.tabIndex;
            let query = uni.createSelectorQuery().in(this);
            query.select(element).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        // 复制订单号
        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(id) {
            const that = this;
            uni.showModal({
                title: "确认选择该师傅？",
                complete(res) {
                    if (res.confirm) {
                        that.$utils.toast("你选择了师傅" + id);
                    }
                },
            });
        },
        /**
         * 加载详情
         */
        loadDetail() {
            this.$models.order
                .orderDetail({
                    request: {
                        api: "order.detail.t1",
                        data: {
                            id: this.id,
                        },
                    },
                })
                .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");
                    });
                });
        },
        afterPay() {
            this.loadDetail();
        },
    },
};
</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%;
}
.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%;
        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;
        }
        .detail {
            color: #2d2d2d;
            line-height: 36rpx;
            margin-top: 16rpx;
        }
    }
    .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>