<template>
  <el-footer :class="prefixCls">
    <div :class="`${prefixCls}__links`">
      <nuxt-link :to="item.link" :key="index" v-for="(item, index) in menuList">{{
          item.title
        }}
      </nuxt-link>
    </div>
    <div :class="`${prefixCls}__copyright`"
    >{{ store.$state.otherConfig?.icp_record }}
    </div
    >
  </el-footer>
</template>

<script lang="ts" setup>
const menuList = ref([]);
const {prefixCls} = useDesign('layout-footer');
const {commonApi} = useApi();
const store = useAppStore()
async function getData() {

  const menus = await commonApi.getBottomMenu()
  const config = await commonApi.getIndexConfig()
  menuList.value = menus.data
  store.setConfig(config.data)
}
getData()
</script>
<style lang="scss" scoped>
$prefix-cls: '#{$name-prefix}-layout-footer';

$normal-color: #fff;

$hover-color: rgba(0, 0, 0, 0.85);

.#{$prefix-cls} {
  height: fit-content;
  padding: 40px 0 85px;
  background-color: #022950;
  color: $normal-color;
  text-align: center;

  &__links {
    margin-bottom: 50px;

    a {
      font-size: 20px;
      padding: 0 20px;
      color: $normal-color;
      border-right: 1px solid $white;

      &:hover {
        //color: @hover-color;
      }

      &:last-of-type {
        border: unset;
      }
    }
  }

  &__github {
    margin: 0 30px;

    &:hover {
      color: $hover-color;
    }
  }

  &__copyright {
    font-size: 16px;
  }
}
</style>
