<template>
  <div class="home">
    <div class="home-left">
      <el-row :gutter="8">
        <el-col :span="12">
          <el-card shadow="hover">
            鼠标悬浮时显示
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header" class="flexst">
              <h5 class="title">通知公告</h5>
              <i class="el-icon-s-unfold pointer"></i>
            </div>
            <ul>
              <li v-for="(item, index) in notice" :key="index" class="flexst">
                <p class="list-title">{{ item.title }}</p>
                <p class="marginZL15">{{ item.date }}</p>
                <p>{{ item.state }}</p>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="8" class="marginTop10">
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header" class="flexst">
              <h5 class="title">待办事项</h5>
              <i class="el-icon-s-unfold pointer"></i>
            </div>
            <ul>
              <li v-for="(item, index) in toList" :key="index" class="flexst">
                <p class="right15">{{ item.date }}</p>
                <p class="list-title">{{ item.title }}</p>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header" class="flexst">
              <h5 class="title">公司邮件</h5>
              <i class="el-icon-s-unfold pointer"></i>
            </div>
            <ul>
              <li v-for="(item, index) in mailList" :key="index" class="flexst">
                <p class="right15">{{ item.date }}</p>
                <p class="list-title">{{ item.title }}</p>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <el-card shadow="hover" class="marginTop10" :body-style="{ paddingRight: '6px' }">
        <div id="mountNode"></div>
      </el-card>
    </div>
    <div class="home-right">
      <calendar />
      <el-card shadow="hover" class="marginTop10">
        鼠标悬浮时显示
      </el-card>
    </div>
  </div>
</template>
<script>
import * as G2 from '@antv/g2'
import calendar from '@/components/calendar/index'
export default {
  name: 'home',
  components: { calendar },
  data () {
    return {
      chartData: [{
        year: '1991',
        value: 15468
      }, {
        year: '1992',
        value: 16100
      }, {
        year: '1993',
        value: 15900
      }, {
        year: '1994',
        value: 17409
      }, {
        year: '1995',
        value: 17000
      }, {
        year: '1996',
        value: 31056
      }, {
        year: '1997',
        value: 31982
      }, {
        year: '1998',
        value: 32040
      }, {
        year: '1999',
        value: 33233
      }],
      notice: [
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
          state: '未读'
        },
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
          state: '未读'
        },
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
          state: '未读'
        },
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
          state: '未读'
        },
      ],
      toList: [
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        },
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        }
        ,
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        }
        ,
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        }
      ],
      mailList: [
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        },
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        },
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        }
        ,
        {
          title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
          date: '2022-12',
        }
      ]
    }
  },
  mounted () {
    this.buildChart();
  },
  methods: {
    buildChart () {
      var chart = new G2.Chart({
        container: 'mountNode',
        height: 205
      });
      const e = document.createEvent('Event')
      e.initEvent('resize', true, true)
      window.dispatchEvent(e)
      chart.source(this.chartData);
      chart.scale({
        value: {
          min: 10000
        },
        year: {
          range: [0, 1]
        }
      });
      chart.axis('value', {
        label: {
          formatter: function formatter (val) {
            return (val / 10000).toFixed(1) + 'k';
          }
        }
      });
      chart.tooltip({
        crosshairs: true
      })
      chart.forceFit();
      chart.area().position('year*value').shape('smooth');
      chart.line().position('year*value').size(2).shape('smooth');
      chart.render();
    }
  }
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>