<template>
  <div class="home">
    <div class="home-left">
      <el-row :gutter="8">
        <el-col :span="12">
          <el-card shadow="hover" :body-style="{ padding: '0' }" style="height:260px">
            <div slot="header" class="flexst">
              <h5 class="title">常办项目</h5>
              <el-button type="primary" @click="setFrequencyProject">配置常办</el-button>
            </div>
            <ul class="workbench flexst">
              <li v-for="(item, index) in projectList" @click="handleProject(item)" class="pointer" :key="index"
                :style="{ backgroundColor: newsListColor[index] }">
                <i class="el-icon-s-claim"></i>
                {{ item.name }}
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="height:260px">
            <div slot="header" class="flexst">
              <h5 class="title">系统通知</h5>
              <el-popover placement="right" width="50" trigger="hover">
                <ul class="pointer">
                  <li @click="$store.dispatch('tagsView/addView', moreNotice)">查看更多</li>
                </ul>
                <i class="el-icon-s-unfold pointer" slot="reference"></i>
              </el-popover>
            </div>
            <ul>
              <li v-for="(item, index) in noticeList" :key="index" @click="handleNotice(item)" class="flexst pointer">
                <p class="list-title">{{ item.noticeTitle }}</p>
                <p class="marginZL15">{{ item.noticePublishTime.substring(0, 10) }}</p>
                <p v-if="item.userBrowse == '1'" style="color:red">未读</p>
                <p v-else style="color:green">已读</p>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="8" class="marginTop10">
        <el-col :span="12">
          <el-card shadow="hover" style="height:215px">
            <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 todoList" :key="index" class="flexst">
                <p class="right15">{{ item.dealTime.substring(0, 10) }}</p>
                <p class="list-title" style="text-align:right">{{ item.dealBusiness }} ({{ item.dealStep + '环节' }})</p>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="height:215px">
            <div slot="header" class="flexst">
              <h5 class="title">政策法规</h5>
              <el-popover placement="right" width="50" trigger="hover">
                <ul class="pointer">
                  <li @click="$store.dispatch('tagsView/addView', moreNotice)">查看更多</li>
                </ul>
                <i class="el-icon-s-unfold pointer" slot="reference"></i>
              </el-popover>
            </div>
            <ul>
              <li v-for="(item, index) in policyList" @click="handleView(item.noticeFileUrl)" :key="index"
                class="flexst pointer">
                <p class="right15 list-title">{{ item.noticeTitle }}</p>
                <p>{{ item.createtime.substring(0, 10) }}</p>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <el-card shadow="hover" class="marginTop10 box-mountNode" id="mountNodeCon"
        :body-style="{ padding: '8px 6px 0 6px' }">
        <div id="mountNode"></div>
      </el-card>
    </div>
    <div class="home-right">
      <el-card shadow="hover">
        <div slot="header" class="flexst">
          <h5 class="title">用户登录时间</h5>
        </div>
        <div id="loginTime"></div>
      </el-card>
      <el-card class="marginTop10" shadow="hover" style="height:60%">
        <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 doneList.slice(0, 13)" :key="index" class="flexst dynamicInfo">
            <p class="right15">{{ item.dealTime.substring(0, 10) }}</p>
            <p class="list-title">{{ item.dealBusiness }} ({{ item.dealStep + '环节' }})</p>
          </li>
        </ul>
      </el-card>
    </div>
    <addDialog ref="addProject" v-model="projectDialog" :bindItem="projectList" />
  </div>
