<template>
    <app-layout title="师傅详情">
        <view class="worker-header">
            <view class="worker-base">
                <view class="head">
                    <image class="cover" :src="cover" mode="aspectFill" />
                </view>
                <view class="desc">
                    <view class="name">
                        <text>{{ name }}</text>
                    </view>
                    <view class="type" :style="{ color: models.worker.getWorkerTypeTextColor(type) }">
                        <text>{{ models.worker.getWorkerTypeText(type) }}</text>
                    </view>
                </view>
            </view>
            <view class="service-info">
                <view class="section">
                    服务：<text class="num">{{ times }}</text>
                    <text class="unit">次</text>
                </view>
                <view class="section">
                    好评率：<text class="num">{{ favorable_rate }}</text>
                    <text class="unit">%</text>
                </view>
                <view class="section">
                    评分：<text class="num">{{ grade }}</text>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "worker-detail",
    data() {
        return {
            models: this.$models,
            id: 1,
            name: "张师傅",
            type: 2,
            cover: require("@/static/temp/order/1.png"),
            times: 687,
            favorable_rate: 99.8,
            grade: 4.5,
        };
    },
    components: {
        AppLayout,
    },
    onLoad(e) {
        this.id = e.id;
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.worker-header {
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
    background-color: #ffffff;
}
.worker-base {
    width: 100%;
    display: flex;
    .head {
        line-height: 0;
        margin-right: 28rpx;
        .cover {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .desc {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        line-height: 28rpx;
        .name {
            font-size: 28rpx;
            color: #010101;
        }
        .type {
            display: inline-block;
            font-size: 24rpx;
            font-weight: bold;
        }
    }
}
.service-info {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20rpx;
    margin-top: 50rpx;
    .section {
        font-size: 30rpx;
        color: #999999;
    }
    .num {
        font-size: 36rpx;
        color: #8b9aeb;
    }
    .unit {
        font-size: 36rpx;
        color: #999999;
    }
}
</style>