<style>
	.card {
		padding: 10px;
		margin-bottom: 10px;
	}
</style>
<section id="app" style="max-width: 600px;margin: 10px auto 0;">
	<div class="card">
		<h3 class="card-title">
			{{thread.title}}
		</h3>
		<h6 class="card-subtitle text-muted">#1 {{thread.writer}} {{dateFromObjectId thread._id}}</h6>
		<p class="card-text">{{thread.content}}</p>
	</div>
	<div class="card" v-for="thread in threads">
		<h6 class="card-subtitle text-muted">\{{thread.writer}} \{{dateFromObjectId(thread._id)}}</h6>
		<p class="card-text">\{{thread.content}}</p>
	</div>
	<textarea class="form-control" id="input-content" v-model="content" rows="5" required></textarea>
	<button class="btn btn-primary" @click="write()">작성</button>
</section>
<script src="https://unpkg.com/vue@next"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
let socket;
let app = {
    data() {
        return {
            threads: [],
			content: ''
		}
	},
	methods: {
		dateFromObjectId(o) {
			o = new Date(parseInt(o.toString().substring(0, 8), 16) * 1000);
			return `${o.getFullYear()}-${o.getMonth()}-${o.getDate()} ${o.getHours()}:${o.getMinutes()}`;
		},
		write() {
		    socket.emit('write', this.content);
		    this.content = '';
		}
	},
	created() {
        socket = io();
        socket.emit('init', '{{thread._id}}');
        socket.on('thread', (thread) => {
            this.threads.push(thread);
		});
	}
};
Vue.createApp(app).mount('#app');
</script>