<template>
    <view class="page-container">
        <view class="servant-top">
            <image src="/static/images/new/icon-jzsh.png"></image>
            <text>鲸品家政师</text>
        </view>
        <view class="servant-basic">
            <view class="basic-left">
                <image :src="resumeInfo.headImage" class="servant-avatar" mode="aspectFill"></image>
                <image src="/static/images/new/icon-chapter.png" class="jz-chapter" mode="aspectFill"></image>
            </view>
            <view class="basic-right">
                <view class="servant-name">{{ resumeInfo.serverName }}</view>
                <view class="age-zodiac">
                    <text class="servant-age">{{ resumeInfo.age }}岁</text>
                    <text>{{ resumeInfo.zodiac }}</text>
                </view>
                <text class="servant-model" v-for="(item, index) in servicePatternList" :key="index">{{ item }}</text>
            </view>
        </view>
        <view class="servant-info">
            <view class="block-title">
                <image src="/static/images/new/icon-basic.png" class="title-img" mode="aspectFit"></image>
                <text>基本信息</text>
            </view>
            <view class="info-detail">
                <view class="detail-item">
                    <text>籍贯：{{ resumeInfo.nativePlace }}</text>
                    <text>民族：{{ resumeInfo.nation }}</text>
                    <text>学历：{{ resumeInfo.education }}</text>
                </view>
                <view class="detail-item">
                    <text>身高：{{ resumeInfo.height }}</text>
                    <text>体重：{{ resumeInfo.weight }}</text>
                    <text>宗教信仰：{{ resumeInfo.religion }}</text>
                </view>
                <view class="detail-item">擅长：{{ resumeInfo.skillNames }}</view>
            </view>
        </view>
        <!-- 培训体系 -->
        <view class="servant-train">
            <view class="block-title">
                <image src="/static/images/new/icon-train.png" class="title-img" mode="aspectFit"></image>
                <text>培训体系</text>
            </view>
            <image src="/static/images/new/train-list.png" class="train-list" mode="widthFix"></image>
            <view class="comment-title">培训中心院长评语：</view>
            <view class="comment-content sub-color">{{ resumeInfo.comments }}</view>
        </view>
        <view class="servant-skill">
            <view class="block-title">
                <image src="/static/images/new/icon-skill.png" class="title-img" mode="aspectFit"></image>
                <text>技能证书</text>
            </view>
            <view class="skill-text">{{ resumeInfo.certificateName }}</view>
        </view>
        <!-- 技能展示 -->
        <view class="skill-show">
            <view class="block-title">
                <image src="/static/images/new/icon-show.png" class="title-img" mode="aspectFit"></image>
                <text>技能展示</text>
            </view>
            <view class="skill-swiper-wrapper">
                <scroll-view class="sroll-block" :scroll-x="true" scroll-left="102" @scroll="scroll" style="width: 666rpx">
                    <image class="scroll-img" :src="item" mode="aspectFill" v-for="(item, index) in skillList" :key="index"></image>
                </scroll-view>
            </view>

            <!-- 指示器 -->
            <view class="indicator-wrapper">
                <view :class="'indicator-dot ' + (index == activeDot ? 'activeDot' : '')" v-for="(item, index) in skillList" :key="index"></view>
            </view>
        </view>

        <!-- 联系管家 -->
        <view class="operate-btn">
            <view class="contract-wrapper">
                <button style="opacity: 0; width: 322rpx; height: 70rpx; position: absolute; left: 34rpx; top: 0rpx; z-index: 999" open-type="contact"></button>
                <view class="contract-btn">联系管家</view>
            </view>
            <view class="appoint-btn" @tap="goAppoint">立即预约</view>
        </view>
    </view>
