<template>
  <div class="home-user-info">
    <div class="info-left">
      <div v-if="data.user" class="name">
        {{ data.user.fullname }} , {{ hint }}!
      </div>
      <div class="address">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            @click.native="handleClick(index)"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div class="info-right">
      <div class="today">
        <span class="now">{{ year }}年{{ month }}月{{ day }}日</span>
        <span class="total">今天剩余工作总计</span>
      </div>
      <div class="data-list">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="item"
          @click="handleTask(item)"
        >
          <div v-if="item" class="title">{{ item.dataContent }}</div>
          <div v-if="item" class="num">{{ item.dataText }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'Homeuserinfo',
    props: {
      data: {
        type: Object,
        default: () => {},
      },
      firstAddress: {
        type: String,
        default: 'http://localhost:8081/front/matter/new',
      },
      secondAddress: {
        type: String,
        default: 'http://localhost:8081/front/matter/myTask',
      },
      thirdAddress: {
        type: String,
        default: 'http://localhost:8081/front/matter/apply',
      },
    },
    data() {
      return {
        activities: [
          {
            content: '1. 新建流程',
            address: `/matter/new`,
          },
          {
            content: '2. 新建任务',
            address: '/matter/myTask',
          },
          {
            content: '3. 新建项目',
            address: '',
          },
        ],
        dataList: [],
        time: new Date().getHours(),
        year: moment().get('year'),
        month: moment().get('month') + 1,
        day: moment().get('date'),
      }
    },
    computed: {
      hint: {
        get() {
          if (this.time >= 6 && this.time < 12) {
            return '早上好'
          } else if (this.time == 12) {
            return '中午好'
          } else if (this.time > 12 && this.time < 18) {
            return '下午好'
          } else {
            return '晚上好'
          }
        },
      },
    },
    created() {
      const { myTaks, myAlready, myRequest, myNoticeRead, myAccordingMatters } =
        this.data
      this.dataList.push(
        myTaks,
        myAlready,
        myRequest,
        myNoticeRead,
        myAccordingMatters
      )
    },
    methods: {
      handleClick(index) {
        let url
        if (index == 0) {
          url = this.firstAddress
        }
        if (index == 1) {
          url = this.secondAddress
        }
        if (index == 2) {
          url = this.thirdAddress
        }
        url = url.slice(url.indexOf('front') + 5)
        this.$router.push(url)
      },
      handleTask(item) {
        let path = '/'
        const { dataContent } = item
        if (dataContent == '我的待办') {
          path = '/matter/myTask?tabActiveName=todo'
        } else if (dataContent == '已办事宜') {
          path = '/matter/myTask?tabActiveName=done'
        } else if (dataContent == '我的请求') {
          path = '/matter/apply'
        } else if (dataContent == '我的待阅') {
          path = '/matter/circulateMatter'
        } else if (dataContent == '转办代理') {
          path = '/matter/myTask?tabActiveName=myDelegate'
        }
        this.$router.push({ path })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home-user-info {
    display: flex;
    // justify-content: s;
    padding: 20px 20px 25px;
    .info-left {
      width: 220px;
      .name {
        // margin: 5px 0;
        // line-height: 30px;
        color: #333;
        font-size: 14px;
        font-weight: 700;
      }
      .address {
        height: 100px;
        width: 215px;
        border-right: 1px solid #e5e8ec;
        .el-timeline {
          margin: 10px 0 0;
          font-size: 12px;
          padding: 15px 0px 20px 40px;
          li {
            padding-bottom: 6px;
            cursor: pointer;
            ::v-deep {
              .el-timeline-item__node--normal {
                width: 10px;
                height: 10px;
              }
              .el-timeline-item__tail {
                left: 4px;
                height: 140%;
                border-left: 1px solid #eee;
              }
              .el-timeline-item__node {
                background-color: #fff;
                border: 1px solid #eee;
              }
              .el-timeline-item__content:hover {
                color: #5dacff;
              }
            }
          }
        }
      }
    }
    .info-right {
      margin-left: 13px;
      font-size: 14px;
      width: 85%;
      .today {
        padding-left: 25px;
        .now {
          margin-right: 20px;
          color: #838a9d;
        }
        .total {
          font-weight: 500;
          font-size: 16px;
        }
      }
      .data-list {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        .item {
          text-align: center;
          cursor: pointer;
          .title {
            font-size: 14px;
            margin-bottom: 10px;
          }
          .num {
            font-size: 30px;
            font-weight: 700;
          }
        }
      }
    }
  }
</style>