<template>
    <div class='sysInfo' ref="sysInfo">
        <div :class="['info', v.type]" v-for="(v, k) in state.sysInfo" :key="k">
            <span>{{ t('sys') }}</span>
            <i class="time" v-if="v.time">({{ v.time }})</i>：
            <span class="msg">{{ v.msg }}</span>
            <div style="float: inline-end;" v-if="v.bouts">
                <Tooltip :show-icon="false" width="25rem" x="-50%">
                    <a class="bouts-link">{{ t('bouts.0') }}</a>
                    <template #tip>
                        <Bouts :bouts="v.bouts"></Bouts>
                    </template>
                </Tooltip>
            </div>
            <span v-if="v.equips" v-for="(o, p) in v.equips" :key="p">
                <a :style="{ color: o.quality.color }" @mouseleave="commit('close_equip_tip')"
                    @mouseover="commit('show_equip_tip', { equip: o, compare: true, e: $event })">
                    <span v-if="o.quality.quality == qualitys[4]">{{ t('uniqueBooty') }}：</span>
                    {{ t(o.type + '.' + o.base.name + '.0') }}
                </a>
            </span>
        </div>
    </div>



</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { watch, nextTick, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { qualitys } from "@/config";
import { Tooltip } from "@/components";
import Bouts from "./bouts.vue";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const sysInfo = ref();

watch(state.sysInfo, () => {
    nextTick(() => {
        const scrollElem = sysInfo.value;
        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
    })
});

onMounted(() => { });
</script>
<style lang="scss" scoped>
.sysInfo {
    overflow-y: auto;
    transition: 0.2s;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.info {
    margin: 0.03rem 0;
}

.time {
    font-size: 0.8rem;
}

a {
    cursor: pointer;
    text-decoration: underline;
    margin-left: 0.3rem;
}

.warning>.msg {
    color: #f90202;
}

.battle>.msg {
    color: #de8618;
}

.win>.msg {
    color: #24c4de;
}

.booty>.msg {
    color: #2fe20f;
}

.bouts-link {
    color: aqua;
    padding-left: 0.3rem;
}
</style>