</template>
<script module="formatFuc" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
const app = getApp();
export default {
    data() {
        return {
            resumeInfo: {
                headImage: '',
                serverName: '',
                age: '',
                zodiac: '',
                nativePlace: '',
                nation: '',
                education: '',
                height: '',
                weight: '',
                religion: '',
                skillNames: '',
                comments: '',
                certificateName: ''
            },

            activeDot: 1,
            skillList: [],
            servicePatternList: [],
            workerNo: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let workerNo = options.workerNo;
        this.setData({
            workerNo: workerNo
        });
        this.servantResume(workerNo);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        servantResume: function () {
            util.request(
                api.servantResume,
                {
                    workerNo: this.workerNo
                },
                'GET'
            ).then((res) => {
                console.info(res);
                if (res.errno === 0) {
                    this.setData({
                        resumeInfo: res.data,
                        skillList: res.data.skillImg == '' ? [] : res.data.skillImg.split(','),
                        servicePatternList: res.data.servicePatternName == '' ? [] : res.data.servicePatternName.split(',')
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        scroll(e) {
            console.log(e);
            let srollLeft = e.detail.scrollLeft;
            let index = parseInt((srollLeft + 144) / 180);
            this.setData({
                activeDot: index
            });
        },

        goAppoint() {
            uni.navigateTo({
                url: '/pages/goods/infoCollect/infoCollect'
            });
        }
    }
};
</script>
<style>
.page-container {
    padding: 0 0 180rpx;
}
.servant-top {
    width: 750rpx;
    height: 174rpx;
    background: linear-gradient(181deg, #f1e3c8, #e6c162);
    display: flex;
    align-items: flex-end;
    padding: 0 0 60rpx;
    justify-content: center;
}
.servant-top image {
    width: 122rpx;
    height: 66rpx;
    margin: 0 32rpx 0 0;
}
.servant-top text {
    color: #663315;
    font-size: 50rpx;
    font-weight: bold;
    line-height: 52rpx;
}
.servant-basic {
    height: 390rpx;
    padding: 20rpx 28rpx 0;
    display: flex;
}
.basic-left {
    width: 318rpx;
    height: 370rpx;
    position: relative;
}
.servant-avatar {
    width: 256rpx;
    height: 340rpx;
    background: #d3d3d3;
}
.jz-chapter {
    width: 138rpx;
    height: 142rpx;
    position: absolute;
    right: 0;
    bottom: 0;
}
.basic-right {
    padding: 90rpx 12rpx 0;
    flex: 1;
    /* display: flex;
	flex-direction: column; */
}
.servant-name {
    font-weight: bold;
    font-size: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
}
.age-zodiac {
    font-size: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    margin: 12rpx 0 30rpx;
    display: flex;
    align-items: center;
}
.servant-age {
    margin: 0 24rpx 0 0;
    padding: 0 24rpx 0 0;
    border-right: 1rpx solid #2a2a2a;
}
.servant-model {
    height: 38rpx;
    line-height: 38rpx;
    background: linear-gradient(180deg, #f1e3c8, #e6c162);
    border-radius: 4rpx;
    padding: 0 28rpx;
    text-align: center;
    color: #663315;
    font-size: 24rpx;
    margin: 0 20rpx 12rpx 0;
    white-space: nowrap;
    display: inline-block;
}
.block-title {
    height: 38rpx;
    display: flex;
    align-items: center;
}
.title-img {
    margin: 0 10rpx 0 0;
    width: 40rpx;
    height: 38rpx;
}
.block-title text {
    font-size: 34rpx;
    font-weight: bold;
}
.servant-info {
    padding: 0 42rpx;
}
.servant-train {
    padding: 0 42rpx;
    margin: 48rpx 0 44rpx 0;
}
.train-list {
    width: 666rpx;
    margin: 24rpx 0 34rpx 0;
}
.info-detail {
    padding: 20rpx 0 0;
}
.detail-item {
    /* height: 40rpx; */
    line-height: 40rpx;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
}
.detail-item text {
    flex: 1;
    font-size: 24rpx;
}
.detail-item text:first-child {
    flex: 1.2;
}
.comment-title {
    font-size: 24rpx;
    font-weight: bold;
    margin: 0 0 10rpx 0;
}
.comment-content {
    font-size: 20rpx;
    line-height: 38rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}
.servant-skill {
    padding: 0 42rpx;
}
.skill-show {
    padding: 0 42rpx;
}
.skill-text {
    margin: 20rpx 0 40rpx;
    line-height: 38rpx;
    font-size: 24rpx;
}

.operate-btn {
    background: #f4f4f4;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: 130rpx;
    padding: 0 34rpx 60rpx;
    display: flex;
    justify-content: space-between;
}
.contract-btn,
.appoint-btn {
    width: 322rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background: #55aef8;
    border-radius: 70rpx;
    font-size: 32rpx;
    color: #fff;
}
.appoint-btn {
    background: linear-gradient(180deg, #f1e3c8, #e6c162);
    color: #663315;
}
.skill-swiper-wrapper {
    height: 480rpx;
    margin: 36rpx 0 60rpx;
    border-radius: 12rpx;
    overflow: hidden;
    width: 666rpx;
}
.sroll-block {
    height: 480rpx;
    white-space: nowrap;
    width: 666rpx;
}
.scroll-img {
    width: 360rpx;
    height: 480rpx;
    display: inline-block;
    margin-right: 12rpx;
}
.indicator-wrapper {
    display: flex;
    justify-content: center;
}
.indicator-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 12rpx;
    border: 1rpx solid #09afff;
    margin: 0 14rpx 0 0;
}
.activeDot {
    background: #09afff;
}
</style>
