import { css } from "@linaria/core";
import { defineComponent } from "vue";
import { FooterMenuConfig } from "./MenuConfig";
import { RouterLink } from "vue-router";
export default defineComponent(() => {
  return () => (
    <div class={FooterLayout}>
      <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"}>
            {FooterMenuConfig.map((e: LayoutMenu) => {
              const links =
                e.children &&
                e.children.length > 0 &&
                e.children.map((item: LayoutMenu) => {
                  return <RouterLink to={item.url}>{item.title}</RouterLink>;
                });
              return (
                <div class={"menu_item"}>
                  <div class={"links_title"}>{e.title}</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`
  .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 100px 0;
        display: grid;
        gap: 100px;
        grid-template-columns: repeat(4, 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);
  }
`;
