<template>
  <MapTitle
    text="服务强军兴军"
    textRight="更多"
    :detailsHandle="detailsHandle"
  />
  <div class="info">
    <div class="text-list item-bg">
      <el-row
        class="font-size14 color-666"
        justify="space-between"
        align="middle"
        v-for="item in (pageData.country || [])"
        :key="item.label"
      >
        {{ item.label }}
        <el-row align="middle">
          <span class="font-size20 color-pramiry">{{
            item.value || "--"
          }}</span>
          <span class="font-size12 color-999">{{ item.unit }}</span>
        </el-row>
      </el-row>
    </div>

    <!-- foot -->
    <el-row class="foot-wrapper" :gutter="16">
      <el-col :span="15" class="foot-row-text">
        <el-row class="item-bg margin-bottom8">
          <el-col class="padding0-8 font-size14 color-666"
            >国防科技工业军品收入</el-col
          >
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">{{
              pageData.technologyIncome || "--"
            }}</span>
            <span class="font-size12 color-999">亿元</span>
          </el-col>
        </el-row>

        <el-row class="item-bg">
          <el-col class="padding0-8 font-size14 color-666"
            >民口单位人均军品收入</el-col
          >
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">{{
              pageData.militaryIncome || "--"
            }}</span>
            <span class="font-size12 color-999">元</span>
          </el-col>
        </el-row>
      </el-col>

      <el-col class="font-size14 color-666 item-bg" :span="9">
        <el-row class="margin-bottom8">
          <el-col class="padding0-8 font-size14 color-666"
            >应届大学生应征入伍</el-col
          >
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">{{
              pageData.enlistVal || "--"
            }}</span>
            <span class="font-size12 color-999">人</span>
          </el-col>
        </el-row>

        <el-row class="rate">
          <el-col class="padding0-8 font-size14 color-666">应征入伍率</el-col>
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">{{
              pageData.enlistRateVal || "--"
            }}%</span>
            <span class="font-size12 color-999"></span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
/**
 * 卡片信息--- 服务强军兴军
 */
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { DataCenterRouter } from "@/route/dataCenter";
import Mock from "./strongArmyMock";
import { mapState } from "vuex";

export default defineComponent({
  components: {
    MapTitle,
  },
  setup() {},
  computed: {
    ...mapState({
      curDataType: (state) => state.curDataType,
    }),
    pageData() {
      return Mock[this.curDataType] || {};
    },
  },
  methods: {
    detailsHandle() {
      this.$router.push(DataCenterRouter.DATA_ARMY);
    },
  },
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.item-bg {
  padding: 12px 8px;
  background-color: rgba(25, 125, 237, 10%);
}
.info {
  padding: 10px 0;
  .text-list {
    padding: 18px 8px;
    .el-row {
      margin-bottom: 6px;
      padding: 0 8px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
.foot-row-text {
  margin-left: 0 !important;
}
.foot-wrapper {
  margin-top: 8px;
  width: 100%;
  .padding0-8 {
    padding: 0 8px;
  }
  .margin-bottom8 {
    margin-bottom: 8px;
  }
  .rate {
    margin-top: 12px;
  }
}
</style>