</template>
<script>
  import * as G2 from '@antv/g2'
  import vueSeamlessScroll from "vue-seamless-scroll"
  import { getHomeNoticeList, getHomeTodoList, getHomeDoneList, getHomeFrequentProjects } from "@/api/user.js";
  import { setReadStatus } from '@/api/system'
  import addDialog from "./components/addProject.vue";
  export default {
    name: 'home',
    components: { vueSeamlessScroll, addDialog },
    data () {
      return {
        listData: [
          {
            icon: '',
            title: '任务'
          },
          {
            icon: '',
            title: '邮件'
          },
          {
            icon: '',
            title: '消息'
          },
          {
            icon: '',
            title: '日历'
          },
          {
            icon: '',
            title: '常用功能'
          },
          {
            icon: '',
            title: '申请'
          }
        ],
        newsListColor: ['#61AEFF', '#43DEB3', '#F3C143', '#F09936', '#9C92FF', '#589FFF',],
        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: '1996',
          value: 31056
        }],
        // 系统通知
        noticeData: {},
        noticeList: [],//通知列表
        todoList: [],//待办列表
        doneList: [],//已办列表
        policyList: [],//法律法规列表
        projectList: [],//常办项目列表
        projectDialog: false,
        moreNotice: {
          fullPath: '/system/xttz/xttzview',
          name: '系统通知',
          path: '/system/xttz/xttzview',
          meta: { title: '系统通知' }
        },
      }
    },
    mounted () {
      this.buildChart();//构建图标
      this.loginTimeChart()
      this.queryTodoList();//获取待办列表
      this.queryDoneList();//获取已办列表
      this.queryNoticeList();//获取通知、法律法规列表
      this.queryProjectList();//获取常办项目列表
    },
    methods: {
      handleProject (item) {
        let url = item.uri.split('/').slice(0, 3).join('/')
        this.$router.push(url)
      },
      handleView (pdfUrl) {
        const href = pdfUrl
        window.open(href, '_blank');
      },
      //获取待办事项列表
      queryTodoList () {
        getHomeTodoList().then(res => {
          if (res.result) {
            this.todoList = res.result
          }
        })
      },
      //获取已办事项列表
      queryDoneList () {
        getHomeDoneList().then(res => {
          if (res.result) {
            this.doneList = res.result
          }
        })
      },
      //获取通知列表
      queryNoticeList () {
        getHomeNoticeList().then(res => {
          if (res.result) {
            this.noticeList = res.result.noticeList
            this.noticeList.forEach(item => {
              item.noticePublishTime = this._timedate(item.noticePublishTime)
            })
            this.policyList = res.result.policyList
          }
        })
      },
      //获取常办项目列表
      queryProjectList () {
        getHomeFrequentProjects().then(res => {
          if (res.result && res.result.length > 0) {
            this.projectList = res.result
          } else {
            this.projectList = this.listData
          }
        })
      },
      _timedate (d) {
        var td = new Date();
        td = new Date(td.getFullYear(), td.getMonth(), td.getDate());
        var od = new Date(d);
        od = new Date(od.getFullYear(), od.getMonth(), od.getDate());
        var xc = (od - td) / 1000 / 60 / 60 / 24;
        if (xc == -1) {
          return "昨天";
        } else if (xc == 0) {
          return "今天";
        } else {
          return d
        }
      },
      buildChart () {
        let height = document.getElementById("mountNodeCon").offsetHeight - 20
        var chart = new G2.Chart({
          container: 'mountNode',
          height: height
        });
        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();
      },
      loginTimeChart () {
        var data = [{
          item: '用户1',
          count: 40,
          percent: 0.4
        }, {
          item: '用户2',
          count: 21,
          percent: 0.21
        }, {
          item: '用户3',
          count: 17,
          percent: 0.17
        }]
        var chart = new G2.Chart({
          container: 'loginTime',
          height: 260
        });
        chart.source(data, {
          percent: {
            formatter: function formatter (val) {
              val = val * 100 + '小时';
              return val;
            }
          }
        });
        chart.coord('theta');
        chart.tooltip({
          showTitle: false
        });
        chart.interval().position('percent').color('item').label('percent', {
          offset: -40,
          textStyle: {
            textAlign: 'center',
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)'
          }
        }).tooltip('item*percent', function (item, percent) {
          percent = percent * 100 + '小时';
          return {
            name: item,
            value: percent
          };
        }).style({
          lineWidth: 1,
          stroke: '#fff'
        });
        chart.forceFit();
        chart.render();
      },
      //跳转到更多通知列表页面
      jumpToMoreNotice () {
        console.log(this.$route);
      },
      //配置常办项目
      setFrequencyProject () {
        this.projectDialog = true;
      },
      handleNotice (item) {
        setReadStatus({ bsmNotice: item.bsmNotice }).then(res => {
          if (res.code == 200) {
            this.queryNoticeList()
          }
        })
        this.$alertMes(item.noticeTitle, item.noticeContent)
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "./index.scss";
  /deep/.el-card__header {
    padding: 8px 15px;
  }

  /deep/.el-card__body {
    padding: 3px 10px 5px 10px;
    overflow: hidden;
  }
</style>