<template>
  <div class="detail">
    <div class="pc-main">
      <Tabs v-model="tab">
        <TabPane label="浏览量统计" name="1"></TabPane>
        <TabPane label="参与人数统计" name="2"></TabPane>
        <TabPane label="分享人数统计" name="2"></TabPane>
      </Tabs>
      <div class="dateBox">
        <DatePicker
          :value="value2"
          format="yyyy/MM/dd"
          type="daterange"
          placement="bottom-end"
          placeholder="Select date"
          style="width: 200px"
        ></DatePicker>
      </div>
      <div style="height: 310px;" ref="dom"></div>
      <Card shadow style="margin-top:30px">
        <p slot="title">签到人数比</p>
        <div class="dateBox">
          <DatePicker
            :value="value2"
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            placeholder="Select date"
            style="width: 200px"
          ></DatePicker>
        </div>
        <Row>
          <Col span="18">
            <chart-pie style="height: 350px;" :value="pieData"></chart-pie
          ></Col>
          <Col span="6" style="padding-left:20px">col-12</Col>
        </Row>
      </Card>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { ChartPie } from "_c/charts";
import { on, off } from "@/libs/tools";
export default {
  name: "categories",
  components: {
    ChartPie
  },
  data() {
    return {
      pieData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" }
      ],
      dom: null,
      tab: "1"
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    }
  },
  mounted() {
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985"
          }
        }
      },
      grid: {
        top: "3%",
        left: "1.2%",
        right: "1%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "游戏/视频",
          type: "line",
          stack: "总量",
          areaStyle: {
            normal: {
              color: "#0C17A6"
            }
          },
          data: [379, 268, 354, 269, 310, 478, 358]
        }
      ]
    };
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom);
      console.log(this.dom);
      this.dom.setOption(option);
      on(window, "resize", this.resize);
    });
  },
  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>
