<template>
  <div class="navigation">
    <bg-vue></bg-vue>
    <div class="box">
      <div class="top" :key="num">
        <a-card-grid
          v-for="item in topList"
          :class="item == select ? 'select' : ''"
          :key="item"
          @click="selectCard(item)"
        >
          {{ item }}
        </a-card-grid>
      </div>
      <div class="search">
        <a-input-search
          placeholder="请输入您想搜索的内容"
          enter-button="搜索"
          size="large"
          @search="onSearch"
        />
        <i class="img"></i>
      </div>
      <div class="bottom">
        <div class="left" :key="showKey">
          <template v-for="(item, index) in leftList" :key="item[0]">
            <div class="title" :class="'title' + (index + 1)">
              {{ item[0] }}
            </div>
            <div class="item-box">
              <div class="item" v-for="(value, key) in item[1]" :key="key">
                <i class="img" :class="key"></i>
                <div>
                  <span>{{ value + '个' }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- <div class="right">
          <div class="item-box" v-for="item in rightList" :key="item.type">
            <div class="top">{{ item.type }}</div>
            <div class="item" v-for="val in item.list" :key="val[0]">
              <i class="img" :class="val[0]"></i>
              <div>{{ val[1] }}</div>
            </div>
            <div class="bt">查看更多</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  import { useStore } from 'vuex'
  import { selectTotal } from '@/api/home'
  import bgVue from './background/bg.vue'
  export default {
    setup() {
      const store = useStore()
      const router = useRouter()
      const topList = ['组件服务', '应用资源', '', '数据资源', '知识库']
      let select = ref('组件服务')
      const leftList = [
        [
          '系统已汇聚',
          {
            componentCapability: '组件服务0',
            applicationResources: '应用资源0',
            infrastructure: '基础设施23万',
            dataResources: '数据资源10387',
            knowledgeBase: '知识库12',
          },
        ],
        // [
        //   '本部门汇聚',
        //   {
        //     componentCapability: '组件服务0',
        //     applicationResources: '应用资源0',
        //     infrastructure: '基础设施0',
        //     dataResources: '数据资源0',
        //     knowledgeBase: '知识库0',
        //   },
        // ],
      ]
      const rightList = [
        {
          type: '基础设施',
          list: [
            ['yfw', '云服务'],
            ['sp', '视频'],
            ['mr', '某标题'],
          ],
        },
        {
          type: '数据资源',
          list: [
            ['sdsjj', '市大数据局'],
            ['sqxj', '市气象局'],
            ['mr', '某某局'],
          ],
        },
        {
          type: '组件服务',
          list: [
            ['aisf', 'AI算法'],
            ['tyzj', '通用组件'],
            ['tcfw', '图层服务'],
          ],
        },
        {
          type: '基础设施',
          list: [
            ['ztcglxt', '渣土车管理系统'],
            ['zhzfzt', '综合执法专题'],
            ['mr', '某某子平台'],
          ],
        },
      ]
      // 查询系统汇聚个数
      let showKey = ref(0)
      selectTotal().then((res) => {
        console.log('已汇聚个数==============>', res.data.data)
        // eslint-disable-next-line no-unused-vars
        res.data.data.total.forEach((val) => {
          console.log(val)
          if (val.type === '应用资源') {
            leftList[0][1]['applicationResources'] = val.type + (val.count || 0)
          } else if (val.type === '组件服务') {
            leftList[0][1]['componentCapability'] = val.type + (val.count || 0)
          }
        })
        showKey.value++
      })
      function onSearch() {
        // 点击内存入store
        store.commit('home/selectCardsData', {
          selectCardsnum: select.value,
        })
        console.log(
          '选中===================>',
          store.getters['home/selectCardsnum']
        )
        // router.push({ path: '/DetailsPageconetent' })
        router.push({
          path: '/DetailsPageconetent',
          query: {
            select: select.value,
          },
        })
      }
      function selectCard(item) {
        select.value = item
      }
      return {
        topList,
        leftList,
        rightList,
        select,
        onSearch,
        selectCard,
        showKey,
      }
    },
    components: {
      bgVue,
    },
  }
</script>
<style lang="less" scoped>
  .navigation {
    width: 100%;
    // background: url('~@/assets/home/bg.png') no-repeat;
    // background-size: 100%;
    display: flex;
    justify-content: center;
    .box {
      margin: 1.3rem 0 1.2rem 0;
      height: 6.12rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .top {
        width: 8.5rem;
        height: 0.62rem;
        .ant-card-grid {
          width: 20%;
          text-align: center;
          box-shadow: none;
          cursor: pointer;
          background: linear-gradient(
            to right,
            rgba(68, 107, 164, 0.4) 0%,
            rgba(68, 107, 164, 0) 100%
          );
          font-size: 0.24rem;
          color: #fff;
          height: 0.62rem;
          line-height: 0.62rem;
          padding: 0;
        }
        .select {
          box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
            0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
            0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
        }
        .ant-card-grid-hoverable:hover {
          box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
            0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
            0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
        }
      }
      .search {
        width: 8.4rem;
        height: 0.7rem;
        margin-top: 0.7rem;
        .ant-input-search {
          height: 0.7rem;
          max-width: none;
          :deep(.ant-input-wrapper) {
            height: 0.7rem;
            .ant-input {
              height: 0.7rem;
              background: rgba(255, 255, 255, 0.4);
              border: none;
              color: #fff;
              font-size: 0.2rem;
              border-top-left-radius: 0.14rem;
              border-bottom-left-radius: 0.14rem;
              padding-left: 0.6rem;
            }
            .ant-input::-webkit-input-placeholder {
              color: rgba(255, 255, 255, 0.4);
            }
            .ant-input-group-addon,
            .ant-btn {
              width: 1.4rem;
              height: 0.7rem;
              font-size: 0.21rem;
              border-top-right-radius: 0.14rem;
              border-bottom-right-radius: 0.14rem;
            }
          }
        }
        .img {
          display: inline-block;
          width: 0.23rem;
          height: 0.23rem;
          background: url('~@/assets/home/search.png') no-repeat;
          position: relative;
          top: -0.45rem;
          left: 0.2rem;
        }
      }
      .bottom {
        width: 13.2rem;
        height: 3rem;
        margin-top: 1.1rem;
        display: flex;
        justify-content: center;
        & > div {
          height: 3rem;
          background: linear-gradient(
            to right,
            rgba(28, 54, 111, 0.8) 0%,
            rgba(28, 54, 111, 0) 100%
          );
        }
        .left {
          width: 6.9rem;
          .title {
            font-size: 0.18rem;
            text-align: center;
            color: #fff;
            margin: 0.25rem 0 0.1rem;
          }
          .title2 {
            margin: 0.35rem 0 0.1rem;
          }
          .item-box {
            display: flex;
            flex-wrap: wrap;
            .item {
              cursor: pointer;
              width: 30%;
              display: flex;
              flex-direction: column;
              align-items: center;
              color: #fff;
              font-size: 0.16rem;
              padding-top: 0.1rem;
              border-radius: 0.1rem;
              span {
                color: #fff;
                font-size: 0.18rem;
              }
              .img {
                width: 0.36rem;
                height: 0.36rem;
                margin-bottom: 0.03rem;
              }
              .infrastructure {
                background: url('~@/assets/home/jcss.png') no-repeat;
                background-size: 100%;
              }
              .dataResources {
                background: url('~@/assets/home/sjzy.png') no-repeat;
                background-size: 100%;
              }
              .componentCapability {
                background: url('~@/assets/home/zjfw.png') no-repeat;
                background-size: 100%;
              }
              .applicationResources {
                background: url('~@/assets/home/yyzy.png') no-repeat;
                background-size: 100%;
              }
              .knowledgeBase {
                background: url('~@/assets/home/zsk.png') no-repeat;
                background-size: 100%;
              }
            }
            .item:hover {
              box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
                0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
                0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
            }
          }
        }
        .right {
          width: 6.3rem;
          display: flex;
          .item-box {
            width: 25%;
            display: flex;
            flex-direction: column;
            .top {
              width: 100%;
              height: 0.18rem;
              line-height: 0.18rem;
              font-size: 0.18rem;
              color: #fff;
              text-align: center;
              margin: 0.3rem 0 0.2rem;
            }
            .item {
              cursor: pointer;
              display: flex;
              align-items: center;
              padding: 0.08rem 0 0.08rem 0.2rem;
              border-radius: 0.1rem;
              .img {
                width: 0.34rem;
                height: 0.34rem;
              }
              div {
                font-size: 0.14rem;
                margin-left: 0.05rem;
                color: #fff;
              }
              .yfw {
                background: url('~@/assets/home/yfw.png');
              }
              .sp {
                background: url('~@/assets/home/sp.png');
              }
              .sdsjj {
                background: url('~@/assets/home/sdsjj.png');
              }
              .sqxj {
                background: url('~@/assets/home/sqxj.png');
              }
              .aisf {
                background: url('~@/assets/home/aisf.png');
              }
              .tyzj {
                background: url('~@/assets/home/tyzj.png');
              }
              .tcfw {
                background: url('~@/assets/home/tcfw.png');
              }
              .ztcglxt {
                background: url('~@/assets/home/ztcglxt.png');
              }
              .zhzfzt {
                background: url('~@/assets/home/zhzfzt.png');
              }
              .mr {
                background: url('~@/assets/home/mr.png');
              }
            }
            .item:nth-of-type(1) {
              margin-top: 0;
            }
            .item:hover {
              box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
                0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
                0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
            }
            .bt {
              cursor: pointer;
              width: 1.2rem;
              height: 0.38rem;
              line-height: 0.38rem;
              text-align: center;
              color: #fff;
              font-size: 0.14rem;
              background: rgba(255, 255, 255, 0.4);
              border-radius: 0.04rem;
              align-self: center;
              margin-top: 0.1rem;
            }
            .bt:hover {
              box-shadow: 0 0.01rem 0.02rem -0.02rem rgb(255 255 255 / 26%),
                0 0.03rem 0.06rem 0 rgb(255 255 255 / 22%),
                0 0.05rem 0.12rem 0.04rem rgb(255 255 255 / 19%);
            }
          }
        }
      }
    }
  }
</style>
