<template>
  <div class="detail">
    <div class="pc-main">
      <Card shadow>
        <p slot="title">早起人数统计</p>
        <div class="dateBox">
          <DatePicker
            @on-change="search"
            v-model="date"
            format="yyyy-MM-dd"
            type="daterange"
            placement="bottom-end"
            placeholder="Select date"
            style="width: 200px"
          ></DatePicker>
        </div>
        <Row>
          <div style="height: 310px;" ref="dom"></div>
        </Row>
      </Card>
    </div>
  </div>
</template>

<script>
import { queryList } from "@/api/clock/activityClocks";
import echarts from "echarts";
import { on, off } from "@/libs/tools";
export default {
  name: "categories",
  components: {},
  data() {
    return {
      date: ["2021-01-01", "2021-09-15"],
      dom: null,
      tab: "1"
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    search(p) {
      let params = {
        language: "cn",
        startDate: p && p.length ? p[0] : "2021-01-01",
        endDate: p && p.length ? p[1] : "2021-09-15"
      };
      queryList(params).then(res => {
        const option = {
          tooltip: {
            trigger: "axis"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: res.map(p => {
              return p.group_date;
            })
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "报名人数",
              type: "line",
              stack: "总量",
              data: res.map(p => {
                return p.apply_num;
              })
            },
            {
              name: "签到人数",
              type: "line",
              stack: "总量",
              data: res.map(p => {
                return p.clock_num;
              })
            }
          ]
        };
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom);
          console.log(this.dom);
          this.dom.setOption(option);
          on(window, "resize", this.resize);
        });
      });
    }
  },
  mounted() {
    this.search();
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  }
};
</script>

<style lang="less" scoped>
.pc-main {
  padding: 20px;
  //margin-top: 20px;
  background-color: #fff;
  .dateBox {
    margin: 10px 0 20px 0;
    text-align: right;
  }
}
.btn {
  text-align: right;
  width: 80%;
  position: fixed;
  background-color: #fff;
  bottom: 10px;
  padding: 10px 30px;
}
</style>
