
<template>
  <MapTitle
    text="五大体系建设"
    textRight="详情 >>"
    :detailsHandle="detailsHandle"
  />

  <div class="info">
    <el-row class="year" align="middle">
      <el-icon color="#409EFC"> <Aim /> </el-icon>
      组织管理体系
    </el-row>

    <el-row
      class="item-bg margin-bottom12"
      align="middle"
      justify="space-between"
    >
      <el-col class="item-text font-size14 color-666" :span="16">
        各地召开融委全体会议次数
      </el-col>
      <el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
        {{ pageData.meetingCount || "--" }}
        <span class="margin-left5 font-size12 color-999">次</span>
      </el-col>
    </el-row>

    <el-row
      class="item-bg margin-bottom12 flex-one"
      align="middle"
      justify="space-between"
    >
      <el-col class="item-text font-size14 color-666" :span="18">
        与当地军分区（警备区）建立并落实军地协作工作机制
      </el-col>
      <el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
        {{ pageData.workeCount || "--"
        }}<span class="margin-left5 font-size12 color-999">次</span>
      </el-col>
    </el-row>

    <el-row class="info-item font-size14 color-666 item-bg margin-bottom12">
      <el-row class="item-text title"> 各地军民融合办工作人员 </el-row>

      <el-col :span="24">
        <el-row justify="space-between">
          <div class="item-row">
            <span class="font-size14 color-666">专职</span>
            <el-col class="jf-end flex-row font-size20 color-pramiry">
              {{ pageData.fullTime || "--" }}
              <span class="margin-left5 font-size12 color-999">人</span>
            </el-col>
          </div>

          <div class="item-row">
            <span class="font-size14 color-666">兼职</span>
            <el-col class="flex-row font-size20 color-pramiry">
              {{ pageData.partTime || "--" }}
              <span class="margin-left5 font-size12 color-999">人</span>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </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 "./systemConstructMock";
import { mapState } from "vuex";

export default defineComponent({
  components: {
    MapTitle,
    Aim,
  },
  setup() {},
  computed: {
    ...mapState({
      curDataType: (state) => state.curDataType,
    }),
    pageData() {
      return Mock[this.curDataType];
    },
  },
  methods: {
    detailsHandle() {
      this.$router.push(DataCenterRouter.ConctructSystem);
    },
  },
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
  display: flex;
  flex-direction: column;
  height: 100%;
  .margin-bottom12 {
    margin-bottom: 12px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .year {
    margin: 10px 0;
  }

  .info-item {
    margin-bottom: 10px;
    padding: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .title {
      margin-bottom: 5px;
      color: #333;
    }
    .item-row {
      padding: 0 20px;
      flex-direction: column;
      display: flex;
    }
  }
  .color-pramiry {
    text-align: center;
  }

  .item-text {
    margin-left: 15px;
    color: #333;
    position: relative;
    &::before {
      content: " ";
      display: inline-block;
      position: absolute;
      top: 5px;
      left: -10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #87bded;
    }
  }
  .flex-one {
    flex-wrap: nowrap;
    padding-right: 15px;
  }
  .jf-end {
    justify-content: flex-end;
  }
}
</style>

