<template>
  <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.HighRiskArealist"
          :key="index"
        >
        </van-skeleton>
      </div>
      <tap-item-messsage
        v-if="!isLoad"
        :RiskArealist="HighRiskArealist"
        :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.MiddleRiskArealist"
          :key="index"
        >
        </van-skeleton>
      </div>
      <tap-item-messsage
        v-if="!isLoad"
        :RiskArealist="MiddleRiskArealist"
                :riskcolor="riskcolormiddle"
                :sicklevel="sicklevelmiddle"
      ></tap-item-messsage>
    </van-tab>
  </van-tabs>
</template>

<script>
// 引入子组件
import Vue from "vue";
import { Skeleton } from "vant";
Vue.use(Skeleton);

import TapItemMesssage from "./children/TapItemMesssage.vue";
import { getRiskArea } from "../../network/CovidRiskArea";
export default {
  name: "TapItem",
  data() {
    return {
      active: 0,
      // 全部风险地区信息
      HighRiskArealist: [],
      MiddleRiskArealist: [],
      isLoad: true,

      // 风险颜色
      riskcolorhigh:"",
      riskcolormiddle:"",
      // 中风险|高风险
      sicklevelhigh:"",
      sicklevelmiddle:"",
    };
  },
  // props: {
  //   HighRiskArealist: {
  //     type: Array,
  //     default() {
  //       return [];
  //     },
  //   },
  //   MiddleRiskArealist: {
  //     type: Array,
  //     default() {
  //       return [];
  //     },
  //   },
  // },
  components: {
    TapItemMesssage,
  },
  created() {
    this.getRiskArea();
  },
  methods: {
    // // 获取全部风险地区信息
    getRiskArea() {
      getRiskArea().then((res) => {
        console.log(res);
        // 高风险地区
        this.HighRiskArealist.push(...res.data.highlist);
        this.riskcolorhigh="#E82C2C"
        this.sicklevelhigh="高风险"
        // 中风险地区
        this.MiddleRiskArealist.push(...res.data.middlelist);
        this.riskcolormiddle="#FFA500"
        this.sicklevelmiddle="中风险"
      });
    },
  },
  mounted() {
    // 静态数据，所以用了计时器。正式项目中不用这样做
    // setInterval
     setTimeout(function(){
      this.isLoad = false;
    }.bind(this),2000)
  },
};
</script>

<style scoped>
/deep/.van-skeleton__row,
.van-skeleton__title {
  background-color: #b0c4de;
}
/deep/.van-tabs__nav--line{
  border-bottom: 0.1vw solid rgb(151, 151, 151) !important;
}
.line{
  background: rgb(151, 151, 151);
  height: 0.1vw;
  width: 100%;
}
/deep/.van-skeleton__content{
  background-color: #fff;
}
</style>