<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="char-layout card-hover card-shadow">
      <!-- <div style="height:48px;line-height:48px;border-bottom: 1px solid rgb(231 226 226);" class="card-date">
        <span class="date-item" key="1" :class="{active:'1'===dateActive}" @click="dataClick('1')">本年</span>
        <span class="date-item" key='2' :class="{active:'2'===dateActive}" @click="dataClick('2')">本月</span>
        <span class="date-item" key='3' :class="{active:'3'===dateActive}" @click="dataClick('3')">本周</span>
        <span class="date-item" key='4' :class="{active:'4'===dateActive}" @click="dataClick('4')">今日</span>
        <span><a-range-picker v-model="formData.dateRange" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" @change="dateChange" :placeholder="['开始时间', '结束时间']" /></span>
      </div> -->
      <div style="display:flex;height:312px;padding:6px">
        <div style="width:50%;">
          <barChart v-model="barData" :title="'申报项目统计'" :subtitle="''" />
        </div>
        <div style="width:50%;">
          <pieChart v-model="pieData" :title="'项目专业类别统计'" :subtitle="'专业分类'" />
        </div>
      </div>
    </div>
    <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: "dashboardGov",
  components: {
    barChart, pieChart, cardCount, cardTopCount, msg
  },
  data () {
    return {
      formData: {
        dateStart: '',
        dateEnd: '',
        dateRange: [],
      },
      pieData: [],
      barData: [],
      notice: null,
      reportYear: null,
      noticeView: false,
      noticeId: null,
      dateActive: '1',
    }
  },
  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
          this.changeType()
        }
      }).catch(() => { })
    },
    changeType () {
      this.getTreeCodeProjectCount()
      this.getKnowledgeCount()
    },
    getTreeCodeProjectCount () {
      this.$api.statistical.getTreeCodeProjectCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setBarData(data)
        }
      }).catch(() => { })
    },
    getKnowledgeCount () {
      this.$api.statistical.getKnowledgeCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setPieData(data)
        }
      }).catch(() => { })
    },
    dataClick (type) {
      this.dateActive = type
    },
    setBarData (list) {
      let dataList = []
      for (let i = 0; i < list.length; i++) {
        if (i == 0) {
          list[i].title = '直属单位'
        } else {
          list[i].title = list[i].title.replace('卫生健康局', '')
        }
        dataList.push({ value: list[i].count1, name: list[i].title })
      }
      this.barData = dataList
    },
    setPieData (list) {
      let dataList = []
      list.forEach(e => {
        dataList.push({ value: e.count1, name: e.title })
      })
      this.pieData = dataList
    },
    dateChange (dates, dateStrings) {
      if (dateStrings[0] != '' && dateStrings[1] != '') {
        this.formData.dateStart = dateStrings[0]
        this.formData.dateEnd = dateStrings[1]
      }
    },
    msg (id) {
      this.noticeId = id
      this.noticeView = true
    }
  },
  watch: {
    projType: {
      handler (value) {
        if (value) {
          this.changeType()
        }
      }
    }
  }
}
</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>