<template>
  <div class="home">
    <!-- 头部 -->
    <header-top>
      <span slot="Bigtitle">缙云县疫情防控服务</span>
    </header-top>

    <!-- 主体 -->
    <div class="context">
      <!-- 导航 -->
      <nav-bar></nav-bar>
      <!-- 疫情服务数据 -->
      <covid-serve></covid-serve>

      <!-- 分页 -->
      <van-tabs v-model="active" background="#F7F7F7" line-width="32px">
        <van-tab title="今日专报">
          <div class="jrzb">
            <img class="jrzbimg" src="../assets/image/index/位图.png" alt="" />
          </div>
        </van-tab>
        <van-tab title="最新文件">
          <card :poicefilelist="poicefilelist"></card>
        </van-tab>
        <van-tab title="中高风险地区">
          <!-- 风险地区搜索 -->
          <!-- 搜索框 -->
          <div class="sickarea">
            <div class="search">
              <van-search
                v-model="areakw"
                placeholder="请输入搜索关键词"
                @search="SearchRiskArea"
              >
              </van-search>
              <van-button @click="SearchRiskArea" type="info">搜索</van-button>
            </div>
          </div>

          <!-- 中高风险地区切换TAP -->
          <tap-item ></tap-item>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>




<script>
import { Toast } from "vant";
// 导入 header组件
import HeaderTop from "../components/header/header.vue";
// 导入navbar
import NavBar from "../components/navbar/navbar.vue";
// 导入缙云县疫情服务
import CovidServe from "../components/covidserve/CovidServe.vue";
// 导入 最新文件 循环组件
import Card from "@/components/carditem/card.vue";

// 导入 中高风险地区切换tap
import TapItem from "../components/Tapitem/TapItem.vue";
// 导入network方法
import { getpoicefile } from "../network/poicefile";

// import { getRiskArea } from "../network/CovidRiskArea";

export default {
  name: "index",
  components: {
    HeaderTop,
    NavBar,
    CovidServe,
    TapItem,
    Card,
  },

  data() {
    return {
      // 搜索属性
      value: " ",
      active: 0,
      // 全部文件信息
      poicefilelist: [],
      areakw: "",
    };
  },
  created() {
    this.getpoicefile();

  },

  methods: {
    // 获取全部文件信息
    getpoicefile() {
      getpoicefile("", 0, 12).then((res) => {
        console.log(res);
        this.poicefilelist.push(...res.data.data);
        console.log("file+" + this.poicefilelist);
      });
    }, 

    SearchRiskArea(val) {
      if (this.areakw == "") {
        Toast("请输入关键词");
      } else {
        Toast("正在检索中");
        if (this.$route.path.indexOf("Searchriskarea") !== 1) {
          setTimeout(() => {
            //需要延迟跳转  可以后续优化速度 =。=
            this.$router.push("/Searchriskarea/" + this.areakw);
            //延迟时间：2秒
          }, 2000);
        } else {
          return false;
        }
      }

      // 点击跳转
    },
  },
};
</script>



<style scoped>
.context {
  width: 90%;
  margin: 0 auto;
}
.jrzbimg {
  width: 100%;
}
.jrzb {
  margin-top: 3vw;
}

/* button */
.van-button {
  height: 32px;
  width: 20%;
}

/* tab切换标签 */
/deep/ .van-tabs__line {
  background-color: #1677ff;
}
.span.van-tab__text.van-tab__text--ellipsis {
  font-size: 16px;
}
/deep/.van-tabs__nav--line {
  width: 100%;
}
/deep/.van-tab {
  color: rgb(51, 51, 51);
  font-size: 16px;
  font-weight: bold;
}

/* 搜索框
 */
.search {
  display: flex;
  justify-content: space-evenly;
  padding-top: 2vw;
  margin-bottom: 5vw;
}
.van-search {
  padding: 0px;
  width: 80%;
  margin-right: 2vw;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 1vw;
}
.van-search .van-cell {
  padding: 1px;
}
.van-search__content {
  background-color: rgba(255, 255, 255, 1);
}
.van-cell {
  font-size: 16px;
  line-height: 32px;
  height: 32px;
}

/* button */
.van-button {
  height: 32px;
  width: 20%;
}
</style>
