<!DOCTYPE html>
<html>

	<head style="visibility:hidden;">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title>烂笔头</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
	</head>
	
	<body style="visibility:hidden;">
		<div class="header">
			<div class="header_con">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<!--<img src="../img/title_news.png" class="oc_logo" />-->
				<p class="title">烂笔头</p>
			</div>
		</div>
		<div style="height: 36px;"></div>
		<style>
			.indicator {
				display: inline-block;
				width: 33%;
				padding: 10px 0;
				margin: 0 10px;
				text-align: center;
				color: black;
				background-color: #ddd;
			}
			.act.indicator {
				color: white;
				background-color: #444;
			}
			.subPage {
				padding-top: 10px;
				overflow-y: auto;
				height: calc(100vh - 160px);
				width: 100vw;
				border: none;
			}
		</style>
		<div class="block" style="display: flex;width: 100vw;">
			<div class="indicator act" data-app="app" data-add-text="添加备忘">备忘记</div>
			<div class="indicator" data-app="app2" data-add-text="添加信用卡">信用卡</div>
			<div class="indicator" data-app="app3" data-add-text="等待后续更新">阅看悦想</div>
		</div>
		<div id="app" class="subPage" v-cloak>
			<div class="row clearfix" v-for="(each, index) in noteData" :data-id="each.id">
				<div class="left" v-if="!each.currentDelete" @click="edit(each.id)">
					<div class="name">{{each.title}}</div>
					<div class="created_time">创建时间:{{each.create_time}}</div>
					<div class="updated_time">更改时间:{{each.update_time}}</div>
				</div>
				<div class="left" v-else>
					<div class="name" style="color: red;font-weight: bolder;">你确定要删除么?</div>
					<div class="small_title">{{each.title}}</div>
				</div>
				<div class="right" v-if="!each.currentDelete">
					<div class="operation edit" @click.stop.prevent="edit(each.id)">编辑</div>
					<div class="delete operation" @click.stop.prevent="triggerDelete(index)">删除</div>
				</div>
				<div class="right" v-else>
					<div class="operation delete confirm" @click.stop.prevent="confirmDelete(index)">确认</div>
					<div class="operation edit cancel" @click.stop.prevent="cancelDelete(index)">取消</div>
				</div>
			</div>
		</div>
		<div id="app2" class="subPage" v-cloak>
			<div class="row clearfix" v-for="(each, index) in creditData" :data-id="each.id">
				<div class="left" v-if="!each.currentDelete" @click="edit(each.id)">
					<div class="name">{{each.name}}</div>
					<div class="created_time" v-if="each.huankuan">
					{{each.huankuan.create_time}}还款:{{each.huankuan.amount}}元
					</div>
					<div class="updated_time">
						<span>{{each.return_date}}号前还款;额度{{each.credit_cash}}元</span>
						<br>
						<span>{{each.cur_cash}}元可用</span>
					</div>
				</div>
				<div class="left" v-else>
					<div class="name" style="color: red;font-weight: bolder;">你确定要删除么?</div>
					<div class="small_title">{{each.name}}</div>
				</div>
				<div class="right" v-if="!each.currentDelete">
					<div class="operation edit" @click.stop.prevent="edit(each.id)">详情</div>
					<div class="delete operation" @click.stop.prevent="triggerDelete(index)">删除</div>
				</div>
				<div class="right" v-else>
					<div class="operation delete confirm" @click.stop.prevent="confirmDelete(index)">确认</div>
					<div class="operation edit cancel" @click.stop.prevent="cancelDelete(index)">取消</div>
				</div>
			</div>
		</div>
		<div id="app3" class="subPage">
			<div style="text-align: center;font-size: 24px;">请等待更新</div>
		</div>
		<div class="footer" data-app="app">
			新增记事
		</div>
	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			var element;
			var parent = document.body;
			element = document.createElement('script');
			element.src = localStorage.getItem("jsUrl") + 'common.js?ver=' + localStorage.getItem('version');
			parent.appendChild(element);		
			element.onload = function() {
				var style = [JZL.getCssUrl('notepad.css'), JZL.getCssUrl("global.css"), JZL.getCssUrl("header.css")];
				JZL.css_init(style);
				var script = [JZL.getJsUrl('notepad.js'), JZL.getJsUrl('credit.js')];
				JZL.js_init(script);
				setTimeout(function() {
					parent.style.visibility = "visible";
				}, 100);
			};
			var _index = window.localStorage.getItem('note_open');
			if (!_index) {
				_index = 0;
			}
			$('.indicator').click(function(){
				$('.indicator').removeClass('act');
				$('.subPage').hide();
				$(this).addClass('act');
				$('#'+$(this).data('app')).show();
				$('.footer').attr('data-app', $(this).data('app')).text($(this).data('addText'))
				window.localStorage.setItem('note_open', $(this).index())
			})
			$('.indicator').eq(_index).click();
		})
	</script>
</html>