<template>
  <MapTitle
    text="产业融合发展"
    textRight="详情 >>"
    :detailsHandle="detailsHandle"
  />

  <div class="info">
    <div class="info-row" v-for="(item, index) in list" :key="index">
      <el-row class="year" align="middle">
        <el-icon color="#409EFC"> <Aim /> </el-icon>
        {{ item.title }}
      </el-row>

      <el-row class="info-item font-size14 color-666 item-bg margin-bottom8">
        <el-col :span="24">
          <el-row justify="space-between">
            <div class="item-row">
              <span class="font-size14 color-666">增长率</span>

              <el-col class="font-size20 color-pramiry">{{ item.rate }}</el-col>
            </div>

            <div class="item-row">
              <span class="font-size14 color-666">{{ item.label }}</span>

              <el-col class="font-size20 color-pramiry"
                >{{ item.value }}
                <span v-if="item.valueUnit" class="font-size12 color-999">{{
                  item.valueUnit
                }}</span>
              </el-col>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * 卡片信息--- 产业融合发展
 */
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons";
import { DataCenterRouter } from "@/route/dataCenter";
const date = [];

export default defineComponent({
  components: {
    MapTitle,
    Aim,
  },
  setup() {},
  data() {
    return {
      list: [
        {
          title: "军民融合",
          rate: "31.5%",
          value: "3545.5",
          label: "主营业务收入",
          valueUnit: "亿元",
        },
        {
          title: "国防科技工业",
          rate: "22.8%",
          value: "1113.4",
          label: "产值",
          valueUnit: "亿元",
        },
      ],
    };
  },
  methods: {
    detailsHandle() {
      console.log("--DataCenterRouter-sssss-", DataCenterRouter);
      this.$router.push(DataCenterRouter.DATA_INDUSTRIAL);
    },
  },
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
  display: flex;
  flex-direction: column;
  height: 100%;
  .info-row {
    margin-bottom: 10px;

    .year {
      margin: 10px 0;
    }
    .item-row {
      padding: 3px 20px;
      display: flex;
      flex-direction: column;
    }

    .info-item {
      margin-bottom: 10px;
      padding: 15px 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .title {
        margin-left: 15px;
        margin-bottom: 5px;
        color: #333;
        font-weight: bold;
        position: relative;
        &::before {
          content: " ";
          display: inline-block;
          position: absolute;
          top: 6px;
          left: -12px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #87bded;
        }
      }
    }
  }
  .margin-bottom8 {
    margin-bottom: 8px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
</style>
