<template>
  <view class="client-message">
    <page-navbar :hasBack="false" bgColor="#fff" title="消息"></page-navbar>
    <view
      class="fl-flex fl-justify-between fl-align-center u-m-b-40"
      v-for="(item, index) in orderList"
      :key="index"
      @tap="$Router.push(item.url)"
    >
      <view class="fl-flex fl-align-center">
        <u--image
          :src="`/static/pages/message/${item.img}.png`"
          width="112rpx"
          height="112rpx"
        ></u--image>
        <view class="u-m-l-16">
          <view class="f-s-28 text-primary u-m-b-8">{{ item.title }}</view>
          <view class="f-s-24 text-999">{{ item.text }}</view>
        </view>
      </view>
      <u-icon name="arrow-right" color="#000000" size="18"></u-icon>
    </view>
  </view>
</template>

<script>
import { getIsHaveNewInform } from '@/api/client/message.js';
export default {
  data() {
    return {
      orderList: [
        {
          img: 'message-order',
          title: '订单通知',
          text: '暂无订单通知。',
          url: '/pagesMessage/orderNotify',
          numb: 0,
        },
        {
          img: 'message-evaluate',
          title: '评价通知',
          text: '暂无评价通知。',
          url: '/pagesMessage/commentNotify',
        },
        {
          img: 'message-love',
          title: '点赞回复',
          text: '暂无点赞回复。',
          url: '/pagesMessage/kudosNotify',
        },
        {
          img: 'message-discounts',
          title: '优惠福利',
          text: '暂无优惠福利通知。',
          url: '/pagesMessage/benefitsNotify',
          numb: 0,
        },
      ],
    };
  },
  onShow() {
    this.handlerGetSystemNewInform();
  },
  methods: {
    // 获取订单详细通知 是否有系统新消息
    handlerGetSystemNewInform() {
      getIsHaveNewInform().then(res => {
        let { order, comment, evaluate, coupon } = res.data;
        this.orderList[0].numb = order;
        order
          ? (this.orderList[0].text = `您有${order}条订单信息`)
          : (this.orderList[0].text = '暂无订单通知');

        // this.orderList[1].numb = pay
        // pay ? this.orderList[1].text = `您有${pay}条订单信息` : this.orderList[1].text = '暂无支付通知'

        this.orderList[1].numb = comment;
        comment
          ? (this.orderList[1].text = `您有${comment}条订单信息`)
          : (this.orderList[1].text = '暂无评价通知');

        this.orderList[2].numb = evaluate;
        evaluate
          ? (this.orderList[2].text = `您有${evaluate}条订单信息`)
          : (this.orderList[2].text = '暂无点赞回复');

        this.orderList[3].numb = coupon;
        coupon
          ? (this.orderList[3].text = `您有${coupon}条订单信息`)
          : (this.orderList[3].text = '暂无优惠福利通知');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.client-message {
  height: 100vh;
  background-color: #fff;
  padding: 32rpx;
  box-sizing: border-box;
}
</style>
