<template>
  <view>
    <u-navbar>
      <view slot="left"></view>
      <view slot="center">
        <u-tabs :list="list" lineWidth="60" :current="current" @change="changeInfo" />
      </view>
    </u-navbar>
    <view :style="{ marginTop: totalHeight + 'px' }">
      <!-- 系统通知 -->
      <view v-if="current == 0" class="orderList" v-for="item in orderList" :key="item.id" @tap="$Router.push(item.url)">
        <image :src="item.img" style="width: 40px; height: 40px" />
        <view class="orderItem">
          <view class="order1">{{ item.name }}</view>
          <view class="order2">{{ item.text }}</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>

      <!-- 消息通知 -->
      <view class="message" v-if="current == 1" @tap="$Router.push(infoUrl)">
        <image src="/static/images/home-select.png" style="width: 40px; height: 40px" />
        <view class="business">
          <view class="businessItem">商家</view>
          <view class="messages">您好，请问有什么需要帮助的吗？</view>
        </view>
        <view class="time">
          <view class="timeItem">17:00</view>
          <u-badge numberType="overflow" :type="type" max="99" :value="value" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '系统通知' },
        {
          name: '消息通知',
          badge: {
            value: 5,
          },
        },
      ],
      current: 0,
      orderList: [
        {
          id: '1',
          img: '/static/images/home-select.png',
          name: '订单通知',
          text: '您的订单成功付款，感谢您的支持。',
          url: '/pages/message/order/index',
        },
        {
          id: '2',
          img: '/static/images/home-select.png',
          name: '付款通知',
          text: '您的订单成功付款，感谢您的支持。',
          url: '/pages/message/payment/index',
        },
        {
          id: '3',
          img: '/static/images/home-select.png',
          name: '评价通知',
          text: '您的订单成功付款，感谢您的支持。',
          url: '/pages/message/evaluate/index',
        },
        {
          id: '4',
          img: '/static/images/home-select.png',
          name: '点赞回复',
          text: '您的订单成功付款，感谢您的支持。',
          url: '/pages/message/upvote/index',
        },
        {
          id: '5',
          img: '/static/images/home-select.png',
          name: '优惠福利',
          text: '您的订单成功付款，感谢您的支持。',
          url: '/pages/message/favorable/index',
        },
      ],
      type: 'warning',
      value: 99999,
      flag: true,
      infoUrl: '/pages/message/info/index'
    };
  },
  computed: {
    totalHeight() {
      return uni.getSystemInfoSync().statusBarHeight + 44;
    },
  },
  methods: {
    change(e) {
      console.log('-----------', e);
    },
    changeInfo(index) {
      this.current = index.index;
    }
  },
};
</script>

<style lang="scss" scoped>
.messages {
  min-height: 100vh;
  background-color: #fff;
}

.orderList {
  display: flex;
  padding: 30rpx;
  justify-content: space-between;

  image {
    margin-right: 10rpx;
  }

  .orderItem {
    flex: 1;

    .order1 {
      font-size: 16px;
      margin-bottom: 10rpx;
      color: #232323;
    }

    .order2 {
      font-size: 12px;
      color: #9ca3af;
    }
  }
}

.message {
  display: flex;
  padding: 30rpx;
  justify-content: space-between;

  image {
    margin-right: 10rpx;
  }

  .business {
    flex: 1;

    .businessItem {
      font-size: 16px;
      margin-bottom: 10rpx;
      color: #232323;
    }

    .messages {
      font-size: 12px;
      color: #9ca3af;
    }
  }

  .time {
    .timeItem {
      color: #9ca3af;
      font-size: 14px;
      margin-bottom: 8px;
    }
  }
}
</style>
