<template>
  <MapTitle text="民口单位服务武器装备科研生产情况" />
  <el-row class="science-info" justify="space-between">
    <el-col :span="11">
      <div class="card-item" v-for="item in info" :key="item.label">
        <span>{{item.label}}</span>
        <div>
          {{item.value || "--"}}
          <span>{{item.unit}}</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" :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";
import Mock from "./mock";
import { mapState } from "vuex";

let MAP_ECHARTS = null;
const xAxisValue = [
  "杭州",
  "宁波",
  "温州",
  "湖州",
  "嘉兴",
  "绍兴",
  "金华",
  "衢州",
  "舟山",
  "台州",
  "丽水",
];

/**
 * 民口单位服务武器装备科研生产情况——柱状图
 */
export default defineComponent({
  components: {
    MapTitle,
  },
  setup() {},
  data() {
    return {
      // seriesData: SeriesData,
      mapEcharts: null,
    };
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    seriesData() {
     MAP_ECHARTS.showLoading();
      MAP_ECHARTS.setOption(this.optionBar, true);
      MAP_ECHARTS.hideLoading();
    },
  },
  computed: {
    ...mapState({
      curDataType: (state) => state.curDataType,
    }),
    info() {
      return Mock[this.curDataType].info;
    },
    seriesData() {
      return Mock[this.curDataType].seriesData;
    },
    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: this.seriesData,
      };

      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");
      MAP_ECHARTS = echarts.init(dom);
      MAP_ECHARTS.setOption(this.optionBar);
      this.mapEcharts = MAP_ECHARTS;
    },
  },
  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: 20px;
      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;
  min-height: 150px;
  height: calc(100% - 200px);
  box-sizing: border-box;
  margin-top: 10px;
}
</style>
