<template>
  <div class="index-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="grid-content">
          <DataCard title="所有用户" :value="this.baseData.totalUser" helpTip="从本站正式运营起累计注册的用户"></DataCard>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <DataCard title="活跃用户" :value="this.baseData.activeUser" helpTip="平均每日登陆系统一次以上的用户"></DataCard>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <DataCard title="昨日新增用户" :value="this.baseData.newUser" helpTip="昨日新注册的平台用户数量"></DataCard>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <Chart chartId="bar" :data="barData" helpTip="截止至昨日23:59:59的销售数据统计"></Chart>
      </el-col>
      <el-col :span="12">
        <Chart chartId="line" :data="lineData" helpTip="截止至昨日23:59:59的销售数据统计"></Chart>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <Chart chartId="pie" :data="pieData" helpTip="截止至昨日23:59:59的销售数据统计"></Chart>
      </el-col>
      <el-col :span="12">
        <Chart chartId="scatter" :data="scatterData" helpTip="截止至昨日23:59:59的销售数据统计"></Chart>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <Chart chartId="gauge" :data="gaugeData" helpTip="截止至昨日23:59:59的销售数据统计"></Chart>
      </el-col>
      <el-col :span="12">
        <Chart chartId="line2" :data="line2Data" helpTip="截止至昨日23:59:59的销售数据统计"></Chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DataCard from "@/components/DataCard";
import Chart from "@/components/charts/Chart";

export default {
  name: "",
  data() {
    return {
      baseData: {},
      barData: {
        title: { text: "昨日销售数据统计" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      lineData: {
        title: { text: "昨日销售数据统计" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      pieData: {
        title: { text: "昨日销售数据统计" },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        series: [
          {
            name: "销售量",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: [
              {
                name: "衬衫",
                value: "5"
              },
              {
                name: "羊毛衫",
                value: "20"
              },
              {
                name: "雪纺衫",
                value: "36"
              },
              {
                name: "裤子",
                value: "10"
              },
              {
                name: "高跟鞋",
                value: "10"
              },
              {
                name: "袜子",
                value: "20"
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      scatterData: {
        title: { text: "昨日销售数据统计" },
        tooltip: {
          formatter: " {a}: ({c})"
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            name: "销售量",
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68]
            ],
            type: "scatter"
          }
        ]
      },
      gaugeData: {
        title: { text: "昨日销售数据统计" },
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 50, name: "完成率" }]
          }
        ]
      },
      line2Data: {
        title: { text: "昨日销售数据统计" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          right: 30,
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "衬衫",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "羊毛衫",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "雪纺衫",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "裤子",
            type: "line",
            stack: "总量",
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "袜子",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    };
  },
  props: {},
  components: {
    DataCard,
    Chart
  },
  async mounted() {
    this.baseData = await this.$api.dashboard.baseData();
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.index-container {
  .el-row {
    margin-bottom: 10px;
  }
}
</style>