<template>
	<view>
		<NavBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" />
		<view class="list-container">
			<view class="item" v-for="item in source" :key="item.id"
				:style="{ background: `linear-gradient( -270deg, ${item.color.bgColor} 0%, #FFFFFF 70%), #FFFFFF` }">
				<view class="content flex flex-align-center">
					<image class="logo" :src="`/static/image/common/phone/${item.icon}.png`" mode=""></image>
					<view class="name flex-1">{{ item.name }}机型</view>
					<view class="right-button" :style="{ background: item.color.buttonColor }"
						@click="goPage(data.type == 'message' ? item.messageUrl : item.callUrl)">立即进入</view>
				</view>
				<view class="line" :style="{ background: item.color.lineColor }"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		util
	} from '@/utils/common.js';

	const {
		appContext,
		proxy
	} = getCurrentInstance();
	// 列表
	const source = ref([{
			name: '苹果',
			color: {
				bgColor: '#F3EAFF',
				lineColor: '#B78EF5',
				buttonColor: '#BA8DFF',
			},
			icon: 'iphone',
			messageUrl: "/pages/message/list-index?phone=iphone",
			callUrl: "/pages/call-log/call?type=ios"
		},
		{
			name: '华为',
			color: {
				bgColor: '#FFE9E9',
				lineColor: '#FF6969',
				buttonColor: '#FB6767',
			},
			icon: 'huawei',
			messageUrl: "/pages/message/list-index?phone=huawei",
			callUrl: "/pages/call-log/call?type=huawei"
		},
		{
			name: '小米',
			color: {
				bgColor: '#FFF0DD',
				lineColor: '#FFA143',
				buttonColor: '#FFA64D',
			},
			icon: 'mi',
			messageUrl: "/pages/message/list-index?phone=mi",
			callUrl: "/pages/call-log/call?type=xiaomi"
		},
		{
			name: 'oppo',
			color: {
				bgColor: '#E0FFD9',
				lineColor: '#56B745',
				buttonColor: '#5DCD49',
			},
			icon: 'oppo',
			messageUrl: "/pages/message/list-index?phone=oppo",
			callUrl: "/pages/call-log/call?type=oppo"
		}, {
			name: 'vivo',
			color: {
				bgColor: '#D4F4FF',
				lineColor: '#52C2FF',
				buttonColor: '#50C1FE',
			},
			icon: 'vivo',
			messageUrl: "/pages/message/list-index?phone=vivo",
			callUrl: "/pages/call-log/call?type=vivo"
		},
	])

	const data = reactive({
		navBar: {
			title: '选择机型',
			bgColor: '#F0F4F9',
		},
		type: "message"
	})

	onLoad((options) => {
		if (options.type) {
			data.type = options.type
		}
		proxy.$apiUserEvent('all', {
			type: 'event',
			key: data.type == 'message' ? 'message' : 'call-log',
			prefix: '.uni.other.',
			value: data.type == 'message' ? '短信' : "通话"
		})
	})

	function goPage(url) {
		if (url) {
			util.goPage(url)
		} else {
			uni.showToast({
				title: '开发中',
				icon: 'none'
			})
		}
	}
</script>

<style>
	@import '@/common/main.css';
</style>
<style lang="less">
	.list-container {
		background-color: #F0F4F9;
		padding: 24rpx 32rpx;
	}

	.item {
		width: 100%;
		height: 188rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		padding: 40rpx 36rpx 24rpx 28rpx;

		.content {
			.logo {
				width: 96rpx;
				height: 96rpx;
				flex-shrink: 0;
			}

			.name {
				margin-left: 32rpx;
				color: #1A1A1A;
				font-size: 36rpx;
				font-weight: 500;
			}

			.right-button {
				width: 140rpx;
				height: 64rpx;
				border-radius: 16rpx;
				color: #ffffff;
				font-size: 28rpx;
				line-height: 64rpx !important;
				text-align: center;
				// display: flex;
				// align-items: center;
				// justify-content: center;
			}
		}

		.line {
			width: 100rpx;
			height: 8rpx;
			filter: blur(5px);
			opacity: 0.5;
			margin-top: 4rpx;
		}
	}
</style>