<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="in_analysis">
      <!-- 可横向铺满 -->
      <el-col :span="6" class="in_left">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius :show_header="true" title="应用总体概况" class="block">
              <div class="left_1">
                <div class="left_block">
                  <div ref="left_1_l" class="left_1_l">
                    <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
                    <div class="left_1_msg">
                      <div class="left_1_title">服务总数</div>
                      <div class="left_1_num">2222</div>
                    </div>
                  </div>
                  <div class="chain">
                    月环比
                    <span class="chain_mid" :class="overview.month_chain >= 0 ? 'chain_up' : 'chain_down'">
                      {{ Math.abs(overview.month_chain) }}
                      <img
                        :src="overview.month_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
                      />
                    </span>周环比
                    <span :class="overview.week_chain >= 0 ? 'chain_up' : 'chain_down'">
                      {{ Math.abs(overview.week_chain) }}
                      <img
                        :src="overview.week_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
                      />
                    </span>
                  </div>
                  <div class="left_1_line"></div>
                  <div class="left_1_l_bottom">日均被部署次数<span class="left_1_l_bottom_msg">12432</span>（次）</div>
                </div>
                <div class="left_1_right">
                  <WaterPolo />
                </div>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务调用次数分析"
              :buttons_arr="['近7天', '近30天']"
              @changeButton="changeServiceCellBtn"
              class="block"
            >
              <Graph :data="graph_arr" />
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务类型分析"
              :buttons_arr="['发布的服务', '调用的服务']"
              @changeButton="changeServiceTypeBtn"
              class="block"
            >
              <multiple-circle :data="mult_data" :text="text"></multiple-circle>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="in_center">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <line-chart :data="line_data"></line-chart>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="in_right">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <toplist></toplist>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <starlist></starlist>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <single-circle :data="single_data"></single-circle>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <!-- 不可横向铺满，一般为最后一行 -->
      <el-col :span="6" class="in_block">
        <block-radius :show_header="true" title="服务来源机构分析" class="block">
          <BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
        </block-radius>
      </el-col>
      <el-col :span="18" class="in_block default">
        <block-radius class="block">
          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
        </block-radius>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph";
import WaterPolo from "@/components/e-charts/water-polo";
export default {
  components: {
    BlockRadius,
    multipleCircle,
    singleCircle,
    Toplist,
    Starlist,
    lineChart,
    BarChart,
    Graph,
    WaterPolo
  },
  data: () => ({
    overview: {
      month_chain: 14.5,
      week_chain: -14.2
    },
    mult_data: [
      { name: "基础工具", value: 40 },
      { name: "通用应用", value: 0 },
      { name: "业务应用", value: 2 }
    ],
    text: "应用总数",
    single_data: {
      num: 12,
      color: "#515fe7",
      text: "共享"
    },
    line_data: {
      xaxis: [
        "01-01",
        "01-02",
        "01-03",
        "01-04",
        "01-05",
        "01-06",
        "01-07",
        "01-08"
      ],
      data: [
        {
          name: "开发者应用",
          arr: [100, 120, 130, 150, 160, 120, 110, 100]
        },
        {
          name: "平台应用",
          arr: [120, 130, 140, 130, 140, 120, 100, 90]
        },
        {
          name: "未上架",
          arr: [80, 90, 100, 110, 100, 70, 80, 90]
        }
      ]
    },
    bar_data_org: {
      xaxis: [
        "01-01",
        "01-02",
        "01-03",
        "01-04",
        "01-05",
        "01-06",
        "01-07",
        "01-08"
      ],
      data: [100, 120, 130, 150, 160, 120, 110, 100]
    },
    graph_arr: {
      xaxis: [
        "01-01",
        "01-02",
        "01-03",
        "01-04",
        "01-05",
        "01-06",
        "01-07",
        "01-08"
      ],
      data: [
        [1010, 120, 130, 520, 160, 1120, 110, 100],
        [100, 1210, 130, 1530, 160, 120, 110, 1200]
      ],
      legend: ["aaa1", "bbb1"]
    }
  }),
  mounted() {},
  methods: {
    changeServiceTypeBtn(index) {
      console.log(index);
    },
    changeApplicationFieldBtn(index) {
      console.log(index);
    },
    changeServiceCellBtn(index) {
      console.log(index);
    }
  }
};
</script>
<style scoped>
.in_analysis {
  padding: 0 10px 10px;
  height: 100%;
  width: 100%;
  min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
  height: 280px;
  padding: 10px;
}
.height_2x {
  height: 560px;
}
.block {
  width: 100%;
  height: 100%;
}
.left_1 {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.left_block {
  width: 70%;
  height: 100%;
  padding: 10px 0 0 0;
}
.left_1_l {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.left_1_title {
  width: 100%;
}
.left_1_num {
  font-size: 32px;
  color: #515fe7;
  width: 100%;
}
.left_1_img {
  width: 120px;
  height: 120px;
  display: inline-block;
}
.chain {
  color: #58617a;
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
}
.chain_down {
  background-color: #fbe8e8;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 12px;
  margin-left: 8px;
}
.chain_up {
  background-color: #e7fdfc;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 12px;
  margin-left: 8px;
}
.chain_mid {
  margin-right: 20px;
}
.left_1_l_bottom {
  color: #58617a;
  padding: 10px;
}
.left_1_l_bottom_msg {
  margin-left: 20px;
}
.left_1_msg {
  display: inline-block;
  width: 120px;
  padding-bottom: 10px;
}
.left_1_line {
  width: 90%;
  margin-left: 5%;
  height: 1px;
  background-color: #f2f2f2;
}
.left_1_right {
  width: 30%;
  height: 100%;
  display: inline-block;
}
.default {
  text-align: center;
}
.default_img {
  width: 330px;
  height: 230px;
}
</style>