<!-- 主页模块 主页一览-->
<template>
  <div>
    <div>
      <!--左侧-->
      <div class="home-left">
        <div class="hello-title">{{ helloTitle }}，{{ helloAdmin }}</div>
        <!--系统消息-->
        <div class="commonly-used">
          <div class="label-box">
            <span class="label-title">系统消息</span>
          </div>
          <span class="see-more cursor" @click="chakan">查看更多</span>
          <el-row>
            <el-col
              v-for="(value, key) in list"
              :key="key"
              :span="24"
              class="cursor"
            >
              <div class="message-box">
                <span class="message-text" @click="goMessageDetail(value)">{{
                  value.systemMessageTitle
                }}</span>
                <span v-if="value.readType == '0'" class="new-icon">NEW</span>
                <span class="message-time">{{
                  value.createDate.split(" ")[0]
                }}</span>
              </div>
            </el-col>
            <div class="no-msg-group" v-if="!list || list.length == 0">
              暂无消息
            </div>
          </el-row>
        </div>
        <!--常用入口-->
        <div class="commonly-used">
          <div class="label-box">
            <span class="label-title">常用入口</span>
          </div>
          <div class="business-jump cursor" @click="jumpOrgAddMan">
            <el-button class="go-account cursor">开通员工账号</el-button>
          </div>
          <!--<div class="business-jump cursor" @click="toRescue">-->
          <!--<el-button class="go-account cursor">开通船端同步</el-button>-->
          <!--</div>-->
        </div>
      </div>
      <!--右侧-->
      <div class="home-right">
        <!--公司logo展示-->
        <div class="business-setting">
          <div class="business-img">
            <img :src="companyLogo" />
          </div>
          <div class="business-title">{{ homeContent.companyName }}</div>
          <router-link
            class="business-jump cursor"
            :to="{ name: 'companyInfoIndex' }"
            >企业设置</router-link
          >
        </div>
        <!--设置开通数目-->
        <el-row class="number-setting">
          <el-col :span="8">
            <span class="number-icon">{{ homeContent.staffNum }}</span>
            <span class="number-text">员工使用人数</span>
          </el-col>
          <el-col :span="8">
            <span class="number-icon">{{ homeContent.vesselNum }}</span>
            <span class="number-text">船舶接管数量</span>
          </el-col>
          <el-col :span="8">
            <span class="number-icon">{{ homeContent.pluginNum }}</span>
            <span class="number-text">模块开通数量</span>
          </el-col>
        </el-row>
        <!--平台服务时间设定-->
        <div class="time-setting">
          <div class="time-title">Winsea 平台服务时间</div>
          <el-row class="time-main">
            <el-col :span="24">
              <span class="time-text">已使用时长：</span>
              <span class="time-number">{{ homeContent.usageDays }}天</span>
            </el-col>
            <el-col :span="24">
              <span class="time-text">服务开始日：</span>
              <span class="time-number">{{
                homeContent.contractStartDate
              }}</span>
            </el-col>
            <el-col :span="24">
              <span class="time-text">服务到期日：</span>
              <span class="time-number">{{ homeContent.contractEndDate }}</span>
            </el-col>
          </el-row>
        </div>
        <!--服务协议-->
        <div class="service-agreement cursor">《winsea服务协议说明》</div>
      </div>
    </div>
    <!--<router-view :key="$route.path" />-->
  </div>
</template>

