import { css } from "@linaria/core";

import { ArrowRightOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import { TabPane, Tabs } from "ant-design-vue";
import Image from "@/components/Image";
export default defineComponent({
  setup() {
    const tabs = [
      {
        title: "研究生教育",
        key: "1",
      },
      {
        title: "本科教育",
        key: "2",
      },
      {
        title: "国际交流",
        key: "3",
      },
    ];
    const state = reactive({
      activeKey: "1",
    });

    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div class={"global-w"}>
          <Tabs activeKey={state.activeKey} class={"talent_tab"}>
            {{
              renderTabBar: () => {
                return (
                  <div class={"ant-tabs-nav"}>
                    <div class={"home_lay_title"}>
                      人才培养<span>/</span>
                      <span>Talent Training</span>
                    </div>
                    <div class={"ant-tabs-nav-wrap justify-end"}>
                      <div class={"ant-tabs-nav-list"}>
                        {tabs.map((e) => {
                          return (
                            <div
                              class={`ant-tabs-tab ${
                                state.activeKey == e.key
                                  ? "ant-tabs-tab-active"
                                  : ""
                              }`}
                              key={e.key}
                            >
                              <div
                                class={"ant-tabs-tab-btn"}
                                onClick={() => {
                                  state.activeKey = e.key;
                                }}
                              >
                                {e.title}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                );
              },
              default: () => {
                return tabs.map((item) => {
                  return (
                    <TabPane tab={item.title} key={item.key}>
                      <div class={"tab_list"}>
                        <div class={"list_item"}>
                          <a>
                            <div>
                              <Image src={""} />
                            </div>
                            <div class={"info_box"}>
                              <div class={"item_tit"}>
                                美术与设计学院赴深圳市牧本工业设计有限公司走访交流
                              </div>
                              <div class={"item_desc"}>
                                4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
                              </div>
                              <div class={"item_date"}>2023.04.03</div>
                            </div>
                          </a>
                        </div>
                        <div class={"list_item"}>
                          <a>
                            <div>
                              <Image src={""} />
                            </div>
                            <div class={"info_box"}>
                              <div class={"item_tit"}>
                                美术与设计学院赴深圳市牧本工业设计有限公司走访交流
                              </div>
                              <div class={"item_desc"}>
                                4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
                              </div>
                              <div class={"item_date"}>2023.04.03</div>
                            </div>
                          </a>
                        </div>
                        <div class={"list_item"}>
                          <a>
                            <div>
                              <Image src={""} />
                            </div>
                            <div class={"info_box"}>
                              <div class={"item_tit"}>
                                美术与设计学院赴深圳市牧本工业设计有限公司走访交流
                              </div>
                              <div class={"item_desc"}>
                                4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
                              </div>
                              <div class={"item_date"}>2023.04.03</div>
                            </div>
                          </a>
                        </div>
                        <div class={"list_item"}>
                          <a>
                            <div>
                              <Image src={""} />
                            </div>
                            <div class={"info_box"}>
                              <div class={"item_tit"}>
                                美术与设计学院赴深圳市牧本工业设计有限公司走访交流
                              </div>
                              <div class={"item_desc"}>
                                4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
                              </div>
                              <div class={"item_date"}>2023.04.03</div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <div class={"list_more"}>
                        <a>
                          查看更多
                          <ArrowRightOutlined class={"arrow"} />
                        </a>
                      </div>
                    </TabPane>
                  );
                });
              },
            }}
          </Tabs>
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  &::after {
    position: absolute;
    content: "";
    right: 0;
    top: 20%;
    width: 40%;
    height: 200px;
    background-color: rgba(53, 152, 107, 0.1);
  }
  .talent_tab {
    z-index: 2;
    .ant-tabs-nav {
      margin-bottom: 40px;
      &::before {
        display: none;
      }
    }
    .ant-tabs-tab {
      padding: 14px 0;
      font-size: 20px;
      color: #343434;
      & + .ant-tabs-tab {
        margin: 0 0 0 60px;
      }
      &.ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #000;
        }
        &::after {
          position: absolute;
          content: "";
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 2px;
          background-color: var(--vt-c-primary);
        }
      }
    }
    .tab_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      .list_item {
        width: 100%;
        background-color: #fff;
        overflow: hidden;
        position: relative;

        a {
          display: block;
        }
        img {
          width: 100%;
          height: 390px;
          object-fit: cover;
        }
        .info_box {
          padding: 20px 18px;
        }
        .item_tit {
          font-size: 20px;
          line-height: 32px;
          color: #333333;
        }
        .item_desc {
          margin-top: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #666666;
        }
        .item_date {
          font-size: 14px;
          margin-top: 30px;
          font-weight: 300;
          color: #999999;
        }
      }
    }
  }
  .list_more {
    margin-top: 35px;
    text-align: center;
    a {
      color: var(--vt-c-primary);
    }
    .arrow {
      margin-left: 8px;
      padding: 2px;
      border: 1px solid var(--vt-c-primary);
      font-size: 12px;
      border-radius: 50%;
    }
  }
`;
