<template>
    <view class="layout">
        <view
            v-bind="$attrs"
            v-for="(item, index) in props.list"
            :key="item.value"
            @click="onChange(item)"
            class="btn"
            :style="[elemtComputed(index, item), borderRadiusComputed(index)]"
        >
            {{ item.label }}
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect } from "vue";

interface Border {
    isShow: boolean;
    size: string;
    style: string;
    radius: string;
}
const props = withDefaults(
    defineProps<{
        outline?: boolean; //轮廓显示
        shape?: "round" | "space" | "default"; //圆形、方形、椭圆(默认)
        borderOption?: Border;
        defaultValue?: string | number;
        list: any[];
        activeColor?: string; // 选中颜色
        activeBgColor?: string; // 背景色及边框颜色
        inactiveColor?: string; // 未选中颜色
        inactiveBgColor?: string; // 未选中背景颜色
    }>(),
    {
        outline: false,
        shape: "default",
        borderOption: () => {
            return {
                isShow: true,
                size: "1rpx",
                style: "solid",
                radius: "70rpx",
            };
        },

        defaultValue: 1,
        activeBgColor: "#3370FF",
        inactiveColor: "#666",
        inactiveBgColor: "#FFF",
        list: () => [
            {
                label: "按钮1",
                value: 1,
            },
            {
                label: "按钮2",
                value: 2,
            },
        ],
    }
);

const borderParams = ref({
    isShow: true,
    size: "1rpx",
    style: "solid",
    radius: "70rpx",
});

const $emit = defineEmits<{
    (e: "change", ev: any): void;
}>();
const state = reactive({
    selectedValue: props.defaultValue,
});

watch(
    () => props.defaultValue,
    (value) => {
        state.selectedValue = value;
    },
    { immediate: true }
);
watch(
    () => props.borderOption,
    (value) => {
        borderParams.value = Object.assign(
            borderParams.value,
            props.borderOption
        );
    },
    { immediate: true }
);

const borderRadiusComputed = computed(() => (index: number) => {
    if (props.shape === "space") return "";
    if (props.shape === "round") {
        if (borderParams.value.isShow) {
            return {
                borderRadius: borderParams.value.radius,
            };
        } else {
            return {
                borderRadius: "70rpx",
            };
        }
    }
    // 只有一个按钮
    if (props.list.length === 1) {
        return { borderRadius: `${borderParams.value.radius}` };
    } else if (index === 0) {
        return {
            borderRadius: `${borderParams.value.radius} 0rpx 0rpx ${borderParams.value.radius}`,
        };
    }
    if (index === props.list.length - 1) {
        return {
            borderRadius: `0rpx ${borderParams.value.radius} ${borderParams.value.radius} 0rpx`,
        };
    }
});

const elemtComputed = computed(() => (index: number, item: any) => {
    let styleObj: any = {};
    if (borderParams.value.isShow && props.shape !== "round") {
        if (index === 0) {
            styleObj.border = `${borderParams.value.size} ${borderParams.value.style} ${props.activeBgColor}`;
        } else {
            styleObj.borderRight = `${borderParams.value.size} ${borderParams.value.style} ${props.activeBgColor}`;
            styleObj.borderTop = `${borderParams.value.size} ${borderParams.value.style} ${props.activeBgColor}`;
            styleObj.borderBottom = `${borderParams.value.size} ${borderParams.value.style} ${props.activeBgColor}`;
        }
    }
    if (item.disabled) {
        styleObj.color = "#999";
    }
    //   激活文字颜色
    if (state.selectedValue === item.value) {
        if (props.outline) {
            styleObj.color = props.activeColor ?? "#3370FF";
        } else {
            styleObj.color = props.activeColor ?? "#fff";
            styleObj.background = props.activeBgColor;
        }
    } else {
        // 非激活
        styleObj.color = props.inactiveColor;
        styleObj.background = props.inactiveBgColor;
    }
    return styleObj;
});
const onChange = (data: any) => {
    if (data.disabled) {
        return;
    }
    state.selectedValue = data.value;
    $emit("change", data);
};
</script>

<style lang="scss" scoped>
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout {
    display: flex;
    align-items: center;
    .btn {
        width: 100%;
        text-align: center;
        padding: 14rpx 26rpx;
    }
}
</style>
