<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
	}
})

function goPage(url) {

	if (url) {
		proxy.$apiUserEvent('all', {
			type: 'event',
			key: data.type=='message'?'message':'call-log',
			prefix: '.uni.other.',
			value: data.type=='message'?'短信':"通话"
		})
		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;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

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