<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:302px">
            <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" class="pointer" :key="index"
                :style="{ backgroundColor: newsListData[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:302px">
            <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:247px">
            <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:247px">
            <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">
      <calendar />
      <el-card shadow="hover" class="marginTop10" style="height:345px">
        <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" :key="index" class="flexst">
            <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 calendar from '@/components/Calendar/index'
import vueSeamlessScroll from "vue-seamless-scroll"
import { getHomeNoticeList, getHomeTodoList, getHomeDoneList,getHomeFrequentProjects } from "@/api/home.js";
import { setReadStatus } from "@/api/notice.js";
import addDialog from "./components/addProject.vue";
export default {
  name: 'home',
  components: { calendar, vueSeamlessScroll,addDialog },
  data () {
    return {
      newsListData: ['#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.queryTodoList();//获取待办列表
    this.queryDoneList();//获取已办列表
    this.queryNoticeList();//获取通知、法律法规列表
    this.queryProjectList();//获取常办项目列表
  },
  methods: {
    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){
          this.projectList = res.result
        }
      })
    },
    _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();
    },
    //跳转到更多通知列表页面
    jumpToMoreNotice(){
      console.log(this.$route);
      
    },
    //配置常办项目
    setFrequencyProject(){
      this.projectDialog = true;
    },
    handleNotice (item) {
      this.$alertMes(item.noticeTitle, item.noticeContent)
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./index.scss";

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