<template>
  <div class="home">
    <div class="home-header">
      <div class="home-header-main">
        <img src="@/assets/imgs/logo.png" alt="" />
      </div>
    </div>
    <div class="home-banner">
      <div class="home-banner-logo">
        <img src="@/assets/imgs/logo2.png" alt="" />
      </div>
      <div class="home-banner-title">——— 智能评估企业潜在需求 ———</div>
      <div class="home-banner-search">
        <div class="autocomplete">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入公司名称"
            @select="handleSelect"
            clearable
            :debounce="500"
          ></el-autocomplete>
          <el-button @click="search"
            ><i class="el-icon-search"></i>分析</el-button
          >
        </div>
        <div class="hotsearch">
          <p>
            热搜：<span>阿里</span><span>阿里</span><span>阿里</span
            ><span>阿里</span><span>阿里</span><span>阿里</span>
          </p>
          <div class="batch"><i class="el-icon-refresh">换一批</i></div>
        </div>
      </div>
    </div>
    <div class="home-container">
      <div class="home-container-title">一站式企业证照服务</div>
      <div class="home-container-tabs">
        <div class="home-container-tabs-header">
          <div
            :class="
              tabsIndex == index
                ? 'tabs-header-item tabs-header-item-active'
                : 'tabs-header-item'
            "
            v-for="(item, index) in tabsHeaderList"
            :key="index"
            @click="tabsHeaderClick(index)"
          >
            {{ item }}
          </div>
        </div>
        <div class="home-container-tabs-main">
          <div class="tabs-main-item" v-for="item in 8" :key="item">
            <img src="@/assets/imgs/yingyezhizhao.png" alt="" />
            <span>公司营业执照</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanyInfoByLikeName } from "@/api/tmTools.js";
export default {
  data() {
    return {
      state: "",
      tabsIndex: 0,
      tabsHeaderList: [
        "工商服务",
        "知产服务",
        "财税服务",
        "资质审批",
        "交易服务",
        "特许资质"
      ]
    };
  },
  methods: {
    //查询公司详情
    search() {
      if (this.state) {
        this.$router.push({
          path: "/companyinformation",
          query: { name: this.state }
        });
        this.saveLocalStorage();
      }
    },
    //将搜索过的内容存入localStorage
    saveLocalStorage() {
      let companyInfo = JSON.parse(window.localStorage.getItem("companyInfo"));
      if (companyInfo) {
        let index = companyInfo.findIndex(item => {
          return item.value == this.state;
        });
        if (index == -1) {
          companyInfo.unshift({ value: this.state });
          window.localStorage.setItem(
            "companyInfo",
            JSON.stringify(companyInfo)
          );
        }
      } else {
        let companyInfo1 = [];
        companyInfo1.unshift({ value: this.state });
        window.localStorage.setItem(
          "companyInfo",
          JSON.stringify(companyInfo1)
        );
      }
    },
    tabsHeaderClick(index) {
      this.tabsIndex = index;
    },
    //模糊查询
    querySearchAsync(queryString, cb) {
      if (this.state == "") {
        //如果没有输入值，则从本地获取数据
        let companyInfo = JSON.parse(
          window.localStorage.getItem("companyInfo")
        );
        if (companyInfo) {
          cb(companyInfo);
        } else {
          cb([]);
        }
      } else {
        //请求企业近似商标数据
        getCompanyInfoByLikeName(this.state).then(res => {
          res.data.map(item => {
            item.value = item.domainEntName;
          });
          cb(res.data);
        });
      }
    },
    handleSelect(item) {
      console.log(item);
      if (this.state) {
        this.saveLocalStorage();
      }
    }
  }
};
</script>

<style lang="scss">
.home {
  width: 100%;
  .home-header {
    width: 100%;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    .home-header-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
  }
  .home-banner {
    width: 100%;
    height: 460px;
    background: url("../../../assets/imgs/homebanner.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .home-banner-logo {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 23px;
    }
    .home-banner-title {
      font-size: 30px;
      font-family: SourceHanSansCN-ExtraLight, SourceHanSansCN;
      font-weight: 200;
      color: rgba(255, 255, 255, 1);
      letter-spacing: 1px;
      margin-bottom: 43px;
    }
    .home-banner-search {
      width: 848px;
      height: 100px;
    }
  }
  .tabs-header-item-active {
    background: #ffffff !important;
    box-shadow: -1px -1px 4px 0px rgba(20, 120, 240, 0.27);
    color: #333333;
  }
}
.home-banner-search {
  .autocomplete {
    width: 100%;
    height: 50px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
    .el-autocomplete {
      flex: 1;
      .el-input {
        width: 100%;
        height: 100%;
        .el-input__inner {
          width: 100%;
          height: 100%;
          border-radius: 0;
        }
      }
    }
    .el-button {
      width: 135px;
      height: 100%;
      border-radius: 0;
      background: #1478f0;
      color: #fff;
      border: #1478f0;
    }
  }
  .hotsearch {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 1px;
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 17px;
        padding: 0 13px;
        border-radius: 100px;
        border: 1px solid #fff;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .batch {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 17px;
      cursor: pointer;
    }
  }
}
.home-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 0 110px;
  .home-container-title {
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(40, 40, 40, 1);
    line-height: 45px;
    letter-spacing: 1px;
    margin-bottom: 50px;
  }
  .home-container-tabs {
    width: 1200px;
    .home-container-tabs-header {
      width: 100%;
      display: flex;
      .tabs-header-item {
        padding: 12px 60px;
        background: #ebeef4;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 25px;
        letter-spacing: 1px;
        border-right: 1px solid #fff;
        cursor: pointer;
      }
    }
    .home-container-tabs-main {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .tabs-main-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 47px 0 3px;
        cursor: pointer;
        img {
          height: 44px;
        }
        span {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(70, 72, 81, 1);
          line-height: 25px;
          margin-top: 12px;
        }
      }
    }
  }
}
</style>
