<template>
	<uni-list>
		<uni-list :border="true"  v-for="(item, index) in historyList" :key="index">
			<uni-list-chat :title="item.title" :avatar="item.imgUrl" :note="item.message" :time="item.time" badge-positon="left" :badge-text="item.unread" clickable="true" @click="handleDonate"></uni-list-chat>
		</uni-list>
	</uni-list>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const historyList = ref([
      {
        imgUrl: 'https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg',
        title: '普通用户01',
		unread:'10',
		time:'刚才',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		
      },
      {
        imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
        title: '普通用户02',
        unread:'2',
        time:'刚才',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
      },
     {
       imgUrl: 'https://img.zcool.cn/community/0189d85c3c421aa80121fbb0284f6c.jpg@1280w_1l_2o_100sh.jpg',
       title: '普通用户03',
       unread:'',
       time:'刚才',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
     },
     {
       imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.b3a7697d2793ba094a861d546c31190d?rik=NevOIW4XmkUuMA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50069%2f5445.jpg_wh1200.jpg&ehk=wuLPicg%2b9wXz8QAwp%2fAVFBtJQ6loBUiVfQZu2bbZODA%3d&risl=&pid=ImgRaw&r=0',
       title: '普通用户04',
       unread:'2',
       time:'1分钟前',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
     },
     {
       imgUrl: 'https://img.zcool.cn/community/0192885d01b363a801213ec27c862a.jpg@1280w_1l_2o_100sh.jpg',
       title: '普通用户05',
       unread:'3',
       time:'12:10',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
     },
	 {
	   imgUrl: 'https://img.zcool.cn/community/018aab5cc14900a801214168fdffc2.jpg@1280w_1l_2o_100sh.jpg',
	   title: '普通用户06',
	   unread:'',
	   time:'11:10',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
	 },
	 {
	   imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.68978afc71576a94a1d50ef5016dbd9e?rik=cDDsy5SLmDvDHQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50075%2f0779.jpg_wh1200.jpg&ehk=FG4Hd5S711LYcuLBIcDagQyk4KhcH1oIfqyk1MWUOyg%3d&risl=&pid=ImgRaw&r=0',
	   title: '普通用户07',
	   unread:'1',
	   time:'14:12',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
	 },
	 {
	   imgUrl: 'https://img95.699pic.com/photo/50093/6813.jpg_wh860.jpg',
	   title: '普通用户08',
	   unread:'2',
	   time:'14:50',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
	 },
	 {
	   imgUrl: 'https://bpic.588ku.com/back_origin_min_pic/23/04/19/05f178d63677c98d3db402d63fac38d2.jpg',
	   title: '普通用户09',
	   unread:'2',
	   time:'12:40',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
	 },
	 {
	   imgUrl: 'https://img95.699pic.com/photo/50093/6813.jpg_wh860.jpg',
	   title: '普通用户010',
	   unread:'1',
	   time:'18:48',
		message:'这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
	 },
    ])
    const handleDonate = () => {
          uni.navigateTo({ url: "../talk/talk" });
        };
    
        return {
          historyList,
          handleDonate,
        };
  },
}
</script>

<style>
page {
	background-color: #fff;
}

.chat-custom-right {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.chat-custom-text {
	font-size: 12px;
	color: #999;
}
</style>
