<template>
    <app-layout title="师傅详情">
        <view class="worker-header">
            <view class="worker-base">
                <view class="head">
                    <image class="cover" :src="info.worker.avatar" mode="aspectFill" />
                </view>
                <view class="desc">
                    <view class="name">
                        <text>{{ info.worker.name }}</text>
                    </view>
                    <view class="type" :style="{ color: typeTextColor }">
                        <text>{{ typeText }}</text>
                    </view>
                    <view class="contact" @click="utils.callPhone(info.worker.mobile)">
                        <text class="mobile">TEL：{{ info.worker.mobile }}</text>
                    </view>
                </view>
            </view>
            <view class="service-info">
                <view class="section">
                    服务：<text class="num">{{ info.times }}</text>
                    <text class="unit">次</text>
                </view>
                <view class="section">
                    好评率：<text class="num">{{ info.favorableRate }}</text>
                    <text class="unit">%</text>
                </view>
                <view class="section">
                    评分：<text class="num">{{ info.grade }}</text>
                </view>
            </view>
        </view>
        <view class="appraise-body">
            <app-appraise-section
                :total="appraise.total"
                :tags="appraise.tags"
                :cate="appraise.cate"
                @changeCate="changeAppraiseCate"
            />
            <view class="loadmore-box">
                <app-load-more :hasMore="currentAppraiseCate.more" @loadmore="loadAppraiseData" />
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppAppraiseSection from "@/components/appraise/section";
import AppLoadMore from "@/components/widgets/loadmore";
export default {
    name: "worker-detail",
    data() {
        return {
            utils: this.$utils,
            models: this.$models,
            typeText: "",
            typeTextColor: "",
            info: {
                times: 0,
                favorableRate: 0,
                grade: 0,
                worker: {
                    uid: 0,
                    id: 0,
                    name: "",
                    type: 0,
                    avatar: "",
                    mobile: "",
                },
            },
            currentAppraiseCate: {},
            appraise: {
                total: 0,
                tags: [],
                cate: [],
            },
        };
    },
    components: {
        AppLayout,
        AppAppraiseSection,
        AppLoadMore,
    },
    async onLoad(e) {
        if (!e.id) {
            return this.$utils.tosat("参数错误").then(() => {
                this.$utils.toPage("", "", "back");
            });
        }
        await this.$models.worker.workerDetail(e.id).then((data) => {
            this.info = data;
            let [typeText, typeTextColor] = this.$models.worker.workerTypeText(data.worker.type);
            this.typeText = typeText;
            this.typeTextColor = typeTextColor;
        });
        // 评价
        await this.$models.appraise.count.worker(this.id).then((data) => {
            data.tags.forEach((item) => {
                this.appraise.tags.push({
                    count: item.count,
                    name: item.name,
                });
            });
            data.cate.forEach((item) => {
                this.appraise.cate.push({
                    name: item.name,
                    count: item.count,
                    status: item.status,
                    page: 1,
                    more: true,
                    list: [],
                });
            });
            this.appraise.total = this.appraise.cate[0].count;
            this.changeAppraiseCate(this.appraise.cate[0], 0);
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {
        this.loadAppraiseData();
    },
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 切换评价分类
         */
        changeAppraiseCate(currentAppraiseCate, index) {
            currentAppraiseCate.more = true;
            currentAppraiseCate.page = 1;
            this.currentAppraiseCate = currentAppraiseCate;
            this.loadAppraiseData();
        },
        /**
         * 加载评价数据
         */
        loadAppraiseData() {
            if (!this.currentAppraiseCate.more) return;
            this.$models.appraise.list
                .worker({
                    id: this.id,
                    status: this.currentAppraiseCate.status,
                    page: this.currentAppraiseCate.page,
                })
                .then((list) => {
                    if (list.length > 0) {
                        if (this.currentAppraiseCate.page == 1) {
                            this.currentAppraiseCate.list = list;
                        } else {
                            this.currentAppraiseCate.list = this.currentAppraiseCate.list.concat(list);
                        }
                        this.currentAppraiseCate.page++;
                    } else {
                        this.currentAppraiseCate.more = false;
                    }
                });
        },
    },
};
</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 {
        flex-shrink: 0;
        line-height: 0;
        margin-right: 28rpx;
        .cover {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .desc {
        position: relative;
        width: 100%;
        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;
        }
        .contact {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #8b9aed;
        }
    }
}
.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;
    }
}
.appraise-body {
    width: 100%;
    .loadmore-box {
        padding: 40rpx 0;
    }
}
</style>