<template>
  <MapTitle text="民口单位服务武器装备科研生产情况(截至2021第二季度)" />
  <el-row class="science-info" justify="space-between">
    <el-col :span="11">
      <div class="card-item">
        <span>民口单位军品收入</span>
        <div>53.35<span>亿元</span></div>
      </div>

      <div class="card-item">
        <span>人均民口单位军品收入</span>
        <div>90.56<span>元</span></div>
      </div>
    </el-col>

    <el-col class="increase-rate" :span="12">
      <div class="title">城市增长率</div>
      <div class="rate-list">
        <div class="rate-list-head rate-list-item">
          <span>城市</span>
          <span>增长率</span>
        </div>

        <el-scrollbar height="92px">
          <div
            class="rate-list-item"
            v-for="(item, index) in seriesData.rate"
            :key="index"
          >
            <span>{{ item.city }}</span>
            <span class="rate-value">{{ item.increace }}%</span>
          </div>
        </el-scrollbar>
      </div>
    </el-col>
  </el-row>

  <div class="science-title">各市民口单位军品收入(亿元)</div>
  <div id="incomDistribution" class="incom-distribution"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";

const SeriesData = {
  type: "level_1",
  rate: [
    {
      city: "杭州",
      value: 15.63,
      increace: 69.53,
    },
    {
      city: "宁波",
      value: 7.42,
      increace: 66,

    },
    {
      city: "温州",
      value: 1.23,
      increace: 18.6,

    },
    {
      city: "湖州",
      value: 2.65,
      increace: 79.1,

    },
    {
      city: "嘉兴",
      value: 6,
      increace: 28.06,

    },
    {
      city: "绍兴",
      value: 12.5,
      increace: 117,

    },
    {
      city: "金华",
      increace: 83,
      value: 1.7,
    },
    {
      city: "衢州",
      increace: 13.2,
      value: 0.86,
    },
    {
      city: "舟山",
      increace: -32,
      value: 2.61,
    },

    {
      city: "台州",
      increace: 46.4,
      value: 2.58,
    },
    {
      city: "丽水",
      increace: 150.7,
      value: 0.17,
    },
  ],
};
const xAxisValue = [
  "杭州",
  "宁波",
  "温州",
  "湖州",
  "嘉兴",
  "绍兴",
  "金华",
  "衢州",
  "舟山",
  "台州",
  "丽水",
];

/**
 * 民口单位服务武器装备科研生产情况——柱状图
 */
export default defineComponent({
  components: {
    MapTitle,
  },
  setup() {},
  data() {
    return {
      seriesData: SeriesData,
      mapEcharts: null,
    };
  },
  mounted() {
    this.initEcharts();
  },
  computed: {
    optionBar() {
      const seriesLine = {
        type: "line",
        itemStyle: {
          color: "#4198ff",
        },
        emphasis: {
          focus: "series",
        },
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#4198ff",
            },
            {
              offset: 1,
              color: "#fff",
            },
          ]),
        },

        data: SeriesData.rate,
      };

      return {
        tooltip: {
          trigger: "axis",
          className: "science-echart",
          formatter: (params) => {
            let html = `<span class="name">${params[0].axisValue}市</span>`;

            html += `<div class="science-echart ">
                <span class=" title color_1">民口单位军品收入</span>
                <br />
                <span class="text text-color_1">${params[0].data.value}</span>亿元
               </div>`;

            return html;
          },
        },
        legend: {},
        grid: {
          top: "5%",
          left: "0%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        xAxis: {
          type: "category",
          data: xAxisValue,
        },
        series: [seriesLine],
      };
    },
  },
  methods: {
    initEcharts() {
      const dom = document.getElementById("incomDistribution");
      const mapEcharts = echarts.init(dom);
      mapEcharts.setOption(this.optionBar);
      this.mapEcharts = mapEcharts;
    },
  },
  unmounted() {
    if (!this.mapEcharts) {
      return;
    }
    this.mapEcharts.dispose();
    this.mapEcharts = null;
  },
});
</script>
<style>
.science-echart {
  width: 110px;
}
.science-echart .name {
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.science-echart .title {
  padding-left: 10px;
  font-weight: 600;
  font-size: 12px;
  color: #666;
  position: relative;
}
.science-echart .title::before {
  position: absolute;
  top: 5px;
  left: 0;
  content: " ";
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
}
.science-echart .text {
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: 20px;
}
.science-echart .text-color_1 {
  color: #4198ff;
}

.science-echart .color_1::before {
  background: #4198ff;
}
</style>

<style lang="scss" scoped>
.science-info {
  margin-top: 15px;
  height: 150px;
  box-sizing: border-box;
  .card-item {
    color: #333;
    padding: 8px 15px;
    box-sizing: border-box;
    background: #f8f9fb;
    border-radius: 5px;
    margin-bottom: 8px;
    &:last-of-type {
      margin-bottom: 0;
    }
    div {
      color: #4198ff;
      font-size: 24px;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
        font-size: 14px;
        color: #999;
      }
    }
  }

  .increase-rate {
    .title {
      color: #4198ff;
      margin-bottom: 5px;
    }

    .rate-list {
      .rate-list-item {
        padding: 5px 40px 5px 20px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #666;
        justify-content: space-between;
      }
      .rate-list-head {
        background: #ddeaf8;
      }
      .el-scrollbar {
        background: #f8f9fb;
      }
      .rate-value {
        color: #4198ff;
      }
    }
  }
}

.science-title {
  color: #4198ff;
}
.incom-distribution {
  flex: 1;
  height: 150px;
  box-sizing: border-box;
  margin-top: 10px;
}
</style>
