<template>
  <div class="navigation bg-pan-bl">
    <div class="main" v-if="qeihuan">
      <div class="top">
        <span
          v-for="name in topList"
          :key="name"
          :class="name == select ? 'select' : ''"
          @click="changeCard(name)"
        >
          {{ name }}
        </span>
      </div>
      <div class="bottom">
        <a-input-search
          v-model:value="text"
          placeholder="请输入要查询的内容"
          enter-button="开始搜索"
          size="large"
          @search="onSearch"
        />
        <!-- <div class="search" @click="gaojisousuo">
          <span></span>
          <span>高级搜索</span>
        </div> -->
      </div>
    </div>
    <div class="gaoji-main" v-if="!qeihuan">
      <div class="gaoji-top">
        <a-form-item label="类型">
          <a-select
            ref="select"
            style="width: 1.8rem; height: 0.4rem"
            placeholder="请选择类型"
            @change="selectCard"
          >
            <a-select-option v-for="item in topList" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="应用领域">
          <a-select
            ref="select"
            style="width: 1.8rem; height: 0.4rem"
            placeholder="请选择应用领域"
            @change="selectCard"
            :key="applicationDataList"
          >
            <a-select-option
              v-for="item in applicationDataList"
              :key="item.id"
              :value="item.dict_label"
            >
              {{ item.dict_label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="技术领域">
          <a-select
            ref="select"
            style="width: 1.8rem; height: 0.4rem"
            placeholder="请选择技术领域"
            @change="selectCard"
            :key="technosphereDataList"
          >
            <a-select-option
              v-for="item in technosphereDataList"
              :key="item"
              :value="item.dict_label"
            >
              {{ item.dict_label }}
            </a-select-option>
          </a-select>
        </a-form-item> -->
      </div>
      <div class="qushi-class-father">
        <!-- <div class="qushi-class">
          <a-form-item label="发布部门" class="gaojisousuo">
            <a-select
              ref="select"
              style="width: 1.4rem; height: 0.4rem"
              placeholder="请选择省份"
              @change="qushijiedao"
              :key="fabubumen"
            >
              <a-select-option
                :value="item.name"
                v-model="item.value"
                v-for="item in fabubumen"
                :key="item"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select
              ref="select"
              style="width: 1.4rem; height: 0.4rem"
              @change="qushijiedao"
              placeholder="请选择市"
              :key="shi"
            >
              <a-select-option
                :value="item.name"
                v-model:value="item.value"
                v-for="item in shi"
                :key="item"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select
              ref="select"
              style="width: 1.4rem; height: 0.4rem"
              @change="qushijiedao"
              placeholder="请选择区划"
              :key="qu"
            >
              <a-select-option
                :value="item.name"
                v-for="item in qu"
                :key="item"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select
              ref="select"
              style="width: 1.4rem; height: 0.4rem"
              placeholder="请选择街道"
              :key="jiedao"
            >
              <a-select-option
                :value="item.name"
                v-for="item in jiedao"
                :key="item"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </div> -->
        <div class="sousuo" @click="onSearch(mohuchaxun)">搜索</div>
        <div @click="gaojisousuo" class="mohusousuo">
          <div class="mohusousuo-tupian"></div>
          模糊搜索
        </div>
      </div>
    </div>
    <div class="imgBox tracking-in-expand">
      <img src="~@/assets/newHome/slogan.png" />
    </div>
  </div>
</template>
<script setup>
  import { treesList, selectDicStoreAll } from '@/api/home.js'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { message } from 'ant-design-vue'
  const store = useStore()
  const router = useRouter()
  const topList = ref([
    '应用资源',
    '组件服务',
    '基础设施',
    '数据资源',
    '知识库',
  ])
  const select = ref(whoShow.itShowQingDao ? '' : '应用资源')
  let applicationDataList = ref([])
  let technosphereDataList = ref([])
  const fabubumen = ref([
    {
      name: '山东省',
      value: '',
      id: '100001',
    },
  ])
  let shi = ref([])
  let qu = ref([])
  let jiedao = ref([])
  function qushijiedao(value) {
    let danwei = value.substr(-1)
    // name.substr(-1)
    let id = 100001
    let param = {
      pid: id,
    }
    switch (danwei) {
      case '省':
        treesList(param).then((res) => {
          shi.value = res.data.data
        })
        break
      case '市':
        shi.value.map((item) => {
          if (item.name == value) {
            id = item.id
            param = {
              pid: id,
            }
            treesList(param).then((res) => {
              qu.value = res.data.data
            })
          }
        })
        break
      case '区':
        qu.value.map((item) => {
          if (item.name == value) {
            id = item.id
            param = {
              pid: id,
            }
            treesList(param).then((res) => {
              jiedao.value = res.data.data
            })
          }
        })
        break
    }
  }
  let text = ref('')
  let snum = ref({
    select: select.value,
    str: text.value,
    tecHnosphere: '',
    appLiCation: '',
  })
  const changeCard = (name) => {
    if (select.value == name && whoShow.itShowQingDao) {
      select.value = ''
    } else {
      select.value = name
    }
    snum.value.select = select.value
  }
  function selectCard(value) {
    console.log('res.data.data', value)
    //调用高级搜索接口
    topList.value.map((itemFather) => {
      if (itemFather == value) {
        select.value = value
        snum.value.select = value
        const params = {
          topCategoryName: select.value,
        }
        selectDicStoreAll(params).then((res) => {
          res.data.data.map((item) => {
            if (item.name == '应用领域') {
              applicationDataList.value = []
              technosphereDataList.value = []
              applicationDataList.value = item.typeList
            }
            if (item.name == '技术领域') {
              technosphereDataList.value = []
              technosphereDataList.value = item.typeList
            }
          })
          console.log('res.data.data', applicationDataList.value)
        })
      }
    })
    applicationDataList.value.map((item) => {
      if (item.dict_label == value) {
        snum.value.appLiCation = value
      }
    })
    technosphereDataList.value.map((item) => {
      if (item.dict_label == value) {
        snum.value.tecHnosphere = value
      }
    })
    console.log('选中===================>', snum.value)
  }
  let qeihuan = ref(true)
  //高级搜索与模糊搜索切换
  function gaojisousuo() {
    applicationDataList.value = []
    technosphereDataList.value = []
    qeihuan.value = !qeihuan.value
  }
  const mohuchaxun = ref('组件服务')
  function onSearch() {
    // if (text.value) {
    snum.value.str = text.value
    console.log('===================>', text.value)
    store.commit('home/selectCardsData', snum.value)
    router.push({
      path: '/DetailsPageconetent',
      query: snum.value,
    })
    // } else {
    //   message.warning('请输入查询内容！')
    // }
    // router.push({ path: '/DetailsPageconetent' })
  }
</script>
<style lang="less" scoped>
  .navigation {
    height: 5.8rem;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background: url('~@/assets/newHome/banner-main.jpg') no-repeat;
    background-size: 150%;
    :deep(.ant-btn) > span {
      font-size: 0.16rem;
    }
    .main {
      width: 8.8rem;
      height: 1.48rem;
      // background: rgba(255, 255, 255, 0.18);
      padding: 0.2rem 0.4rem;
      border-radius: 0.02rem;
      margin-top: 1.36rem;
      .top {
        display: flex;
        justify-content: flex-start;
        span {
          cursor: pointer;
          padding: 0.1rem 0;
          width: 1.2rem;
          text-align: center;
          margin: 0 0.1rem;
          font-size: 0.18rem;
          // background: linear-gradient(
          //   to right,
          //   rgba(68, 107, 164, 0.4) 0%,
          //   rgba(68, 107, 164, 0) 100%
          // );
          color: white;
          // border-left: 0.02rem solid rgb(108, 147, 204);
        }
        span:nth-of-type(1) {
          margin-left: 0;
        }
        // span:hover {
        //   background: linear-gradient(
        //     to right,
        //     rgba(68, 107, 164, 0.5) 0%,
        //     rgba(68, 107, 164, 0.1) 100%
        //   );
        // }
        .select {
          // background: linear-gradient(
          //   to bottom,
          //   rgba(255, 255, 255, 0.6) 0%,
          //   rgba(31, 116, 243, 0.8) 20%,
          //   rgba(0, 102, 255, 0.8) 50%,
          //   rgba(61, 122, 214, 0.8) 80%,
          //   rgba(255, 255, 255, 0.6) 100%
          // ) !important;
          background: url('~@/assets/home/top-select.png') no-repeat;
          background-size: 95%;
          background-position: 50% 40%;
          // border-radius: 0.5rem;
          font-weight: 600;
          // border-left: 0.02rem solid #fff;
        }
      }
      .bottom {
        width: 8rem;
        height: 0.54rem;
        margin-top: 0.12rem;
        position: relative;
        font-size: 0.14rem;
        :deep(.ant-input-search) {
          max-width: 8rem;
          .ant-input {
            height: 0.54rem;
          }
          .ant-btn {
            width: 1rem;
            height: 0.54rem;
            background: linear-gradient(to bottom, #f88e4e, #ef6341);
          }
        }
        .search {
          position: absolute;
          right: 0;
          top: -0.3rem;
          color: #fff;
          display: flex;
          align-items: center;
          cursor: pointer;
          span {
            margin-left: 0.04rem;
            font-size: 0.14rem;
          }
          span:nth-of-type(1) {
            width: 0.16rem;
            height: 0.16rem;
            background: url('~@/assets/newHome/search.png') no-repeat;
            background-size: cover;
          }
        }
      }
    }
    .gaoji-main {
      width: 9.1rem;
      height: 1.48rem;
      background: rgba(255, 255, 255, 0.18);
      padding: 0.24rem 0.2rem;
      border-radius: 0.02rem;
      margin-top: 1.36rem;
      .gaoji-top {
        width: 8.7rem;
        display: flex;
        // justify-content: space-between;
        :deep(.ant-col) {
          display: flex;
          align-items: center;
          font-family: text-typeface;
          font-size: 0.18rem;
        }
        :deep(.ant-select-selector) {
          height: 0.4rem;
          display: flex;
          align-items: center;
          font-family: text-typeface;
          font-size: 0.18rem;
          width: 2rem;
        }
        :deep(.ant-form-item-label) > label {
          font-family: text-typeface;
          font-size: 0.18rem;
          color: #fff;
        }
        :deep(.ant-form-item) {
          margin-bottom: 0.2rem;
          margin-left: 0.42rem;
        }
        :deep(.ant-form-item):first-child {
          margin-bottom: 0.2rem;
          margin-left: 0rem;
        }
      }
      .qushi-class-father {
        position: relative;
        .sousuo {
          width: 0.74rem;
          height: 0.4rem;
          background: linear-gradient(to bottom, #f88e4e, #ef6341);
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 6.85rem;
          top: 0rem;
          font-family: text-typeface;
          font-size: 0.18rem;
          color: #fff;
          border-radius: 0.02rem;
        }
        .mohusousuo {
          height: 0.4rem;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: 0rem;
          top: 0rem;
          font-family: text-typeface;
          font-size: 0.18rem;
          color: #fff;
          cursor: pointer;
          .mohusousuo-tupian {
            height: 0.16rem;
            width: 0.16rem;
            background: url('~@/assets/newHome/mohu.png');
            margin-right: 0.05rem;
          }
        }
      }
      .qushi-class {
        display: flex;
        :deep(.ant-form-item-control-input-content) > div {
          margin-right: 0.1rem;
        }
        :deep(.ant-form-item-label) > label {
          font-family: text-typeface;
          font-size: 0.18rem;
          color: #fff;
        }
        :deep(.ant-col) {
          display: flex;
          align-items: center;
          font-family: text-typeface;
          font-size: 0.18rem;
        }
        :deep(.ant-select-selector) {
          height: 0.4rem;
          display: flex;
          align-items: center;
          font-family: text-typeface;
          font-size: 0.18rem;
        }
      }
    }
    .imgBox {
      width: 8rem;
      margin-top: 0.18rem;
      img {
        width: 100%;
      }
    }
    .tracking-in-expand {
      -webkit-animation: tracking-in-expand 0.7s
        cubic-bezier(0.215, 0.61, 0.355, 1) both;
      animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
        both;
    }
    /* ----------------------------------------------
 * Generated by Animista on 2022-8-15 14:3:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

    /**
    * ----------------------------------------
    * animation tracking-in-expand
    * ----------------------------------------
    */
    @-webkit-keyframes tracking-in-expand {
      0% {
        letter-spacing: -0.5em;
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes tracking-in-expand {
      0% {
        letter-spacing: -0.5em;
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        opacity: 1;
      }
    }
  }
  .bg-pan-bl {
    -webkit-animation: bg-pan-bl 2s both;
    animation: bg-pan-bl 2s both;
  }
  /* ----------------------------------------------
 * Generated by Animista on 2022-8-15 15:8:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation bg-pan-bl
 * ----------------------------------------
 */
  @-webkit-keyframes bg-pan-bl {
    0% {
      background-size: 130%;
    }
    100% {
      background-size: 100%;
    }
  }
  @keyframes bg-pan-bl {
    0% {
      background-size: 130%;
    }
    100% {
      background-size: 100%;
    }
  }
</style>
<style>
  .rc-virtual-list-holder {
    overflow: unset;
    overflow-y: unset;
  }
  .rc-virtual-list-holder > div {
    overflow: auto;
    height: 2.56rem;
  }
  .ant-select-item-option-content {
    font-size: 0.18rem;
    font-family: text-typeface;
    height: 0.32rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    font-weight: unset;
    background-color: #0058e1;
    color: #fff;
    margin-top: 0.01rem;
    margin-bottom: 0.01rem;
  }
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: #0058e1;
    color: #fff;
    margin-top: 0.01rem;
    margin-bottom: 0.01rem;
  }
</style>
