<template>
  <div style="height: 740px;">
    <div style="height: 100%;">

      <div style="display: flex;align-items: center;justify-content: stretch;width: 100%;height: 50%">

        <!--待办任务-->
        <div class="top-div ant-col-md-8">
          <a-card class="div-card" title="待办" >
            <div style="width: 100%;height: 100%;" v-show="showDate.noDate">
              暂无待办
            </div>
            <ul class="ul-li" style="list-style-type:none;padding-left: 0px;" v-show="showDate.showDate">
              <!--这里可以用for循环-->
              <!--用于存放从数据库中查出来的信息并对其进行循环-->
              <li v-for="(task,index) in tasks " style="width: 100%;">
                <!--类型-->
                  <a-button class="ant-col-md-4" type="primary" style="width: 80px;height: 25px;">{{task.type}}</a-button>
                  <span class="ant-col-md-8" :title='task.message' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 50px;line-height: 25px;">
                    {{task.message}}
                  </span>
                  <span class="ant-col-md-8" :title='task.time' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 60px;line-height: 25px;">
                    {{task.time}}
                  </span>
              </li>

            </ul>
          </a-card>
        </div>

        <!--站内消息-->
        <div class="top-div ant-col-md-8" >
          <a-card class="div-card" title="站内消息">
          </a-card>
        </div>

        <!--登录日志-->
        <div class="top-div ant-col-md-8">
          <a-card class="div-card"  title="登录日志">
            <ul class="ul-li" style="list-style-type:none;padding-left: 0px;">
              <!--这里可以用for循环-->
              <!--当一个用户登录后增加一条数据-->
              <li v-for="(loginlog,index) in loginlogs" style="width: 100%;">
                <!--类型-->
                <a-button class="ant-col-md-4" type="primary" style="width: 80px;height: 25px;">{{loginlog.department}}</a-button>
                <span class="ant-col-md-8" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 90px;line-height: 25px;">
                  {{loginlog.loginName}}
                </span>
                <span class="ant-col-md-8" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 20px;line-height: 25px;">
                  {{loginlog.loginTime}}
                </span>

              </li>
            </ul>
          </a-card>
        </div>

      </div>

      <div class="bottom-div" style="width: 100%;height: 70%;margin-top: 0.5%">
        <a-card style="width: 100%;height: 90%;border-radius: 10px;" title="全部应用">
          <ul class="apply-use" style="list-style-type: none;padding: 0px">
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>
            <li @click='processManage'  class="ant-col-md-4">
              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i> &nbsp;&nbsp;&nbsp;流程管理
            </li>




<!--            <li @click='materialManage' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
<!--              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;margin-right: 6%;"></i>物资管理-->
<!--            </li>-->
<!--            <li @click='statisticalAnalysis' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
<!--              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;margin-right: 6%;"></i>统计分析-->
<!--            </li>-->
<!--            <li @click='dictionaryLibrary' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
<!--              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;margin-right: 6%;"></i>标准字典库-->
<!--            </li>-->
<!--            <li @click='isystemManage' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
<!--              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;margin-right: 6%;"></i>系统管理-->
<!--            </li>-->
<!--            <li @click='statisticalTreatment' style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
<!--              <i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;margin-right: 6%;"></i>统计报表-->
<!--            </li>-->
          </ul>
        </a-card>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'HomePage',

  data() {
    return {
      //获取信息的地址
      showDate: {
        noDate: true ,
        showDate: false,
      },
      url: {

      },
      //此处存放数据,如果有数据就在待办任务处显示(现未写查询逻辑)
      tasks:[],
      loginlogs:[
        {
          department: "企划部",
          loginName: "李朝阳",
          loginTime: "2022.10.26 12:00:00"
        },
        {
          department: "企划部",
          loginName: "李朝阳",
          loginTime: "2022.10.26 12:00:00"
        }
      ]

    }
  },

  created() {
    // this.searchDoneData();
    // //当页面第一次生成时对进行tasks进行查询如果有数据则显示待办任务
    // //如果没有则显示暂无待办任务
    this.toBeDoneData();
  },


  methods: {
    // 跳转地址
    processManage(){
      this.$router.push('/activiti/applyHome')
    },
    materialManage(){
      this.$router.push('/modules/suppliesstronger')
    },
    statisticalAnalysis(){
      this.$router.push('/statistic_analysis/costStatistic')
    },
    dictionaryLibrary(){
      this.$router.push('/dictionaries/data')
    },
    isystemManage(){
      this.$router.push('/isystem/user')
    },
    statisticalTreatment(){
      this.$router.push('/report/ArchivesStatisticst')
    },
    // 对待办任务进行查询查看是否有待办数据
    searchDoneData(){
      // 待添加
    },
    // 判断是否有待办任务数据
    toBeDoneData(){
      this.tasks = [
        {
        type: "流程审批",
        message: "关于帐外物资的xxxx的审批流程",
        time: "2002.20.20 10:10:20"
        },
        {
          type: "流程审批",
          message: "关于帐外物资的xxxx的审批流程",
          time: "2002.20.20 10:10:20"
        }
      ]
      if (this.tasks != null){
        this.showDate.noDate = false;
        this.showDate.showDate = true;
      }
    },

  }
}
</script>

<style scoped>
@import url("http://at.alicdn.com/t/c/font_3733417_ws9m9bvag1h.css");


.top-div {
  height: 100%;
}

.div-card {
  width: 100%;
  height: 100%;
  font-weight: 200;
  border-radius: 5px;
}

.border-style{
  width: 40%;
  height: 50%;
  border: 1px solid lightgrey;
  border-radius: 10px;
  background-color: #ffffff;
  margin: 30px 0 0 50px;
  box-shadow: 0 0 2px 2px lightgrey;
  display: inline-block;
  padding: 2%;
  font-size: 30px;
}

.font{
  font-size: 12px;
  font-width: bold;
}

.ul-li li{
  margin-top: 10px;
  display: inline-flex;
  font-weight: bold;
}

.iconfont{
  vertical-align: -10%;
  /*background-color: #f28123;*/
  /*border-radius: 10px;*/
}
.apply-use li{
  text-align: center;
  margin-top: 20px;
}

.mouse:hover {
  cursor: pointer;
}

/deep/.ant-card-body {
  padding: 0px 24px 36px 24px;
}

/deep/.ant-card-head-title{
  font-weight: 600;
}

.bottom-div /deep/.ant-card-head{
  border-bottom: 0px;
}

i:hover {
  color: #5cb6ff;
}
</style>