<template>
  <div class="container4" @click="fn(ryxxcjqkUrl)">
    <div class="Box" v-if="show">
      <div class="top">
        <div class="text1">总采集人数</div>
        <div class="number1">{{ value1 }}</div>
      </div>
      <div class="bottom">
        <div class="left">
          <div class="text">男性人数</div>
          <div class="number">{{ value2 }}</div>
        </div>
        <div class="right">
          <div class="text">女性人数</div>
          <div class="number">{{ value3 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRyxxcjqkTotal,
  getRyxxcjqkMan,
  getRyxxcjqkWoman,
} from "@/api/jcxxxt.js";
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      show: false,
      ryxxcjqkUrl:'http://219.147.99.164:8082/population/route/bigdata/list-basepopulationinfo.html',

    };
    
  },
  created() {
    this.getDzzfb();
  },
  methods: {
    fn(url) {
      layer.open({
        type: 2,
        content: url, 
        area: ['80%', '80%'],
        title:'' ,
      });
    },
    async getDzzfb() {
      try {
        const res = await getRyxxcjqkTotal();
        const res2 = await getRyxxcjqkMan();
        const res3 = await getRyxxcjqkWoman();
        this.value1 = res.data.data.value;
        this.value2 = res2.data.data.value;
        this.value3 = res3.data.data.value;
        this.show = true;
        //  console.log(res);
        //  console.log(res2);
        //  console.log(res3);
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container4 {
  width: 21.3542vw;
  height: 17.9569vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 700;
  .Box {
    width: 21.3542vw;
    height: 17.9569vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 700;
  }
  // border: 1px solid #00ffff;
  .top {
    width: 100%;
    height: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);

    .text1 {
      font-size: 0.9375vw;
      color: #01aaed;
    }

    .number1 {
      font-size: 2.0833vw;
      color: #fff;
    }
  }

  .bottom {
    width: 100%;
    height: 43%;
    display: flex;
    justify-content: space-between;

    .left,
    .right {
      width: 48%;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 0.8854vw;
      color: #01aaed;
    }

    .number {
      font-size: 1.8229vw;
      color: #fff;
    }
  }
}
</style>