<template>
    <div style="width: 300px">
        <template v-if="getType === 'notifier-dingTalk'">
            <div class="tip"><j-ellipsis :lineClamp="2">绑定账号：{{ info }}</j-ellipsis></div>
        </template>
        <template v-else-if="getType === 'notifier-weixin'">
            <div class="tip"><j-ellipsis :lineClamp="2">绑定账号：{{ info }}</j-ellipsis></div>
        </template>
        <template v-else-if="getType === 'notifier-email'">
            <div class="tip"><j-ellipsis :lineClamp="2">绑定账号：{{ user.userInfos?.email }}</j-ellipsis></div>
        </template>
        <template v-else>
            <div class="tip"><j-ellipsis :lineClamp="2">绑定账号：{{ user.userInfos?.telephone }}</j-ellipsis></div>
        </template>
        <div class="btn">
            <j-button @click="emit('unsubscribe', current)">取消订阅</j-button>
            <j-button
                @click="onBind"
                type="primary"
                >更换绑定账号</j-button
            >
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getIsBindThird } from '@/api/account/notificationSubscription';
import { useUserInfo } from '@/store/userInfo';

const user = useUserInfo();
const emit = defineEmits(['infoChange', 'unsubscribe', 'bindChange']);
const info = ref<any>(null);
const props = defineProps({
    data: {
        // 外层数据
        type: Object,
        default: () => {},
    },
    current: {
        // 当前的通道
        type: Object,
        default: () => {},
    },
});

const getType = computed(() => {
    return props.current?.channelProvider;
});

const onBind = () => {
    if (
        !['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
            props.current?.channelProvider,
        )
    ) {
        emit('infoChange')
    } else {
        emit('bindChange')
    }
    
};

const handleSearch = async () => {
    if (
        !['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
            props.current?.channelProvider,
        )
    ) {
        const resp: any = await getIsBindThird();
        const _item = (resp?.result || []).find((item: any) => {
            return (
                props.current?.channelConfiguration?.notifierId ===
                item?.provider
            );
        });
        if (_item) {
            info.value = _item?.providerName || _item?.thirdPartyUserId
        }
    }
};

onMounted(() => {
    handleSearch()
})

</script>

<style lang="less" scoped>
.tip {
    width: 100%;
    margin: 20px 0;
}

.btn {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
</style>