<template>
  <h2>小程序页面</h2>
  <hr>
  <div class="fade-in">
    <div class="alert alert-info">
      <p>在这里可以对小程序首页内容进行定制。</p>
      <p>点击预览区域，在页面下方配置内容。</p>
      <p>最后请在页面底部点击保存后生效。</p>
    </div>
    <div v-if="data" class="row">
      <div class="col-lg-6">
        <MiniProgramPreview :data="data" @click_section="update_editing"/>
      </div>
      <div class="col-lg-6">
        <div v-if="!editing">
          <button class="btn btn-secondary edit-bg" @click="update_editing('carousel')">修改轮播图片</button>
          <button class="btn btn-secondary edit-bg" @click="update_editing('video')">修改视频</button>
          <button class="btn btn-secondary edit-bg" @click="update_editing('icons')">修改图标链接</button>
          <button class="btn btn-secondary edit-bg" @click="update_editing('scan_button')">修改扫码按钮</button>
          <button class="btn btn-secondary edit-bg" @click="update_editing('static')">修改底部静态图片</button>
          <button class="btn btn-secondary edit-bg" @click="update_editing('background')">修改背景</button>
          <hr>
          <button class="btn btn-success save" @click="save">保存</button>
          <button class="btn btn-secondary reset" @click="reload">重置</button>
        </div>
        <div v-if="editing=='carousel'">
          <h5>图片轮播</h5>
          <ImageLinks @update="set_carousel" :items="data.carousel" />
          <button class="btn btn-secondary return" @click="editing=null">返回</button>
        </div>
        <div v-if="editing=='video'">
          <h5> 视频展示 </h5>
          <MediaSelector type="video" v-model="data.video.url">
            <div class="alert alert-info">
              <div>
                格式： mp4
              </div>
              <div>
                建议分辨率： 1280x720 / 854x480
              </div>
            </div>
          </MediaSelector>
          <button class="btn btn-secondary return" @click="editing=null">返回</button>
        </div>
        <div v-if="editing=='icons'">
          <h5> 图标链接 </h5>
          <div class="alert alert-secondary">
            每行显示图标个数：
            <select class="form-control my-1" v-model="data.icons_per_line">
              <option value=3>3</option>
              <option value=4>4</option>
            </select>
          </div>
          <div v-for="x, i in data.icons" :key="i" class="alert alert-info inline-block one-icon">
            <MediaSelector type="image" v-model="x.url">
              <div class="alert alert-info">
                建议分辨率： 256x256 / 128x128 / 64x64
              </div>
            </MediaSelector>
            <hr>
            <label>标题</label>
            <input class="form-control" type="text" v-model="x.title" />
            <hr>
            <label>链接</label>
            <div>
              <ArticleSelector v-model="x.link" />
            </div>
            <div>
              <button class="btn btn-danger" @click="data.icons.splice(i, 1)">x</button>
            </div>
          </div>
          <div>
            <button class="btn btn-primary" @click="add_icon">添加</button>
          </div>
          <button class="btn btn-secondary return" @click="editing=null">返回</button>
        </div>
        <div v-if="editing=='scan_button'">
          <h5>扫码按钮</h5>
          <div class="alert alert-secondary">
            按钮文字：
            <input class="form-control my-1" type="text" v-model="data.scan_button.text" placeholder="开始扫码" />
          </div>
          <div class="alert alert-secondary">
            按钮颜色：
            <input class="form-control my-1" type="color" v-model="data.scan_button.color" />
            RGB：
            <input class="form-control my-1" type="text" v-model="data.scan_button.color" />
          </div>
          <div class="alert alert-secondary">
            按钮文字颜色：
            <input class="form-control my-1" type="color" v-model="data.scan_button.text_color" />
            RGB：
            <input class="form-control my-1" type="text" v-model="data.scan_button.text_color" />
          </div>
          <button class="btn btn-secondary return" @click="editing=null">返回</button>
        </div>
        <div v-if="editing=='static'">
          <h5> 图片展示 </h5>
          <ImageLinks @update="set_static" :items="data.static" />
          <button class="btn btn-secondary return" @click="editing=null">返回</button>
        </div>
        <div v-if="editing=='background'">
          <h5>页面背景</h5>
          选择背景类型：
          <CButtonGroup class="mode-buttons" role="group" aria-label="Background type">
            <CButton @click="data.background.type = 'none'" :color="data.background.type == 'none' ? 'primary' : 'secondary'">
              无
            </CButton>
            <CButton @click="data.background.type = 'color'" :color="data.background.type == 'color' ? 'primary' : 'secondary'">
             纯色
            </CButton>
            <CButton @click="data.background.type = 'gradient'" :color="data.background.type == 'gradient' ? 'primary' : 'secondary'">
              渐变
            </CButton>
            <CButton @click="data.background.type = 'image'" :color="data.background.type == 'image' ? 'primary' : 'secondary'">
              图片
            </CButton>
          </CButtonGroup>
          <div v-if="data.background.type != 'none'" class="alert alert-secondary my-3 background-settings">
            <div v-if="data.background.type=='color'">
              背景颜色：
              <input class="form-control" type="color" v-model="data.background.color" />
              RGB：
              <input class="form-control" type="text" v-model="data.background.color" />
            </div>
            <div v-if="data.background.type=='gradient'">
              颜色1
              <input class="form-control" type="color" v-model="data.background.gradiant_begin" />
              RGB：
              <input class="form-control" type="text" v-model="data.background.gradiant_begin" />
              <hr>

              颜色2
              <input class="form-control" type="color" v-model="data.background.gradiant_end" />
              RGB：
              <input class="form-control" type="text" v-model="data.background.gradiant_end" />
            </div>
            <div v-if="data.background.type=='image'">
              <MediaSelector type="image" v-model="data.background.image">
                <div class="alert alert-info">
                  <div>
                    推荐使用&gt;=828×1792像素的图片。小程序中图片会自动伸缩以覆盖屏幕大小。
                  </div>
                </div>
              </MediaSelector>
            </div>
          </div>
          <button class="btn btn-secondary return" @click="editing=null">返回</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageLinks from '../components/image-links';
