<config>
{
    "navigationBarTitleText": "维修详情",
}
</config>
<template>
    <div class="details">
        <div class="content">
            <div class="title">维修详情</div>
            <div class="box">
                <div class="text">
                    <div class="text1">报修单号</div>
                    <div class="text2">2222</div>
                </div>
                <div class="text">
                    <div class="text1">故障描述</div>
                    <div class="text2">门框松动，需要加固一下</div>
                </div>
                <div class="text">
                    <div class="text1">报修地点</div>
                    <div class="text2">宝山万达店142房</div>
                </div>
                <div class="text">
                    <div class="text1">故障图片</div>
                    <img class="icon" src="../../native/icon_baoxiuren@3x.png" alt="" />
                </div>
                <div class="text">
                    <div class="text1">报修人</div>
                    <div class="text2 text3">张韩中</div>
                </div>
                <div class="text">
                    <div class="text1">联系方式</div>
                    <div class="text2">1777789087</div>
                </div>
                <div class="text">
                    <div class="text1">报修时间</div>
                    <div class="text2">2021.04.02 15:56:23</div>
                </div>
            </div>
            <div class="title">人员信息</div>
            <div class="box1">
                <div class="name">
                    <div class="icon1"></div>
                    <div class="name1 name2">张韩中</div>
                    <div class="name1">报修</div>
                </div>
                <div class="time">2021.04.05 12:35:48</div>
            </div>
            <div class="title">维修信息</div>
            <div class="box">
                <div class="text">
                    <div class="text1">维修描述</div>
                    <div class="text2">已加固，没问题了</div>
                </div>
                <div class="text">
                    <div class="text1">维修图片</div>
                    <img class="icon" src="../../native/icon_baoxiuren@3x.png" alt="" />
                </div>
                <div class="text">
                    <div class="text1">维修人</div>
                    <div class="text2 text3">张韩中</div>
                </div>
                <div class="text">
                    <div class="text1">维修时间</div>
                    <div class="text2">2021.04.02 15:56:23</div>
                </div>
            </div>
        </div>
        <div class="btn-list">
            <div class="btn1" @click="submit">指派别人</div>
            <div class="btn" @click="show = true">我来处理</div>
        </div>
        <van-overlay :show="show">
            <div class="wrapper">
                <div class="block">
                    <div class="title">受理确认</div>
                    <div class="text text3">
                        <div class="text1">报修单号</div>
                        <div class="text2">2222</div>
                    </div>
                    <div class="text">
                        <div class="text1">故障描述</div>
                        <div class="text2">门框松动，需要加固一下</div>
                    </div>
                    <div class="text">
                        <div class="text1">报修地点</div>
                        <div class="text2">宝山万达店142房</div>
                    </div>
                    <div class="text">
                        <div class="text1">受理人</div>
                        <div class="text2">张三</div>
                    </div>
                    <div class="text">
                        <div class="text1">受理时间</div>
                        <div class="text2">2021.04.02 15:56:23</div>
                    </div>
                    <div class="btn2">确认</div>
                    <div class="btn2 btn3" @click="show = false">取消</div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
export default {
    data() {
        return {
            show: false
        };
    },
    methods: {
        submit() {
            wx.navigateTo({ url: '/pages/Repair/assign' });
            // this.$router.push({
            //     path: '/assign',
            //     query: {
            //         id: this.id
            //     }
            // });
        }
    }
};
</script>
<style lang="less" scoped>
.details {
    background: #f5f7fa;
    min-height: 100vh;
    padding-bottom: 150px;
    .content {
        padding: 0 20px;
        .title {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #000000;
            line-height: 30px;
            padding: 20px 0 10px;
        }
        .box {
            padding: 20px 16px;
            background: #fff;
            border-radius: 8px;
            .text {
                display: flex;
                .text1 {
                    width: 64px;
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: normal;
                    color: #abaeb3;
                    line-height: 26px;
                    margin-right: 16px;
                }
                .icon {
                    width: 60px;
                    height: 60px;
                    border-radius: 4px;
                    margin: 0 10px 12px 0;
                }
                .text2 {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #000000;
                    max-width: 200px;
                    .ellipsis();
                    line-height: 26px;
                    margin-bottom: 12px;
                    &.text3 {
                        color: #ff7f1f;
                    }
                }
            }
        }
        .box1 {
            padding: 20px 12px;
            background: #fff;
            border-radius: 8px;
            .name {
                .flex();
                .icon1 {
                    width: 6px;
                    height: 6px;
                    background: #ebedf0;
                }
                .name1 {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: normal;
                    color: #000000;
                    line-height: 26px;
                    &.name2 {
                        margin: 0 20px 0 10px;
                    }
                }
            }
            .time {
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: normal;
                color: #abaeb3;
                line-height: 22px;
                margin-left: 16px;
            }
        }
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        padding: 14px 16px 12px;
        border-radius: 16px;
        background-color: #fff;
        .title {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: normal;
            color: #000000;
            text-align: center;
            line-height: 22px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f5f7fa;
        }
        .text {
            display: flex;
            &.text3 {
                margin-top: 20px;
            }
            .text1 {
                width: 64px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: normal;
                color: #abaeb3;
                line-height: 26px;
                margin-right: 16px;
            }
            .icon {
                width: 60px;
                height: 60px;
                border-radius: 4px;
                margin: 0 10px 12px 0;
            }
            .text2 {
                .ellipsis();
                font-size: 16px;
                max-width: 200px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: bold;
                color: #000000;
                line-height: 26px;
                margin-bottom: 12px;
            }
        }
        .btn2 {
            width: 240px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            background: #ff7f1f;
            border-radius: 24px;
            margin: 16px;
            &.btn3 {
                color: #939599;
                background: #f0f2f5;
                // margin-top: 20px;
            }
        }
    }
    .btn-list {
        .bottom();
        position: fixed;
        width: 100%;
        bottom: 0;
        background: #ffffff;
        display: flex;
        padding-top: 6px;
        padding-left: 20px;
        height: 60px;
        .btn1 {
            width: 158px;
            height: 48px;
            background: rgba(255, 127, 31, 0.16);
            border-radius: 24px;
            border: 1px solid #ff7f1f;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            font-weight: normal;
            color: #ff7f1f;
        }
        .btn {
            width: 157px;
            height: 48px;
            background: #ff7f1f;
            border-radius: 24px;
            color: #fff;
            line-height: 48px;
            margin-left: 20px;
            text-align: center;
            font-size: 16px;
        }
    }
}
</style>
