<template>
    <app-layout title="评价师傅">
        <view class="order-id">
            <text class="title">订单编号：</text>
            <text class="value">{{ orderId }}</text>
        </view>
        <view class="grade">
            <text class="title">综合评分：</text>
            <uni-rate v-model="grade" :allowHalf="false" :size="utils.rpx2px(45)" />
        </view>
        <view class="content">
            <textarea
                class="textarea"
                v-model="content"
                maxlength="300"
                placeholder="输入描述您对师傅服务的感受"
                placeholder-class="placeholder-style-3"
            />
            <view class="tags-group">
                <view
                    class="tags-item"
                    v-for="(item, index) in tags"
                    :key="index"
                    @click="chooseTag(item)"
                    :class="{ active: chooseTags.includes(item) }"
                >
                    <text>{{ item }}</text>
                </view>
            </view>
        </view>
        <view class="images">
            <view class="common-form-container">
                <view class="upload-item">
                    <block v-for="(item, index) in images" :key="index">
                        <view class="image-box">
                            <image class="image" :src="item.src" mode="aspectFill" />
                        </view>
                    </block>
                    <view class="image-box upload" @click="chooseImage">
                        <text class="iconfont icon-shangchuantupian"></text>
                        <text class="text">上传图片</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="save">提交</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import UniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
export default {
    name: "worker-appraise",
    data() {
        return {
            utils: this.$utils,
            tags: ["技术专业", "礼貌热情", "认真负责", "快速完工", "按时上门"],
            orderId: "xxgfdkgn1223",
            grade: 0,
            content: "",
            chooseTags: [],
            images: [],

            state: false,
        };
    },
    components: {
        AppLayout,
        UniRate,
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        chooseTag(tag) {
            if (!this.chooseTags.includes(tag)) {
                this.chooseTags.push(tag);
            } else {
                this.chooseTags = this.chooseTags.filter((item) => item != tag);
            }
        },
        chooseImage() {
            uni.chooseImage({
                sizeType: ["compressed"],
                sourceType: ["album"],
                success(res) {
                    console.log(JSON.stringify(res.tempFilePaths));
                },
            });
        },
        save() {
            console.log("提交表单");
        },
    },
};
</script>

<style lang="less" scoped>
.order-id,
.content,
.grade,
.images {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    .title {
        font-size: 28rpx;
        color: #999999;
    }
}
.order-id {
    padding: 22rpx 40rpx;
    margin-bottom: 18rpx;
    .value {
        font-size: 28rpx;
        color: #000000;
    }
}
.grade {
    padding: 80rpx 40rpx;
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;
}
.content {
    width: 100%;
    padding: 40rpx;
    margin-bottom: 18rpx;
    .textarea {
        width: 100%;
        height: 170rpx;
        font-size: 26rpx;
        color: #000000;
    }
    .tags-group {
        width: 100%;
    }
    .tags-item {
        display: inline-block;
        padding: 10rpx 20rpx;
        background-color: #ffffff;
        border: 2rpx solid #999999;
        border-radius: 22rpx;
        font-size: 26rpx;
        color: #999999;
        line-height: 26rpx;
        margin-right: 24rpx;
        margin-top: 24rpx;
    }
    .tags-item:nth-child(4n) {
        margin-right: 0;
    }
    .tags-item.active {
        color: #8b9aeb;
        background-color: #e4e8fa;
        border: 2rpx solid #8b9aeb;
    }
}
.images {
    padding: 35rpx 40rpx;
    .common-form-container {
        margin-top: 0;
        .upload-item {
            padding: 0;
        }
    }
}
</style>