import MediaSelector from '../components/media-selector';
import ArticleSelector from '../components/article-selector';
import MiniProgramPreview from '../components/mini-program-preview';

export default {
  name: 'MiniProgramContent',
  props: [],
  components: {
    ImageLinks,
    MediaSelector,
    ArticleSelector,
    MiniProgramPreview,
  },
  data: function () {
    return {
      data: null,
      editing: null,
    };
  },
  computed: {
  },
  methods: {
    add_icon: function() {
      this.data.icons.push({
        title: '空',
        url: '',
        link: '',
      });
    },
    update_editing: function(section) {
      this.editing = section;
    },
    update_icon: function(i, url) {
      this.data.icons[i].img = url;
    },
    set_carousel: function(items) {
      this.data.carousel = items;
    },
    set_static: function(items) {
      this.data.static = items;
    },
    save: async function() {
      var data = {
        content: this.data,
      };
      await this.$root.api_post('/api/v1/mini-program-content/', data);
      this.reload();
    },
    initialize_data: function(d) {
      d = d || {};
      d.carousel ||= [];
      d.video ||= {url: null};
      d.icons ||= [];
      d.icons_per_line ||= 3;
      d.static ||= [];
      d.scan_button ||= {
        text: '开始扫码',
        color: '#008000',
        text_color: '#ffffff',
      };
      var white = '#ffffff';
      d.background ||= {
        type: 'none',
        color: white,
        gradiant_begin: white,
        gradiant_end: white,
      };
      return d;
    },
    reload: async function() {
      var content;
      try {
        var r = await this.$root.api_get('/api/v1/mini-program-content/?tenant=' + this.$root.tenant_id);
        content = r.data.content;
      } catch {
        content = {};
      }
      this.data = this.initialize_data(content);
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
button.save, button.reset, button.edit-bg {
  margin: 1rem auto;
  display: block;
  padding: 0.5rem 5rem;
}
button.return {
  display: block;
  margin: 1rem 0;
}
div.one-icon {
  display: inline-block;
  max-width: 25%;
}
.background-settings .form-control {
  width: 25%;
}
</style>

