<template>
  <div class="Search">
    <header-top>
      <span slot="Bigtitle">搜索疫情地区</span>
    </header-top>
    <!-- 查询结果的地区 -->
    <van-tabs v-model="active">
      <van-tab title="高风险地区">
        <!-- <div class="line"></div> -->
        <div v-if="isLoad">
          <van-skeleton
            title
            :row="2"
            style="padding-top: 5vw; padding-bottom: 5vw"
            v-for="(item, index) in this.higharea"
            :key="index"
          >
          </van-skeleton>
        </div>
        <tap-item-messsage
          v-if="!isLoad"
          :RiskArealist="higharealist"
          :riskcolor="riskcolorhigh"
          :sicklevel="sicklevelhigh"
        ></tap-item-messsage>
      </van-tab>

      <van-tab title="中风险地区">
        <!-- <div class="line"></div> -->
        <div v-if="isLoad">
          <van-skeleton
            title
            :row="2"
            style="padding-top: 5vw; padding-bottom: 5vw"
            v-for="(item, index) in this.middlearea"
            :key="index"
          >
          </van-skeleton>
        </div>
        <tap-item-messsage
          v-if="!isLoad"
          :RiskArealist="middlearealist"
          :riskcolor="riskcolormiddle"
          :sicklevel="sicklevelmiddle"
        ></tap-item-messsage>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//导入的插件
import HeaderTop from "../../components/header/header.vue";
import TapItem from "../../components/Tapitem/TapItem.vue";
import TapItemMesssage from "../../components/Tapitem/children/TapItemMesssage.vue"
// 方法
import { getRiskArea } from "../../network/CovidRiskArea";

export default {
  name: "Searchriskarea",
  components: {
    HeaderTop,
    TapItem,
    TapItemMesssage 
  },
  data() {
    return {
      area_name: "",
      //   showriskarealist: {
      higharea: [],
      middlearea: [],
      higharealist:[],
      middlearealist:[],
      isLoad: true,
      // 风险颜色
      riskcolorhigh: "",
      riskcolormiddle: "",
      // 中风险|高风险
      sicklevelhigh: "",
      sicklevelmiddle: "",
      active: 0,
      //   },
    };
  },
  created() {
    // 获取当前关键词
    this.area_name = this.$route.params.area_name;
    this.getRiskArea();
  },

  methods: {
    // 2022.3.31 还未优化
    getRiskArea() {
      getRiskArea().then((res) => {
        console.log(res);
        // 高风险地区
        this.higharea.push(...res.data.highlist);
        this.riskcolorhigh = "#E82C2C";
        this.sicklevelhigh = "高风险";
        console.log(this.higharea);
        // 中风险地区
        this.middlearea.push(...res.data.middlelist);
        this.riskcolormiddle = "#FFA500";
        this.sicklevelmiddle = "中风险";

        // 判断高风险字段中是否有area_name的关键词
        this.higharea.forEach((item, index) => {
          console.log(item.area_name);
          console.log(this.area_name);
          if (item.area_name.includes(this.area_name)) {
            // 把符合条件的字段push进去
            this.higharealist.push(item);
          } else {
            // console.log("不包含");
          }
        });
        // 判断中风险字段中是否有area_name的关键词
        this.middlearea.forEach((item, index) => {
          console.log(item.area_name);
          console.log(this.area_name);
          if (item.area_name.includes(this.area_name)) {
            // 把符合条件的字段push进去
            this.middlearealist.push(item);
            // console.log("包含");
          } else {
            // console.log("不包含");
          }
        });
      });
    },
  },
  mounted() {
    // 静态数据，所以用了计时器。正式项目中不用这样做
    // setInterval
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      2000
    );
  },
};
</script>

<style scoped>
/deep/.search {
  display: none;
}
</style>