<template>
  <div class="app-container" v-loading="loading">
    <div class="dashboard">
      <div class="dashboard-item">
        <div class="value">{{ statics.accessTableCount }}</div>
        <div class="title">已接入数据表</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.shareTableCount }}</div>
        <div class="title">已共享数据表</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.accessDataItemCount }}</div>
        <div class="title">已接入数据项</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.shareDataItemCount }}</div>
        <div class="title">已共享数据项</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.accessServiceCount }}</div>
        <div class="title">已接入服务</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.shareServiceCount }}</div>
        <div class="title">已共享服务</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.appCount }}</div>
        <div class="title">已接入应用数</div>
      </div>

      <div class="dashboard-item">
        <div class="value">{{ statics.literatureCount }}</div>
        <div class="title">已共享文献数</div>
      </div>
    </div>

    <div class="second">
      <div class="left">
        <div class="container-title">整体数据统计</div>
        <div class="content" id="whole-chart"></div>
      </div>
      <div class="right">
        <div class="container-title">共享资源比例</div>
        <div class="content" id="ratio-chart"></div>
        <div class="val">
          {{
            (statics.literatureCount || 0) +
            (statics.shareServiceCount || 0) +
            (statics.shareTableCount || 0)
          }}
        </div>
        <div class="label">共享资源总数</div>
      </div>
    </div>

    <div class="third">
      <div class="left">
        <div class="container-title">用户数</div>
        <div class="content" id="user-chart"></div>
      </div>
      <div class="right">
        <div class="container-title">资源访问量</div>
        <div class="content" id="res-chart"></div>
        <el-radio-group v-model="unit" class="radio" size="mini">
          <el-radio-button label="年"></el-radio-button>
          <el-radio-button label="月"></el-radio-button>
          <el-radio-button label="日"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import { statics, barchart, daygroup } from "@/api/system/statics";
