<template>
    <div class="choose-view">
        <HomeView v-model:value="currentView" />
        <div class="btn">
            <j-button type="primary" @click="confirm">保存修改</j-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getMe_api, getView_api, setView_api } from '@/api/home';
import { onlyMessage } from '@/utils/comm';
import HomeView from '@/components/HomeView/index.vue';

const currentView = ref<string>('');
const isApiUser = ref<boolean>();

function getViews() {
    // 判断是否是api用户 不是则获取选中的视图
    getMe_api()
        .then((resp: any) => {
            if (resp && resp.status === 200) {
                isApiUser.value = resp.result.dimensions.find(
                    (item: any) =>
                        item.type === 'api-client' ||
                        item.type.id === 'api-client',
                );
                if (!isApiUser.value) return getView_api();
            }
        })
        .then((resp: any) => {
            if (resp?.status === 200) {
                if (resp.result) {
                    currentView.value = resp.result?.content;
                } else if (resp.result?.username === 'admin') {
                    currentView.value = 'comprehensive';
                } else {
                    currentView.value = 'device';
                }
            }
        });
}

const confirm = () => {
    setView_api({
        name: 'view',
        content: currentView.value,
    }).then(() => onlyMessage('保存成功', 'success'));
};

onMounted(() => {
    getViews();
});
</script>

<style lang="less" scoped>
.choose-view {
    width: 100%;
    padding: 4% 9% 0 9%;
    box-sizing: border-box;

    .btn {
        display: flex;
        justify-content: flex-end;
        margin-top: 68px;

        button {
            background-color: @primary-2;
            color: @primary-color-hover;
        }
    }
}
</style>