<template>
  <div class="message-wrap">
    <nav-bar title="消息中心"/>
    <div class="message line flex align-c" @click="goMessages">
      <img class="flex_c align-c flex_sh" src="../assets/imgs/message@2x.png" alt="">
      <div class="flex_sb align-c right-wrap">
        <div>
          <h5>系统消息</h5>
          <p class="lineHidden" v-if="!data.length">{{data[0].content}}</p>
          <p class="lineHidden" v-else>暂无消息</p>
        </div>
        <i class="icon icon-jiantou-you"/>
      </div>
    </div>
    <div class="message flex align-c">
      <img class="flex_c align-c flex_sh" src="../assets/imgs/services@2x.png" alt="">
      <div class="flex_sb align-c right-wrap">
        <div>
          <h5>hooli客服</h5>
          <p class="lineHidden">暂无消息</p>
        </div>
        <i class="icon icon-jiantou-you"/>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Message",
  components: {
    NavBar
  },
  data() {
    return {
      data: null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_message_list;
      params.data = {};
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 查看消息列表
    goMessages() {
      let lang = this.$store.state.langStr;
      this.$router.push({
        path: `/${lang}/messages`
      });
    }
  }
};
</script>

<style scoped lang='less'>
.message-wrap {
  background: #fff;
  min-height: 100vh;
  .message {
    padding: 20px 0;
    margin: 0 17px;
    overflow: hidden;
    .right-wrap {
      width: 100%;
    }
    > img {
      width: 45px;
      height: 45px;
      border-radius: 8px;
      margin: 0 15px 0 0;
    }
    div {
      color: #000;
      overflow: hidden;
      h5 {
        font-size: 17px;
        font-weight: 500;
        line-height: 23px;
        color: #333;
      }
      p {
        font-size: 13px;
        line-height: 19px;
        color: #999;
      }
    }
    div + i {
      color: #bbb;
      font-size: 12px;
    }
  }
  .message.line {
    border-bottom: 1px solid #eee;
  }
}
</style>
