<template>
  <view class="News">
    <view class="list" v-for="(item,index) in items" :key="index" v-if="items.length>0">
      <navigator class="item" open-type="navigate" hover-class="none" :url="'/pages/news/detail?type='+item.type">
        <view class="left">
          <image class="img" v-if='item.type ==="SystemNotification"' :src="item.icon?item.icon:'/static/images/news_1.png'" mode="aspectFill"></image>
          <image class="img" v-if='item.type ==="OrderNotification"' :src="item.icon?item.icon:'/static/images/news_2.png'" mode="aspectFill"></image>
          <image class="img" v-if='item.type ==="CouponNotification"' :src="item.icon?item.icon:'/static/images/news_3.png'" mode="aspectFill"></image>
          <view class="content">
            <view class="title">{{item.name}}</view>
            <view class="des">{{item.title || '暂无任何未读消息'}}</view>
          </view>
        </view>
        <view class="num" v-if="item.count>0">{{item.count}}</view>
      </navigator>
    </view>
    <view class="no-news" v-else>
      <image src="/static/img/no-news.png" mode="widthFix"></image>
      暂时没有收到任何消息~
    </view>
  </view>
</template>

<script>
  import {
    notificationsType,
    notificationsDelete
  } from '@/apis/interfaces/news.js'
  export default {
    data() {
      return {
        items: [],
        editShow: false
      };
    },
    onShow() {
      this.notificationsType()
    },
    //  右侧编辑按钮触发事件
    onNavigationBarButtonTap(e) {
      let that = this
      let index = e.index
      // 按钮文字的改变所需 
      // #ifdef APP-PLUS
      let currentWebview = that.$mp.page.$getAppWebview()
      let tn = currentWebview.getStyle().titleNView
      let text = tn.buttons[0].text
      if (text == '全部清空') {
        uni.showModal({
          title: '是否确认清空全部消息',
          content: '确认清空',
          success(res) {
            if (res.confirm) {
              notificationsDelete().then(res => {
                that.notificationsType()
                uni.showToast({
                  title: '全部清除啦~',
                  icon: 'none'
                })
              }).catch(err => {
                uni.showToast({
                  title: err.message,
                  icon: 'none'
                })
              })
            }
          }
        })
      }
      // #endif
    },
    methods: {
      notificationsType() {
        notificationsType().then(res => {
          this.items = res
        }).catch(err => {
          uni.showToast({
            title: err.message,
            icon: 'nonde'
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .News {
    height: 100vh;
    // #ifdef APP-PLUS
    min-height: calc(100vh - 20rpx);
    // #endif
    width: 100%;
    // background-color: pink;

    // 无消息
    .no-news {
      font-size: $title-size-m;
      color: #666;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;

      image {
        width: 70%;
        margin-top: $padding*7;
      }
    }

    //  消息列表
    .list {
      width: 94%;
      margin-left: 3%;

      .item {
        margin-top: 20rpx;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: $padding*1.5;
        background-color: #fff;
        border-radius: $radius*0.6;
        box-sizing: 0 0 20rpx 40rpx rgba(0, 0, 0, 0.3);

        .left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          box-sizing: border-box;
          flex: 1;

          .content {
            flex: 1;
            padding: 0 $padding*0.5;
            box-sizing: border-box;
          }

          .img {
            width: 80rpx;
            height: 80rpx;
            margin-right: $padding*1.2;
            border-radius: 50%;
          }

          .title {
            font-size: $title-size-m*1.1;
            margin-bottom: $padding*0.5;
            font-weight: bold;
          }

          .des {
            font-size: $title-size-m*0.9;
            color: #999;
          }
        }

        .num {
          background-color: $mian-color;
          color: #fff;
          border-radius: 50%;
          width: 40rpx;
          height: 40rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
          font-size: $title-size*.8;
          padding: $padding*0.3;
          text-align: center;
        }
      }
    }
  }
</style>
