<template>
    <div class="mb-5">
        <div class="rating mx-auto flow-root">
            <div class="flex items-center justify-center mt-5">
                <div class="line"></div>
                <div class="title mx-2.5">评价服务</div>
                <div class="line"></div>
            </div>
            <div class="flex items-center justify-center mt-5">
                <div
                    v-for="item in props.list"
                    :key="item.icon"
                    class="flex flex-col items-center w-20"
                    @click="!selected && setSelectedRate && setSelectedRate(item.name)"
                >
                    <icon
                        size="22"
                        :name="item.icon"
                        :color="item.name === selected ? selectedColor : unselectedColor"
                    />
                    <div class="mt-3 name">{{ item.name }}</div>
                </div>
            </div>
        </div>
        <div class="title mt-5 text-center" v-if="selected">感谢您的评价</div>
    </div>
</template>

<script lang="ts" setup>
import Icon from "@/components/common/Icon.vue"
import { defineProps, PropType } from "vue"

const props = defineProps({
    selected: String,
    setSelectedRate: Function,
    selectedColor: {
        type: String,
        default: '#3E4FAF',
    },
    unselectedColor: {
        type: String,
        default: '#8D92AF'
    },
    list: {
        type: Array as PropType<{ icon: string, name: string }[]>,
        default() {
            return [
                {
                    icon: 'icon-manyi',
                    name: '满意',
                },
                {
                    icon: 'icon-bumanyi',
                    name: '不满意',
                }
            ]
        }
    }
})
</script>
<style lang="less" scoped>
.title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}
.rating {
    width: 335px;
    height: 140px;
    background: #ffffff;
    .line {
        width: 105px;
        height: 1px;
        border: 1px solid #f5f6f9;
    }

    .name {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
    }
}
</style>