<script>
import { homeContent } from "../../api/home/home";
import { companyInfo } from "../../api/companyInfo";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      list: [],
      zhuye: false,
      helloTitle: "",
      days: "",
      helloAdmin: localStorage.getItem("enterprise-front-userRealName"),
      companyName: localStorage.getItem("enterprise-front-companyName"),
      companyLogo: !localStorage.getItem("enterprise-front-companyLogo")
        ? require("../../static/images/page/login/login.png")
        : localStorage.getItem("enterprise-front-companyLogo"),
      headState: "/home",
      homeContent: {}
      // url: `${
      //   process.env.VUE_APP_TB_SERV_API
      // }/login.jsp?token=${localStorage.getItem("ws-pf_token")}`
    };
  },
  created() {
    this.getIndexCompany(localStorage.getItem("enterprise-front-companyId"));
    // this.zhuye = true
    this.restTimer();
    this.getNowHour();
    this.getCountdown();
    this.getHomeCount();
  },
  methods: {
    getIndexCompany(compId) {
      companyInfo({
        compId: compId
      }).then(response => {
        //this.companyInfoList = response;
        localStorage.setItem(
          "enterprise-front-companyLogo",
          response.compHeadimg
        );
        this.companyLogo = response.compHeadimg;
        this.$store.commit("user/SET_LOGO", this.companyLogo);
      });
    },

    jumpOrgAddMan() {
      this.$router.push({ name: "organizationIndex" });
    },
    // toRescue() {
    //   window.open(this.url, "_blank");
    // },
    getHomeCount() {
      const params = {
        compId: localStorage.getItem("enterprise-front-companyId")
      };
      homeContent(params)
        .then(response => {
          this.homeContent = response;
          this.list = this.homeContent.companySystemMessages;
        })
        .catch(() => {
          this.$message({
            message: "error",
            type: "error",
            showClose: true
          });
        });
    },
    goMessageDetail(value) {
      localStorage.setItem(
        "enterprise-front-systemMessageId",
        JSON.stringify(value)
      );
      this.$router.push({ path: "/messageDetail", name: "messageDetail" });
    },
    chakan() {
      this.zhuye = false;
      this.$router.push({ name: "messageList" });
    },
    /* 计算已使用天数 */
    restTimer() {
      const setTime = new Date("2018/6/15");
      const nowTime = new Date();
      const restTime = setTime.getTime() - nowTime.getTime(); // 计算剩余的毫秒数
      this.days = Math.abs(parseInt(restTime / (60 * 60 * 24 * 1000))); // 计算剩余的天数
    },
    /* 设置hello语 */
    getNowHour() {
      const nowHour = new Date().getHours();
      if (nowHour < 6) {
        this.helloTitle = "凌晨好";
      } else if (nowHour < 9) {
        this.helloTitle = "早上好";
      } else if (nowHour < 12) {
        this.helloTitle = "上午好";
      } else if (nowHour < 14) {
        this.helloTitle = "中午好";
      } else if (nowHour < 17) {
        this.helloTitle = "下午好";
      } else if (nowHour < 19) {
        this.helloTitle = "傍晚好";
      } else if (nowHour < 22) {
        this.helloTitle = "晚上好";
      } else {
        this.helloTitle = "夜里好";
      }
    },
    /* 已使用时间倒计时 */
    getCountdown() {}
  }
};
</script>

<style scoped lang="scss">
.no-msg-group {
  color: #999;
  height: 200px;
  font-size: 12px;
}
.home-left {
  padding: 60px 50px 20px 30px;
  width: 730px;
  height: calc(91vh - 80px);
  float: left;
  border-right: 1px solid #ccc;
  .hello-title {
    font-size: 24px;
  }
  .label-box {
    display: inline-block;
  }
  .see-more {
    float: right;
    color: #1d6ced;
    font-size: 12px;
    padding-top: 15px;
  }
  .message-box {
    font-size: 13px;
    border-bottom: 1px dashed #a9a9a9;
    padding: 10px 0;
    .message-text {
      padding-left: 18px;
      position: relative;
      &:before {
        content: "\25CF";
        height: 10px;
        position: absolute;
        width: 18px;
        left: 0;
        top: -1px;
        color: #1d6ced;
      }
    }
    .message-time {
      float: right;
      color: #a9a9a9;
    }
    .new-icon {
      background-color: #e74c3c;
      color: #fff;
      font-size: 8px;
      padding: 1px 6px;
      margin-left: 10px;
      border-radius: 4px;
      font-family: cursive;
    }
  }
  .go-account {
    display: block;
    padding: 10px 11px;
    margin: 0;
    margin-bottom: 10px;
  }
}
.home-right {
  margin: 60px 20px 20px 30px;
  width: 338px;
  height: calc(91vh - 80px);
  position: relative;
  float: left;
  .business-setting {
    padding-bottom: 40px;
    .business-img {
      margin-bottom: 20px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        margin: 0 auto;
        display: block;
      }
    }
    .business-title {
      text-align: center;
      font-size: 14px;
      padding-bottom: 10px;
    }
    .business-jump {
      text-align: center;
      font-size: 12px;
      color: #1d6ced;
      display: block;
    }
  }
  .number-setting {
    text-align: center;
    padding-bottom: 35px;
    border-bottom: 1px dashed #ccc;
    .el-col-8 {
      border-right: 1px solid #ccc;
    }
    .el-col-8:last-child {
      border-right: none;
    }
    .number-icon {
      display: block;
      font-size: 25px;
    }
    .number-text {
      display: block;
      font-size: 12px;
      color: #999;
    }
  }
  .time-setting {
    .time-title {
      padding: 30px 0 15px;
      font-weight: bold;
      font-size: 15px;
    }
    .time-main {
      font-size: 12px;
      color: #666;
      .el-col {
        padding-bottom: 5px;
      }
    }
  }
  .service-agreement {
    font-size: 12px;
    color: #1d6ced;
    position: absolute;
    bottom: 0;
  }
}
</style>
