<template>
  <MapTitle :text="title" textRight="详情 >>" :detailsHandle="detailsHandle" />

  <div class="info">
    <el-row
      v-for="item in infoList"
      :key="item.label"
      class="row-item font-size14 color-666 item-bg margin-bottom8"
      justify="space-between"
      align="middle"
    >
      <el-col :span="14"> {{ item.label }}</el-col>
      <el-col :span="10">
        <el-row align="middle" justify="end">
          <span class="font-size20 color-pramiry">{{
            item.value || "--"
          }}</span>
          <span class="font-size12 color-999">{{ item.unit }}</span>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
/**
 * 卡片信息--- 军民协同创新 / 资源共享开放
 */
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
    infoList: {
      type: Array,
      required: true,
    },
    toPage: {
      type: String,
    },
  },
  components: {
    MapTitle,
  },
  setup() {},

  methods: {
    detailsHandle() {
      console.log("===", this.toPage);
      this.toPage && this.$router.push(this.toPage);
    },
  },
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  .margin-bottom8 {
    margin-bottom: 8px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  .el-row {
    height: 28%;
  }
  .row-item {
    padding: 0 16px;
  }
  .row-text {
    text-align: right;
  }
}
</style>
