  <template>
  <sail-page type="loading-view" title="消息" isHead>
    <div slot="content">
        <div id="MyNewsPage">
          <!-- <div>
            <div class="weui-border" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    </div>
                </form>
            </div>
          </div> -->
          <router-link class="link" to="/businessMessage">
            <div class="newsPage-theme">
              <div class="newsPage-theme_total">
                <div class="newsPage_img news_business">
                  <svg class="icon nav-left_icon" aria-hidden="true">
                    <use xlink:href="#icon-yewuxiaoxi"/>
                  </svg>
                  <div class="news-dot" v-if="unReadBusiness"></div>
                </div>
                <div class="newsPage-infor">
                    <p class="newsPage-infor_busy">
                      <span class="newsPage-title">业务消息</span>
                      <span class="newsPage-time">{{businessTime | accurateTime}}</span>
                    </p>
                    <p class="newsPage-status">{{businessList.length == 0 ? '没有消息':businessList[0].title}}</p>
                </div>
              </div>
            </div>
          </router-link>
          <router-link class="link" to="/systemMessage">
            <div class="newsPage-theme">
              <div class="newsPage-theme_total  ">
                <div class="newsPage_img news_system">
                  <svg class="icon nav-left_icon" aria-hidden="true">
                    <use xlink:href="#icon-xitongxiaoxi"/>
                  </svg>
                  <div class="news-dot" v-if="unReadSystem"></div>
                </div>
                <div class="newsPage-infor">
                    <p class="newsPage-infor_busy">
                      <span class="newsPage-title">系统消息</span>
                      <span class="newsPage-time">{{systemTime | accurateTime}}</span>
                    </p>
                    <p class="newsPage-status"> {{systemList.length == 0 ? '没有消息':systemList[0].title}}</p>
                </div>
              </div>
            </div>
          </router-link>  
        </div>
    </div>
  </sail-page>
</template>

<script>
import sailPage from "@/components/sail-page.vue";
import { mapState } from "vuex";

export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      businessList: state => state.messageModule.businessList,
      systemList: state => state.messageModule.systemList
    }),
    unReadBusiness() {
      let flag = false;
      this.businessList.map(item => {
        if(!item.readFlag) {
          flag = true;
        }
      });
      return flag;
    },
    unReadSystem() {
      let flag = false;
      this.systemList.map(item => {
        if(!item.isRead) {
          flag = true;
        }
      });
      return flag;
    },
    businessTime() {
      if(this.businessList.length === 0) {
        return Date.now();
      }
      return this.businessList[0].createTime;
        
    },
    systemTime() {
      if(this.systemList.length === 0) {
        return Date.now();
      }
      return this.systemList[0].createTime;
        
    }
  },
  asyncData({store, route}) {
    //let id = route.params.id
    store.dispatch("messageModule/findAllOnCAPP");
    return store.dispatch("messageModule/businessFindPage").then(res => {
         
    });
  },
  data: function(){
    return {
           
    }; 
  },
  methods: {
     
  }
};
</script>
<style lang="less">
  #MyNewsPage{
    .weui-border {
    border-top: 1px solid #F4F4F4;
    padding: 10px 10px 0 10px;
  }
}
</style>
<style lang="less" scoped>
  #MyNewsPage {
    background: #fff;
    width: 100%;
    min-height:100px;
      .weui-search-bar {
        background: #fff;
      }
      .weui-search-bar__box {
        background: #F3F3F3;
      }
      .newsPage-theme {
        .newsPage-theme_total {
          border-bottom: 1px solid #F4F4F4;
          margin:10px auto; 
          padding-left: 20px;
          display: flex;
          .newsPage-infor {
             margin-left: 20px; 
          }
          .newsPage-infor_busy {
            display: flex;
            justify-content: space-between;
          }
          .newsPage-title {
            font-size: 16px;
            color: #000;
          }
          .newsPage-time {
            font-size: 11px;
            color: #ccc;
            margin-right: 15px;
          }
          .newsPage-infor{
            width: 300px;
            height: 50px;
            padding-top: 8px;
            .newsPage-status {
              color: #ccc;
              font-size: 12px;
              display: flex;
            }
          }
          .news_business {
            background: #EBA535;
          }
          .news_system {
            background: #17B4F8;
          }
          .news-dot {
            top: 0;
              right: -8px;
              width: 8px;
              height: 8px;
              content: ' ';
              position: absolute;
              border-radius: 100%;
              background-color: #f44;
          }
          .newsPage_img {
            width: 35px;
            height: 35px;
            margin-top:10px; 
            border-radius: 50%;
            position: relative;
            .nav-left_icon {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%);
              color: #fff;
              font-size: 25px;
            }
          }
        }
      }
      
  }
</style>