export default {
  name: "Main",
  data() {
    return {
      unit: "年",
      beginCreateTime: "",
      loading: false,
      statics: {},
      resChartData: [],
    };
  },
  watch: {
    unit: {
      handler(val) {
        this.getbarchart();
      },
    },
  },
  created() {
    this.getStatics();
    this.getbarchart();
    this.daygroup();
    // setTimeout(function () {
    //   self.initResChart();
    // }, 500);
    // this.initWholeChart();
  },
  methods: {
    getStatics() {
      this.loading = true;
      statics().then((res) => {
        this.loading = false;
        this.statics = res.data;
        this.initUserChart();
        this.initResRatioChart();
      });
    },
    getbarchart() {
      const param = {};
      if (this.unit === "年") {
        param.unit = "y";
        param.beginCreateTime = null;
      } else if (this.unit === "月") {
        param.unit = "m";
        param.beginCreateTime = this.parseTime(
          new Date().getFullYear() + "-01-01",
          "{y}-{m}-{d} {h}:{i}:{s}"
        );
      } else if (this.unit === "日") {
        param.unit = "d";
        param.beginCreateTime = "2023-01-1";
      }
      barchart(param).then((res) => {
        this.resChartData = res.data;
        this.initResChart();
      });
    },
    daygroup() {
      // 获取近14天数据
      var today = new Date();
      var dateArr = [];
      for (var i = 0; i < 15; i++) {
        var newDate = new Date(today.getTime() - i * 1000 * 60 * 60 * 24);
        var year = newDate.getFullYear();
        var month =
          parseInt(newDate.getMonth()) + 1 > 9
            ? parseInt(newDate.getMonth()) + 1
            : "0" + (parseInt(newDate.getMonth()) + 1);
        var day =
          newDate.getDate() > 9 ? newDate.getDate() : "0" + newDate.getDate();
        var fullDate = `${year}-${month}-${day}`;
        dateArr.push(fullDate);
      }

      dateArr.reverse();
      console.log(dateArr);

      daygroup({ beginCreateTime: dateArr[0] }).then((res) => {
        const accessSeries = [];
        const shareSeries = [];
        dateArr.forEach((p) => {
          // 查找接入数
          // res.data.filter(k => k)
          const integrations = res.data.filter(
            (k) =>
              k.type.indexOf("Integration") >= 0 &&
              this.parseTime(k.day, "{y}-{m}-{d}") === p
          );
          const shares = res.data.filter(
            (k) =>
              k.type.indexOf("Share") >= 0 &&
              this.parseTime(k.day, "{y}-{m}-{d}") === p
          );
          accessSeries.push(integrations.length);
          shareSeries.push(shares.length);
        });

        const xAxis = [];
        dateArr.forEach((p) => {
          p = this.parseTime(p, "{m}/{d}");
          xAxis.push(p);
        });

        this.initWholeChart(xAxis, accessSeries, shareSeries);
      });
    },
    initResChart() {
      const xAxis = this.resChartData.map((p) => p.xAxis);
      const data = this.resChartData.map((p) => p.value);

      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("res-chart"));
      // 指定图表的配置项和数据
      let option = {
        // title: {
        //   text: "ECharts 入门示例",
        // },
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        // legend: {
        //   data: ["销量"],
        // },
        xAxis: {
          data: xAxis,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true, //是否显示轴线
            lineStyle: {
              color: "#EBEFF3", //刻度线的颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#C1C7D0",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          position: "left",
          splitNumber: 0,
          alignTicks: true,
          axisLine: {
            show: true, //是否显示轴线
            lineStyle: {
              color: "#EBEFF3", //刻度线的颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BBBBBB",
              fontSize: "12px",
              fontFamily: "PingFang SC-Regular, PingFang SC",
              fontWeight: 500,
            },
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: "#F0F3F6",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "资源访问数",
            type: "bar",
            data: data,
            barWidth: 10,
            lineStyle: {
              color: "#3C70F5",
            },
            itemStyle: {
              color: "#3C70F5",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initResRatioChart() {
      let myChart = this.$echarts.init(document.getElementById("ratio-chart"));
      let option = {
        // title: {
        //   text: "Referer of a Website",
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        color: [
          "#2866FF",
          "#FFA82B",
          "#64C8BC",
          "#ef6567",
          "#f9c956",
          "#75bedc",
        ],
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        // },
        series: [
          {
            name: "共享资源比例",
            type: "pie",
            radius: ["50%", "70%"],
            data: [
              {
                value: this.statics.shareTableCount,
                name: "数据",
              },
              { value: this.statics.shareServiceCount, name: "服务" },
              { value: this.statics.literatureCount, name: "文献" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 16,
                },
              },
              emphasis: {
                show: true,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    initUserChart() {
      let myChart = this.$echarts.init(document.getElementById("user-chart"));
      let option = {
        // title: {
        //   text: "Referer of a Website",
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        color: [
          "#2866FF",
          "#FFA82B",
          "#91cd77",
          "#ef6567",
          "#f9c956",
          "#75bedc",
        ],
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        // },
        series: [
          {
            name: "用户数",
            type: "pie",
            radius: "70%",
            data: [
              {
                value: this.statics.userCount,
                name: "内部用户数",
              },
              { value: this.statics.companyCount, name: "外部企业数" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 16,
                },
              },
              emphasis: {
                show: true,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    initWholeChart(xAxis, accessData, shareData) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("whole-chart"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          itemHeight: 12,
          data: ["接入数", "共享数"],
        },
        xAxis: {
          data: xAxis,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true, //是否显示轴线
            lineStyle: {
              color: "#EBEFF3", //刻度线的颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#C1C7D0",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          position: "left",
          splitNumber: 0,
          alignTicks: true,
          axisLine: {
            show: true, //是否显示轴线
            lineStyle: {
              color: "#EBEFF3", //刻度线的颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BBBBBB",
              fontSize: "12px",
              fontFamily: "PingFang SC-Regular, PingFang SC",
              fontWeight: 500,
            },
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: "#F0F3F6",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "接入数",
            type: "line",
            data: accessData,
            symbol: "circle",
            symbolSize: 9,
            itemStyle: {
              normal: {
                color: "#2866FF",
                lineStyle: {
                  normal: {
                    color: "#2866FF",
                  },
                },
              },
            },
          },
          {
            name: "共享数",
            type: "line",
            data: shareData,
            symbol: "circle",
            symbolSize: 9,
            itemStyle: {
              normal: {
                color: "#FFA82B",
                lineStyle: {
                  normal: {
                    color: "#FFA82B",
                  },
                },
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background: #fafafa;

  .dashboard {
    display: flex;

    justify-content: space-between;

    .dashboard-item {
      width: 180px;
      height: 180px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 4px;
      // margin-right: 20px;
      background: url(../../../assets/images/dashboard-bg.png) no-repeat 20px
        30px #ffffff;
      background-size: 40px 43px;
      padding: 88px 0 0 20px;

      .value {
        font-size: 24px;
        font-family: DINPro-Bold, DINPro;
        font-weight: bold;
        color: #333333;
      }

      .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-top: 10px;
      }
    }
  }

  .second {
    width: 100%;
    height: 470px;
    display: flex;
    margin-top: 20px;

    .left {
      width: 66%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 6px;
      padding: 30px 20px;
    }

    .right {
      width: 33%;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 4px;
      margin-left: 21px;
      padding: 30px 20px;
      position: relative;

      .val {
        width: 100%;
        position: absolute;
        left: 0;
        top: 220px;
        text-align: center;
        font-size: 32px;
        font-family: DINPro-Bold, DINPro;
        font-weight: bold;
        color: #333333;
      }

      .label {
        width: 100%;
        position: absolute;
        left: 0;
        top: 270px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
  }

  .third {
    width: 100%;
    height: 414px;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;

    .left {
      width: 516px;
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 4px;
      padding: 30px 20px;
    }

    .right {
      flex-grow: 1;
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 4px;
      margin-left: 20px;
      padding: 30px 20px;
      position: relative;

      .radio {
        position: absolute;
        right: 20px;
        top: 23px;
      }
    }
  }

  .container-title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .content {
    width: 100%;
    height: calc(100% - 10px);
  }
}
</style>