<template>
    <div class="d-flex jc-center title_wrap">
        <div class="zuojuxing"></div>
        <div class="youjuxing"></div>
        <div class="guang"></div>
        <div class="d-flex jc-center">
            <div class="title">
                <span class="title-text">{{ currentOrg.name }}可视化大屏</span>
                <IconifyIconOffline
                    :style="{ transform: `rotate(${ratation}deg)` }"
                    class="select-icon"
                    width="30px"
                    height="30px"
                    :icon="CaretRight"
                    @click="toggleShowSelectOrg"
                />
                <ul :class="['select-ul', { fade: isShow }]">
                    <li
                        v-for="item in orgList"
                        :key="item.id"
                        :class="{ selected: item.id === currentOrg.id }"
                        @click="toggleSelectOrg(item)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="timers">
            <span> {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}</span>
            <LaySidebarFullScreen id="full-screen" />
        </div>
    </div>
</template>

<script setup lang="jsx">
import { ref, reactive, inject, computed } from 'vue';
import dayjs from 'dayjs';
import LaySidebarFullScreen from '@/layout/components/lay-sidebar/components/SidebarFullScreen.vue';
import CaretRight from '@iconify-icons/ep/caret-right';

const props = defineProps({
    orgList: {
        type: Array,
        default: () => [],
    },
});
const currentOrg = inject('currentOrg');
const emits = defineEmits(['changeOrg']);
const isShow = ref(false);
const toggleShowSelectOrg = () => {
    isShow.value = !isShow.value;
};
const toggleSelectOrg = (item) => {
    isShow.value = false;
    emits('changeOrg', item);
};
const ratation = computed(() => (isShow.value ? 90 : 0));

const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const dateData = reactive({
    dateDay: '',
    dateYear: '',
    dateWeek: '',
    timing: null,
});
const timeFn = () => {
    dateData.timing = setInterval(() => {
        dateData.dateDay = dayjs().format('YYYY-MM-DD HH:mm:ss');
        dateData.dateWeek = weekday[dayjs().day()];
    }, 1000);
};
timeFn();
</script>

<style scoped lang="scss">
.title_wrap {
    height: 60px;
    background-image: url('../img/headers/top.png');
    background-size: cover;
    background-position: center center;
    position: relative;
    margin-bottom: 4px;

    .guang {
        position: absolute;
        bottom: -26px;
        background-image: url('../img/headers/guang.png');
        background-position: 80px center;
        width: 100%;
        height: 56px;
    }

    .zuojuxing,
    .youjuxing {
        position: absolute;
        top: -2px;
        width: 140px;
        height: 6px;
        background-image: url('../img/headers/juxing1.png');
    }

    .zuojuxing {
        left: 11%;
    }

    .youjuxing {
        right: 11%;
        transform: rotate(180deg);
    }

    .timers {
        position: absolute;
        right: 0;
        top: 30px;
        font-size: 18px;
        display: flex;
        align-items: center;
        color: #fff;

        & > span:first-child {
            line-height: 1;
            padding-right: 10px;
        }

        .fullscreen-icon {
            cursor: pointer;
            background: transparent;
        }
    }
}
.title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 60px;
    line-height: 46px;

    .title-text {
        font-size: 38px;
        font-weight: 900;
        letter-spacing: 6px;
        width: 100%;
        background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .select-icon {
        cursor: pointer;
        display: inline-block;
        color: #0072ff;
        vertical-align: text-bottom;
        transition: transform 0.3s ease;
    }

    .select-ul {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        color: #f1f1f1;
        background: rgb(48, 49, 51);
        border-radius: 10px;
        width: 150px;
        z-index: 999;
        left: 50%;
        margin-left: 150px;
        transition: all 0.3s ease;
        padding: 5px 0;

        li {
            cursor: pointer;
            height: 40px;
            line-height: 40px;
        }

        li:hover {
            background: rgb(104, 104, 105);
        }
        li.selected {
            background: rgb(104, 104, 105);
        }
    }

    .select-ul.fade {
        max-height: 500px;
        opacity: 1;
    }
}
</style>
