import { useCategory } from "@/modules";
import { css } from "@linaria/core";
import { Space } from "ant-design-vue";
import { defineComponent } from "vue";

import { RouterLink } from "vue-router";

export default defineComponent(() => {
  const storeCategory = useCategory();
  return () => {
    const mainCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
      return e.isHome == true;
    });
    return (
      <div class={FooterLayout}>
        <div class={"footer_fix_link"}>
          <Space direction="vertical" size={24}>
            <a
              class={"xihua_link"}
              href="http://www.xhu.edu.cn/"
              target="_blank"
            >
              西华主页
            </a>
            <RouterLink class={"index_link"} to={"/"}>
              学院主页
            </RouterLink>
          </Space>
        </div>
        <div class={"lay_footer"}>
          <div class={"global_w footer_menu"}>
            <div class={"logo"}>
              <div class={"footer_logo"}>
                <img src={getImageUrl("logo_footer.png")} />
              </div>
              <div class={"footer_tips"}>
                <img src={getImageUrl("footer_tips.png")} />
              </div>
              <div class={"contact_view"}>
                <p class={"title"}>关注我们</p>
                <p>电话 : 028-87723068</p>
                <p>传真 : 028-87723068</p>
                <p>中国四川省出都市西华大学艺术大楼</p>
                <p class={"qrcode"}>
                  <img src={getImageUrl("footer_qrcode.png")} />
                </p>
              </div>
            </div>
            <div class={"menus"}>
              {mainCate.map((e: CategoryItem) => {
                const links =
                  e.children &&
                  e.children.length > 0 &&
                  e.children.map((item: CategoryItem) => {
                    return (
                      <RouterLink to={`/detail/${item._id}`}>
                        {item.name}
                      </RouterLink>
                    );
                  });
                return (
                  <div class={"menu_item"}>
                    <div class={"links_title"}>{e.name}</div>
                    <div class={"links"}>{links}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <div class={"copyright"}>
          版权所有 2007-2023 西华大学美术与艺术学院 Copyright © 2007-2023 CAFA.
          All Rights Reserved.
        </div>
      </div>
    );
  };
});
const FooterLayout = css`
  .footer_fix_link {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 9;
    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      writing-mode: vertical-lr;
      width: 40px;
      height: 105px;
    }
    .xihua_link {
      background: url("@/assets/bg_links_1.png") no-repeat center/100%;
    }
    .index_link {
      background: url("@/assets/bg_links_2.png") no-repeat center/100%;
    }
  }
  .lay_footer {
    background-color: #454847;
    .footer_menu {
      padding: 100px 140px;
      display: flex;
      .logo {
        padding-right: 75px;
        border-right: 1px solid rgba(112, 112, 112, 0.5);
        .footer_logo {
          img {
            height: 65px;
            object-fit: contain;
          }
        }
        .footer_tips {
          margin-top: 88px;
          img {
            height: 38px;
            object-fit: contain;
          }
        }
        .contact_view {
          margin-top: 90px;
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          p {
            margin-top: 18px;
          }
          .title {
            font-size: 18px;
            margin-top: 0;
          }
          .qrcode {
            margin-top: 35px;
            img {
              height: 120px;
              object-fit: contain;
            }
          }
        }
      }
      .menus {
        flex: 1;
        padding: 30px 0 0 75px;
        display: grid;
        gap: 40px;
        grid-template-columns: repeat(5, 1fr);
        .links_title {
          font-size: 18px;
          color: rgba(255, 255, 255, 1);
        }
        .links {
          a {
            margin-top: 18px;
            display: block;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            &:hover {
              color: rgba(255, 255, 255, 1);
            }
            &:first-child {
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
  .copyright {
    padding: 28px 0;
    font-size: 12px;
    text-align: center;
    background-color: #242424;
    color: rgba(255, 255, 255, 0.6);
  }
`;
