<template>
	<view>
		<missthee-indexlist @select-item='selectHandler' 
			:data="txlList"></missthee-indexlist>

		<u-loading-page :loadingText="loadingPageData.loadingText" :image="loadingPageData.image"
			:iconSize="loadingPageData.iconSize" :loadingMode="loadingPageData.loadingMode"
			:bgColor="loadingPageData.bgColor" :loading="loading" :color="loadingPageData.color"
			:loadingColor="loadingPageData.loadingColor">
		</u-loading-page>
		<m-tabbar fixed fill :current="2" :tabbar="tabbar"></m-tabbar>
	</view>
</template>

<script>
	import TabbarConfig from '@/totalTabbar.js'
	import {
		pinyin
	} from "@/api/convertPinyin.js";
	import {
		getAddressList
	} from "@/api/index.js"
	import '../../components/missthee-indexlist/missthee-indexlist.vue'

	export default {
		data() {
			return {
				tabbar: TabbarConfig,
				indexList: [],
				txlList: {},
				loading: false,
				loadingPageData: {
					// 自定义提示内容
					loadingText: '',
					// 自定义图片
					image: '',
					// 自定义加载动画模式
					loadingMode: 'spinner',
					// 自定义背景色
					bgColor: 'rgba(0, 0, 0, 0.3)',
					color: '#eee',
					loadingColor: '#ddd',
					iconSize: 28
				},
			}
		},
		onShow() {
			this.indexList = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split("")
			this.getAddressList()
		},
		methods: {
			selectHandler(e) {
				uni.makePhoneCall({
					phoneNumber: e.phone, // 电话号码
					success: function() {
						console.log('Call succeeded');
					},
					fail: function() {
						console.log('Call failed');
					}
				});
			},
			getAddressList() {
				this.loading = true

				var _this = this
				getAddressList({}).then(response => {
					this.loading = false
					console.log("开始处理" + new Date())
					if (response.code == 200) {
						this.txlList = this.sortContacts(response.data, "username");
						console.log("结束处理" + new Date())
					} else {
						uni.$u.toast('获取通讯录失败');
					}
				});
			},
			/** JS 按 A-Z 排序通讯录(中文、英文、特殊字符)
			 * @param arrList 需要排序的数组
			 * @param char 指定排序的字段
			 * @param isAll 是否显示全部类型(true.A ~ Z全部显示 false.只显示已有的值)
			 * @returns {*[]|null} 返回结果 { initial: "", data: [] }
			 */
			sortContacts(arrList, char = "username", isAll = false) {
				if (!String.prototype.localeCompare) return null;
				const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split(""); // ABCDEFGHIJKLMNOPQRSTUVWXYZ
				const zh = "阿八嚓哒妸发旮哈*讥咔垃痳拏噢妑七呥涩它**穵夕丫帀".split("");
				const result = []; // 最终数据
				let curr = {}; // 当前数据循环
				for (let i = 0; i < letters.length; i++) {
					curr[letters[i]] = []
				}
				arrList.forEach((item, index) => {
					// if(index>4){
					// 	return
					// }
					const initial = item[char].trim().charAt(0); // 截取第一个字符
					const chinaName = pinyin.getFullChars(initial).charAt(0).toUpperCase();
					item["id"] = index;
					if (letters.includes(chinaName)) {
						curr[chinaName].push(item);
					} else {
						// console.log(chinaName, item)
						curr["#"].push(item);
					}
				});
				return curr;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff !important;
	}

	.list {

		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;

			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}

			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
		}

		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
</style>