<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top"> </el-col>
        <el-col :span="24" class="main">
          <div id="canvas"></div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Bar, StackedBar, Donut, Column, StateManager } from '@antv/g2plot';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: room } = createNamespacedHelpers('room');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      roomInfo: [],
    };
  },
  async created() {
    await this.search();
  },
  // mounted() {
  //   this.tongji();
  // },
  methods: {
    ...room(['query']),
    async search() {
      const data = await this.query();
      this.$set(this, `roomInfo`, data.data);
      this.tongji();
    },
    tongji() {
      const container = document.getElementById('canvas');
      const chartsWraper = document.createElement('div');
      chartsWraper.style.width = '100%';
      chartsWraper.style.height = '900px';
      container.appendChild(chartsWraper);
      const canvasDiv1 = document.createElement('div');
      canvasDiv1.style.width = '40%';
      canvasDiv1.style.height = '300px';
      canvasDiv1.style.marginLeft = '0px';
      canvasDiv1.style.marginTop = '0px';
      canvasDiv1.style.float = 'left';
      canvasDiv1.id = 'canvas1';
      chartsWraper.appendChild(canvasDiv1);

      const canvasDiv2 = document.createElement('div');
      canvasDiv2.style.width = '40%';
      canvasDiv2.style.height = '300px';
      canvasDiv2.style.marginLeft = '10px';
      canvasDiv2.style.marginTop = '0px';
      canvasDiv2.style.float = 'left';
      canvasDiv2.id = 'canvas2';
      chartsWraper.appendChild(canvasDiv2);

      const canvasDiv3 = document.createElement('div');
      canvasDiv3.style.width = '90%';
      canvasDiv3.style.height = '300px';
      canvasDiv3.style.marginLeft = '10px';
      canvasDiv3.style.marginTop = '0px';
      canvasDiv3.style.float = 'left';
      canvasDiv3.id = 'canvas3';
      chartsWraper.appendChild(canvasDiv3);

      const data = [];
      for (const room of this.roomInfo) {
        data.push({ room: room.name, count: room.number });
      }
      // 初始化state manager
      const stateManager = new StateManager();
      //渲染图表
      const bar = new StackedBar(canvasDiv1, {
        title: {
          visible: true,
          text: '房间观看人数',
        },
        data,
        xField: 'count',
        yField: 'room',
        tooltip: {
          visible: false,
        },
        xAxis: {
          formatter: v => v + '人',
        },
        color: ['#945fb9', '#1e9493', '#ff9845'],
      });
      bar.render();
      bar.bindStateManager(stateManager, {
        setState: [
          {
            event: 'bar:click',
            state: e => {
              const origin = e.target.get('origin').data;
              const state = { name: 'room', exp: origin.room };
              return state;
            },
          },
        ],
        onStateChange: [
          {
            name: 'room',
            callback: (d, plot) => {
              plot.setSelected(d, {
                stroke: 'black',
                lineWidth: 1,
              });
              plot.setDefault(
                origin => {
                  return origin[d.name] !== d.exp;
                },
                {
                  stroke: null,
                }
              );
            },
          },
        ],
      });
      const donut = new Donut(canvasDiv2, {
        title: {
          visible: true,
          text: '房间观看总数',
        },
        data,
        angleField: 'count',
        colorField: 'room',
        label: {
          visible: false,
        },
        radius: 0.9,
        annotation: [{ type: 'centralText', onActive: true }],
      });
      donut.render();
      donut.bindStateManager(stateManager, {
        setState: [
          {
            event: 'donut:click',
            state: e => {
              const origin = e.target.get('origin').data;
              const state = { name: 'room', exp: origin.room };
              return state;
            },
          },
        ],
        onStateChange: [
          {
            name: 'room',
            callback: (d, plot) => {
              plot.setSelected(d, {
                strokeStyle: '#000000',
                lineWidth: 1,
              });
              plot.setDefault(
                origin => {
                  return origin[d.name] !== d.exp;
                },
                {
                  stroke: null,
                }
              );
            },
          },
        ],
      });

      const area = new Column(canvasDiv3, {
        title: {
          visible: true,
          text: '房间观看趋势',
        },
        forceFit: true,
        data,
        xField: 'room',
        yField: 'count',
        padding: 'auto',
        meta: {
          type: {
            alias: '房间',
          },
          sales: {
            alias: '人数',
          },
        },
      });
      area.render();

      area.bindStateManager(stateManager, {
        setState: [
          {
            event: 'area:click',
            state: e => {
              const origin = e.target.get('origin').data;
              const state = { name: 'room', exp: origin.room };
              return state;
            },
          },
        ],
        onStateChange: [
          {
            name: 'room',
            callback: (d, plot) => {
              plot.setSelected(d, {
                strokeStyle: '#000000',
                lineWidth: 1,
              });
              plot.setDefault(
                origin => {
                  return origin[d.name] !== d.exp;
                },
                {
                  stroke: null,
                }
              );
            },
          },
        ],
      });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
