<!-- -->
<template>
  <div
    :class="{
      footer: true,
    }"
  >
    <div class="logo">
      <img src="~@/assets/imgs/display/logo3.png" alt="" />
    </div>
    <div class="menu">
      <div class="menu-item">
        <el-popover placement="top-start" width="280" trigger="hover">
          <span slot="reference">网站地图</span>
          <div class="map">
            <div class="map-item" v-for="(item, index) in mapData" :key="index">
              <div class="title">
                {{ item.title }}
              </div>
              <ul v-if="item.children && item.children.length > 0">
                <li v-for="(v, i) in item.children" :key="i">
                  {{ v.title }}
                </li>
              </ul>
            </div>
          </div>
        </el-popover>
      </div>
      <!-- <div class="menu-item">关于我们</div> -->

      <div class="menu-item">
        <span>
          <el-popover placement="top-start" width="280" trigger="hover">
            <span slot="reference">小程序</span>
            <div class="wechat-app">
              <img src="~@/assets/imgs/wechat-app.jpg" alt="" />
            </div>
          </el-popover>
        </span>
      </div>
    </div>
    <div class="copyright">
      <a href="https://beian.miit.gov.cn" target="_blank">
        黔ICP备2022009785号-1 &nbsp; &nbsp;</a
      >
      |&nbsp; &nbsp; ©2022-现在 贵州省文化和旅游厅
    </div>
    <div class="support">网站建设：贵州同方知网科技发展有限公司</div>
    <div class="advice">
      <el-tooltip
        placement="top-start"
        content="谷歌 火狐 最佳分辨率（1920 x 1080）"
      >
        <span>浏览建议</span>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Footer",
  data() {
    return {
      isHome: true,
      mapData: [
        {
          title: "首页",
          path: "/",
          children: [],
        },
        {
          title: "展览",
          path: "",
          children: [
            {
              title: "展览展示",
              path: "/display",
            },
          ],
        },
        {
          title: "文物",
          path: "",
          children: [
            {
              title: "文物展示",
              path: "/culturalRelic",
            },
          ],
        },
        {
          title: "博物馆",
          path: "",
          children: [
            {
              title: "博物馆",
              path: "/museum",
            },
          ],
        },
        {
          title: "服务",
          path: "",
          children: [
            {
              title: "文创产品",
              path: "/ccProduct",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.isHome {
  background-color: #2069c4 !important;
}

.footer {
  display: flex;
  // height: 200px;
  padding: 30px 0;
  justify-content: center;
  align-items: center;
  background-color: $deepBlue;
  flex-direction: column;
  color: #fefefe;
  font-size: 14px;
  position: relative;

  .logo {
    width: 60px;
    height: 60px;
    margin-bottom: 40px;

    img {
      width: 100%;
    }
  }

  .menu {
    display: flex;

    .menu-item {
      margin-right: 20px;
      cursor: pointer;
    }
  }

  .copyright,
  .support,
  .menu {
    margin-bottom: 16px;
  }

  .advice {
    border: 1px solid #fff;
    padding: 6px 10px;
    margin-top: 20px;
    cursor: pointer;
  }

  .copyright {
    & > a {
      text-decoration: none;
      color: #fff;
    }
  }
}

.map {
  .map-item {
    margin-bottom: 20px;

    &:first-child {
      .title {
        cursor: pointer;
      }
    }

    .title {
      font-weight: bold;
    }

    ul {
      display: flex;

      li {
        margin: 0 20px 10px 0;
        cursor: pointer;
      }
    }
  }
}

.wechat-app {
  width: 258px;
  height: 258px;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
