<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">
        {{ 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">{{ 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>

             <div class="item-row">
              <span class="rate font-size14 color-666">增长率</span>

              <el-col class="font-size20 color-pramiry">{{ item.rate || "--"}}</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";
import Mock from "./industrialMcok";
import { mapState } from "vuex";

export default defineComponent({
  components: {
    MapTitle,
    Aim,
  },
  setup() {},
  data() {
    return {
     
    };
  },
  computed: {
       ...mapState({
      curDataType: (state) => state.curDataType,
    }),
    list(){
      return Mock[this.curDataType]
    },
  },
  methods: {
    detailsHandle() {
      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;
      color: #ffffff;
    }
    .item-row {
      padding: 3px 0 3px 0;
      display: flex;
      flex-direction: column;
      .rate{
        text-align: right;
        padding-right: 8px;
      }
    }

    .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>
