<template>
  <div class="containe">
    <Search :navId="navActiveKey"></Search>
    <div class="contentWrap">
      <div class="top">
        <div class="menu">
          <a-tabs v-model:activeKey="activeTabKey" centered>
            <a-tab-pane :key="item.id" :tab="item.name" v-for="item in tabList">
              <ul>
                <li @click="handleGoGoodsList(el.id)" v-for="el in item.children"
                  ><span>{{ el.name }}</span></li
                >
              </ul>
            </a-tab-pane>
          </a-tabs>
        </div>
        <dir class="wrap">
          <Nav v-model:navList="navList" v-model:navActiveKey="navActiveKey" />
          <div class="bannerWrap">
            <div class="banner">
              <a-carousel arrows>
                <template #prevArrow>
                  <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <left-circle-outlined />
                  </div>
                </template>
                <template #nextArrow>
                  <div class="custom-slick-arrow" style="right: 10px">
                    <right-circle-outlined />
                  </div>
                </template>
                <div><img src="./2.png" alt="" /></div>
                <div><img src="./3.jpg" alt="" /></div>
              </a-carousel>
            </div>
            <div class="userInfo">
              <div class="title">
                <a-avatar :size="64">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                <div class="welcome">
                  <p>Hi!</p>
                  <p>为享受而生</p>
                </div>
              </div>
              <div class="navList">
                <div class="item">
                  <p class="number">2</p>
                  <p>购物车</p>
                </div>
                <div class="item">
                  <p class="number">2</p>
                  <p>待付款</p>
                </div>
                <div class="item">
                  <p class="number">2</p>
                  <p>待接单</p>
                </div>
                <div class="item">
                  <p class="number">2</p>
                  <p>待出库</p>
                </div>
                <div class="item">
                  <p class="number">2</p>
                  <p>已配送</p>
                </div>
              </div>
            </div>
          </div>
        </dir>
      </div>
      <div class="lineList">
        <div class="line" v-for="item in 3" :key="item">
          <p class="title">正天创伤</p>
          <div class="goodsWrap">
            <ul class="goodsList">
              <li class="goods">
                <img src="./1.jpg" alt="" />
                <p class="name">注射器</p>
              </li>
              <li class="goods">
                <img src="./1.jpg" alt="" />
                <p class="name">注射器</p>
              </li>
              <li class="goods">
                <img src="./1.jpg" alt="" />
                <p class="name">注射器</p>
              </li>
              <li class="goods">
                <img src="./1.jpg" alt="" />
                <p class="name">注射器</p>
              </li>
              <li class="goods">
                <img src="./1.jpg" alt="" />
                <p class="name">注射器</p>
              </li>
              <li class="goods">
                <img src="./1.jpg" alt="" />
                <p class="name">注射器</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { LeftCircleOutlined, RightCircleOutlined, UserOutlined } from '@ant-design/icons-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import Search from '../components/search.vue';
  import Nav from '../components/nav.vue';
  import { toNumber } from 'lodash';
  import { useNavTree } from '/@/hooks/myhooks/index';
  import { DataItem } from '/@/views/product/goods-category/type';

  const go = useGo();
  const route = useRoute();
  const navTree = useNavTree();

  const navList = ref<DataItem[]>([]); // 菜单树
  const navActiveKey = ref(); // 选中的一级菜单id
  const tabList = ref<DataItem[]>([]); // 二级菜单树
  const activeTabKey = ref(); // 选中的二级菜单id

  const id = route.query.id; // 二次选择一级id

  // 初始化选中状态
  const init = (changeId?: number) => {
    let idx = 0;
    let findId = changeId ? changeId : id;
    if (id || changeId) {
      idx = navList.value.findIndex((item) => {
        return item.id === toNumber(findId);
      });

      if (idx === -1) idx = 0;
    }
    if (navList.value.length > 0) {
      tabList.value = navList.value[idx]?.children;
      navActiveKey.value = navList.value[idx]?.id;
      activeTabKey.value = navList.value[idx]?.children[0]?.id;
    }
  };

  const handleGoGoodsList = (id) => {
    go('/main/store/goods-classify' + `?nav=${navActiveKey.value}&tab=${activeTabKey.value}&tabItem=${id}`);
  };

  watch(
    () => navActiveKey.value,
    (n) => {
      init(n);
    },
  );

  onMounted(() => {
    navTree(navList, init, 'init');
  });
</script>

<style lang="less" scoped>
  p {
    padding: 0;
    margin: 0;
  }
  .containe {
    padding: 30px;

    .contentWrap {
      padding: 30px;
      background: #fff;
      border-radius: 10px;
      max-width: 1400px;
      min-width: 1200px;
      margin: 0 auto;

      .top {
        display: flex;
        justify-content: space-between;

        .menu {
          width: 25%;
          background: #f7f9fa;

          ul {
            li {
              height: 60px;
              line-height: 60px;
              font-size: 16px;
              padding: 0 15px;
              cursor: pointer;

              &:hover {
                background: #bfbfbf;
              }
            }
          }
        }
        .wrap {
          width: 73%;
          margin: 0;
          padding: 0;

          .bannerWrap {
            width: 100%;
            height: calc(100% - 64px);
            display: flex;
            justify-content: space-between;
            .banner {
              width: 73%;
              .ant-carousel :deep(.slick-slide) {
                text-align: center;
                background: #364d79;
                overflow: hidden;

                div {
                  height: 100%;

                  img {
                    width: 100%;
                    height: 400px;
                  }
                }
              }

              .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
                width: 25px;
                height: 25px;
                font-size: 25px;
                color: #fff;
                background-color: rgba(31, 45, 61, 0.11);
                opacity: 0.3;
                z-index: 1;
              }
              .ant-carousel :deep(.custom-slick-arrow:before) {
                display: none;
              }
              .ant-carousel :deep(.custom-slick-arrow:hover) {
                opacity: 0.5;
              }

              .ant-carousel :deep(.slick-slide h3) {
                color: #fff;
                height: 100%;
              }

              .ant-carousel,
              :deep(.slick-slider),
              :deep(.slick-list),
              :deep(.slick-track),
              :deep(.slick-slide) {
                height: 100% !important;
              }
            }

            .userInfo {
              width: 23%;
              .title {
                display: flex;
                justify-content: flex-start;
                margin-top: 10px;

                .welcome {
                  margin-left: 20px;
                  p {
                    font-size: 20px;
                  }
                }
              }

              .navList {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                margin-top: 30px;

                .item {
                  text-align: center;
                  width: 33%;
                  margin-bottom: 15px;
                  cursor: pointer;
                  padding: 5px;

                  &:hover {
                    background: #bfbfbf;
                  }

                  .number {
                    color: #1e95ea;
                    font-size: 20px;
                  }
                }
              }
            }
          }
        }
      }

      .lineList {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .line {
          background: #f7ece2;
          border-radius: 20px;
          width: 32%;
          padding: 20px;

          .title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
          }

          .goodsWrap {
            .goodsList {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              .goods {
                width: 32%;
                margin-top: 15px;
                cursor: pointer;
                padding: 10px;

                &:hover {
                  background: #b7a6964e;
                }

                img {
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  margin: 0 auto;
                }

                .name {
                  text-align: center;
                  font-size: 16px;
                  margin-top: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
