<template>
  <div class="indexPage H100">
    <div class="head_box">
      <h6>首页</h6>
      <div class="headContent">
        <div class="avator">
          <img :src="loginInf.avatar" alt="">
        </div>
        <div class="r-float title">
          <p id="greetings">{{greetings}}</p>
          <span class="span">{{loginInf.bankBranchName}}</span><span class="span"> |</span>
          <span class="span">{{loginInf.roleName}}</span>
        </div>
      </div>
    </div>
    <div class="content_box">
      <div class="scrool">
        <div class="form_box">
        <el-card class="box-card" v-if="roleId == '2' || roleId == '3'">
          <div slot="header" class="clearfix">
            <span>待办事件</span>
          </div>
          <div class="text item">
            <!--{{'列表内容 ' + o }}-->
            <el-table style="width: 100%;" :data="tableData2" >
              <el-table-column prop="name" show-overflow-tooltip label="待办项" ></el-table-column>
              <el-table-column prop="creatorName" label="创建人" ></el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="160">
                <template slot-scope="scope">
                  {{scope.row.updateTime | dateformat('YYYY-MM-DD HH:mm:ss')}}
                </template>
              </el-table-column>
              <el-table-column prop="typeName" label="事件类型" ></el-table-column>
              <el-table-column prop="branchName" show-overflow-tooltip label="网点名称" ></el-table-column>
              <el-table-column prop="type" label="操作" >
                <template slot-scope="scope">
                  <el-button @click.native.prevent="detailsRow(scope.$index)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import qs from "qs";

  export default {
    data() {
      return {
        tableData2: [],
        loginInf: {},
        greetings: '',
        roleId: '',
        bankBranchId: ''
      }
    },
    computed: {},
    mounted() {
      this.initData();
    },
    components: {},
    methods: {
      initData() {
        let inf = {
          avatar: '',
          username: '',
          roleName: '',
          bankBranchName: '',
        }
        inf.avatar = localStorage.getItem('avatar');
        inf.username = localStorage.getItem('username');
        inf.roleName = localStorage.getItem('roleName');
        inf.bankBranchName = localStorage.getItem('bankBranchName');
        this.loginInf = inf;
        this.roleId = localStorage.getItem('roleId');
        this.userId = localStorage.getItem('userId');
        this.bankBranchId = localStorage.getItem('bankBranchId');
        this.greet();
        this.getIndexList();
      },
      //判断时间改变问候语
      greet() {
        let date = new Date();
        let h = date.getHours(); //获取小时
        let username = this.loginInf.username;
        if (h >= 22 || h < 4) {
          this.greetings = '深夜了,' + username + ',注意身体哦...';
        } else if (h >= 4 && h < 7) {
          this.greetings = '早晨好,' + username + ',新的一天工作顺利..';
        } else if (h >= 7 && h < 12) {
          this.greetings = '上午好,' + username + ',祝您开心每一天..';
        } else if (h >= 12 && h < 13) {
          this.greetings = '中午好,' + username + ',要注意午休哦..';
        } else if (h >= 13 && h < 18) {
          this.greetings = '下午好,' + username + ',中午养足了精神吗?';
        } else if (h >= 18 && h < 22) {
          this.greetings = '晚上好,' + username + ',工作不要太晚哦..';
        }

      },
      detailsRow(index) {
        if(this.tableData2) {
          if (this.tableData2[index].type == 1) {
            this.$router.push({
              path: '/auditMsg',
              query: {id: this.tableData2[index].id, typeName: this.tableData2[index].typeName}
            });
          } else if (this.tableData2[index].type == 3 || this.tableData2[index].type == 4) {
            this.$router.push({
              path: '/auditProductActivity',
              query: {id: this.tableData2[index].id, typeName: this.tableData2[index].typeName}
            });
          } else if (this.tableData2[index].type == 2) {
            this.$router.push({
              path: '/auditMap',
              query: {id: this.tableData2[index].id, typeName: this.tableData2[index].typeName}
            });
          }
        }
      },
      getIndexList(){
        let _this = this;
        let params = {
          roleId: _this.roleId,
          userId: _this.userId,
          bankBranchId: _this.bankBranchId
        }
        if(_this.roleId == '2' || _this.roleId == '3') {
          _this.$https({
            method: 'get',
            url: 'index/getIndexList',
            authType: this.backToken
          },params).then((res) => {
              if (res.data.status !== 500) {
                _this.tableData2 = res.data;
              }
            }, (error) => {
              console.log(error)
            }
          )
        }
      },
    },
  }
</script>

<style lang="less">
  @import '../../style/common';

  .indexPage {
    /*width: 100%;*/
    /*height: 100%;*/
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    .head_box {
      height: 135px !important;
    }
    .content_box {
      min-height: calc(100% - 135px);
      height: calc(100% - 135px) !important;
      .scrool {
        width: 100%;
        height: calc(100% + 2px);
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
    h6 {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
    .headContent {
      .avator {
        width: 72px;
        height: 72px;
        display: inline-block;
        border-radius: 50%;
        /*background-color: #ddeaff;*/
        img {
          height: 100%;
        }
      }
      div.title {
        width: calc(100% - 96px);
        #greetings {
          font-size: 20px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 10px
        }
      }

    }
    .span {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }
    .form_box {
      width: 100%;
      min-height: calc(100% - 84px);
      box-sizing: border-box;
      .el-card.box-card.is-always-shadow {
        width: 100%;
        min-height: 65vh;
        .el-card__body {
          padding: 10px 20px !important;
          .text::-webkit-scrollbar {
            display: none;
          }
          .el-table {
            .el-table__body-wrapper {
              .el-table__body {
                width: 100% !important;
                tbody {
                  .el-table__row td {
                    padding: 0px;
                    border-bottom: 0px;
                    /*.cell{*/
                      /*overflow: hidden;*/
                      /*-webkit-line-clamp:1;*/
                      /*text-overflow: ellipsis;*/
                      /*display: -webkit-box;*/
                      /*! autoprefixer: off */
                      /*-webkit-box-orient: vertical;*/
                      /* autoprefixer: on */
                    /*}*/
                  }
                }
              }
            }
          }
        }
      }

    }
  }
</style>