<template>
  <div class="containe">
    <div class="searchWrap">
      <a-input-search
        v-model:value="searchInfo"
        placeholder="请输入"
        enter-button="搜索"
        size="large"
        @search="onSearch"
      />
    </div>
    <div class="contentWrap">
      <div class="top">
        <div class="menu">
          <a-tabs v-model:activeKey="activeKey" centered>
            <a-tab-pane key="1" tab="器械">
              <ul>
                <li @click="handleGoGoodsList"><bank-outlined /> <span>单件器械-创伤-钉板</span></li>
                <li><bank-outlined /> <span>单件器械-髓内钉</span></li>
                <li><bank-outlined /> <span>手术动力</span></li>
                <li><bank-outlined /> <span>成套器械</span></li>
              </ul>
            </a-tab-pane>
            <a-tab-pane key="2" tab="产品">
              <ul>
                <li><bank-outlined /> <span>单件器械-创伤-钉板</span></li>
                <li><bank-outlined /> <span>单件器械-髓内钉</span></li>
                <li><bank-outlined /> <span>手术动力</span></li>
                <li><bank-outlined /> <span>成套器械</span></li>
              </ul>
            </a-tab-pane>
          </a-tabs>
        </div>
        <dir class="wrap">
          <div class="nav">
            <ul>
              <template v-for="(item, index) in navList">
                <li class="title" :class="{ active: navActiveKey === index }" @click="handleChangeNav(index)">{{
                  item.title
                }}</li>
                <li v-if="index !== 4">|</li>
              </template>
            </ul>
          </div>
          <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 } from 'vue';
  import { BankOutlined, LeftCircleOutlined, RightCircleOutlined, UserOutlined } from '@ant-design/icons-vue';
  import { navList } from './schema';
  import { useGo } from '/@/hooks/web/usePage';

  const go = useGo();
  const searchInfo = ref('');
  const onSearch = () => {};
  const activeKey = ref('1');
  const navActiveKey = ref(1);

  const handleChangeNav = (i) => {
    if (i === 0) return;
    navActiveKey.value = i;
  };

  const handleGoGoodsList = () => {
    go('/main/store/goods-classify');
  };
</script>

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

    .contentWrap {
      padding: 30px;
      background: #fff;
      border-radius: 10px;

      .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;
          .nav {
            background: #f7f9fa;
            text-align: center;
            border-radius: 10px;

            ul {
              height: 50px;
              padding: 5px;
              li {
                font-size: 20px;
                height: 40px;
                line-height: 40px;
                display: inline-block;
                margin: 0 15px;
              }

              .active {
                color: #1890ff;
              }

              .title {
                cursor: pointer;
              }
            }
          }

          .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: 30%;
                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>
