<template>
  <div class="app-content">
    <div class="notice_msg  card-hover card-shadow" v-if="!!notice">
      <span href="" style="display:block;position: relative;height:38px">
        <img style=" position:absolute;top:9px;left:10px;" src="../../../../static/images/tz.png">
        <a style="position:absolute;top:7px;left: 34px;" @click="msg(notice.id)" :title="'添加时间：'+notice.created">{{notice.title}}</a>
      </span>
    </div>
    <card-count :reportYear="reportYear" />
    <div class="meun-msg" v-if="false">
      <div class="msg-item">
        <div class="logo-ft">
          <div class="logo">
            <a-icon type="message" class="toolbar-icon icon_f" />
          </div>
        </div>
        <div class="msg-nav">
          <div class="nav-ct">2023-07-28系统更新通知</div>
          <div class="nav-date">2023-07-28</div>
        </div>
      </div>
    </div>
    <a-modal v-model="noticeView" title="通知查看" width="80%" :dialog-style="{ top: '8%' }" :footer="null" destroyOnClose>
      <msg v-model="noticeId"></msg>
    </a-modal>
  </div>
</template>
<script>
import msg from '@/views/notice/components/msg'
import barChart from '@/views/home/components/barChart'
import pieChart from '@/views/home/components/pieChart'
import cardCount from '@/views/home/components/cardCount'
import cardTopCount from '@/views/home/components/cardTopCount'
import { getType } from '@/views/utils/auth'
export default {
  name: "dashboardUnit",
  components: {
    barChart, pieChart, cardCount, cardTopCount, msg
  },
  data () {
    return {
      notice: null,
      reportYear: null,
      noticeView: false,
      noticeId: null,
    }
  },
  created () {
    this.getLatestNotice()
    this.getYear()
  },
  computed: {
    projType: {
      get () {
        return this.$store.state.app.projType
      },
      set () {
      }
    },
  },
  methods: {
    getLatestNotice () {
      this.$api.notice.getLatestNotice().then(({ data = {} }) => {
        if (data) {
          this.notice = data
        }
      }).catch(() => { })
    },
    getYear () {
      this.$api.batch.getCurrentYearBatch({ type: 1, projType: getType() }).then(({ data = {} }) => {
        if (data) {
          this.reportYear = data.year
        }
      }).catch(() => { })
    },
    msg (id) {
      this.noticeId = id
      this.noticeView = true
    }
  },
  watch: {
    projType: {
      handler (value) {
        
      }
    }
  }
}
</script>
<style lang="less" scoped>
.meun-msg {
  margin: 6px 6px;
  min-height: 200px;
  border: 1px solid #e8e8e8;
  .msg-item {
    height: 60px;
    border-bottom: 1px dashed #e8e8e8;
    .logo-ft {
      display: inline-block;
      width: 60px;
      height: 60px;
      position: relative;
      .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: #1890ff;
        border-radius: 50%;
        padding: 5px 8px 8px 7px;
        .anticon {
          font-size: 16px;
          color: #fff !important;
        }
      }
    }
    .msg-nav {
      display: inline-block;
      width: calc(100% - 60px);
      .nav-ct {
        width: 100%;
        line-height: 30px;
        overflow-wrap: break-word;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .nav-date {
        width: 100%;
        font-size: 12px;
        height: 30px;
        overflow-wrap: break-word;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.notice_msg {
  border-radius: 5px;
  margin: 10px 6px 2px 6px;
  height: 38px;
  border: 1px solid #e6ebf5;
  // background: #f5f5f5;
  img {
    animation: fadeInOut 1.2s infinite 0.2s;
  }
}
/*动画*/
@keyframes fadeInOut {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
.char-layout {
  margin: 0 6px;
  // padding: 10px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  .card-date {
    text-align: right;
    .ant-calendar-picker {
      width: 240px !important;
    }
    span {
      display: inline-block;
      line-height: 48px;
      padding: 0 5px;
      cursor: pointer;
    }
    span:last-child {
      margin-right: 10px;
    }
    // .date-item {
    //   color: #000;
    // }
    .date-item.active {
      color: #1890ff;
    }
  }
}
.card-shadow {
  box-shadow: 3px 3px 5px #d3d8dfc2;
}
.card-hover {
  transition: all 0.1s linear 0s;
}
.card-hover:hover {
  border: 1px solid rgb(205, 207, 207) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translate(0, -0.1px);
  background: #f8f9fa;
  // cursor: pointer;
}
</style>