<template>
  <div class="container">
    <link rel="stylesheet" :href="'/api/v1/article.css?id=' + id">
    <div class="alert alert-info">
      <h3>
      内容页预览
      </h3>
      <hr>
      分辨率：
      <select v-model="current_resolution">
        <option v-for="v, k in resolutions" :value="k" :key="k" :selected="current_resolution == k">
          {{ v.name }} ({{ v.width }}像素)
        </option>
      </select>
    </div>
    <div class="content-container" :class="content_class">
      <div class="article">
        <div v-html="content" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticlePreview',
  props: ['id'],
  components: {
  },
  data: function () {
    return {
      content: '',
      resolutions: {
        'low': {
          name: '低',
          width: 320,
        },
        'medium': {
          name: '中',
          width: 360,
        },
        'high': {
          name: '高',
          width: 480,
        },
      },
      current_resolution: 'medium',
    };
  },
  computed: {
    content_class: function() {
      return 'content-' + this.current_resolution;
    },
  },
  methods: {
    reload: async function() {
      var r = await this.$root.api_get("/api/article/?raw=1&id=" + this.id);
      this.content = r.data;
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style>
body {
  background: #eee;
}
div.container {
  padding: 1rem;
  max-width: 1024px;
}
div.content-container {
  overflow: hidden;
  border: 3px solid #eef;
  margin: 1rem auto 0 auto;
  background: white;
}
div.content-low {
  width: 320px;
}
div.content-medium {
  width: 360px;
}
div.content-high {
  width: 480px;
}
</style>

