<!--
 * @Author: yizhiyang
 * @Date: 2023-11-30 09:40:24
 * @Description:
-->
<template>
  <view class="message">
    <view class="message__like">
      <view v-for="item in list" :key="item.id">
        <image
          slot="icon"
          src="@/static/tools.jpg"
          style="width: 80rpx; height: 80rpx"
        />
        <view class="message__like--text">{{ item.name }}</view>
      </view>
    </view>

    <view class="message__note" v-for="value in systemList" :key="value.id" @click="handlerSkipSystemNotice(value)">
      <image
        slot="icon"
        src="@/static/tools.jpg"
        style="width: 80rpx; height: 80rpx"
      />
      <view class="message__note--info">
        <view class="">
          <view class="systemTitle">{{ value.name }}</view>
          <view class="textInfo">{{ value.info }}</view>
        </view>
        <view class="message__note--flex">
          <view class="textInfo">{{ value.time }}</view>
          <view style="width: 40rpx; height: 40rpx">
            <u-badge
              numberType="ellipsis"
              type="primary"
              :value="value.num"
              shape="circle"
            ></u-badge>
          </view>
        </view>
      </view>
    </view>

    <view class="message__note" v-for="value in systemList1" :key="value.id">
      <image
        slot="icon"
        src="@/static/QR57a.jpg"
        style="width: 80rpx; height: 80rpx"
      />
      <view class="message__note--info">
        <view class="">
          <view class="systemTitle">{{ value.name }}</view>
          <view class="textInfo">{{ value.info }}</view>
        </view>
        <view class="message__note--flex">
          <view class="textInfo">{{ value.time }}</view>
          <view style="width: 40rpx; height: 40rpx">
            <u-badge
              numberType="ellipsis"
              type="primary"
              :value="value.num"
              shape="circle"
            ></u-badge>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { methods } from 'uview-ui/libs/mixin/mixin';
export default {
  data() {
    return {
      list: [
        {
          id: '1',
          name: '新的赞',
        },
        {
          id: '2',
          name: '评论',
        },
        {
          id: '3',
          name: '好友',
        },
      ],
      systemList: [
        {
          id: '1',
          name: '系统通知',
          info: '您修改的店铺LOGO审核未通过',
          time: '23小时',
          num: '99+',
        },
        {
          id: '2',
          name: '订单通知',
          info: '附近暂无配送员接单，订单已关闭。',
          time: '刚刚',
          num: '9',
        },
        {
          id: '3',
          name: '活动通知',
          info: '您修改的店铺LOGO审核未通过。',
          time: '10-26',
          num: '23',
        },
      ],

      systemList1: [
        {
          id: '1',
          name: 'yizhiyang',
          info: '在吗？？',
          time: '23小时',
          num: '2',
        },
        {
          id: '2',
          name: '易只烊',
          info: '请问这个怎么烊？？？',
          time: '刚刚',
          num: '9',
        },
      ]
    }
  },
  methods:{
    // 点击跳转到系统通知
    handlerSkipSystemNotice(value){
      uni.navigateTo({
        url:`/pages/tabbar/message/systemNotice?type=${value.id}`
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.message {
  min-height: 100vh;
  background-color: $uni-bg-color;
  padding: $uni-bg-padding-sm;
  &__like {
    text-align: center;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 30rpx;
    &--text {
      margin-top: 10rpx;
    }
  }
  &__note {
    display: flex;
    padding: 20rpx;
    &--info {
      flex: 1;
      margin-left: 20rpx;
      padding-bottom: 18rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #eeeded;
    }
    &--flex {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .textInfo {
      font-size: 24rpx;
      color: #666;
    }
    .systemTitle {
      font-size: 36rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>
