<script>
import Vue from 'vue'

export default Vue.extend({
  name: 'Guide',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      guideList: {
        'createExpoStep1': {
          'title': '创建展会'
        },
        'perRegFormItem': {
          'title': '表单项介绍',
          'text': '显示在输入框上方的“标签文字”，告诉用户这个框是用来填什么的。比如“姓名”、“手机号”。',
          'media': '/static/guide/表单项介绍.jpg'
        },
        'perRegFormPlaceholder': {
          'title': '提示文字',
          'text': '输入框里默认显示的灰色小字，用户一输入内容它就会自动消失。比如“请输入您的姓名”。',
          'media': '/static/guide/提示文字.jpg'
        },
        'perRegTimeStartPlaceholder': {
          'title': '起始提示文字',
          'text': '在选择“开始时间”或“开始日期”的框里，默认显示的提示文字。比如“请选择开始日期”。',
          'media': '/static/guide/起始提示文字.jpg'
        },
        'perRegTimeEndPlaceholder': {
          'title': '结束提示文字',
          'text': '在选择“结束时间”或“结束日期”的框里，默认显示的提示文字。比如“请选择结束日期”。',
          'media': '/static/guide/结束提示文字.jpg'
        },
        'perRegTimeFencePlaceholder': {
          'title': '范围分隔符',
          'text': '当选择一个时间范围时，显示在“开始”和“结束”两个框中间的文字，通常是“至”或“-”。',
          'media': '/static/guide/范围分隔符.jpg'
        },
        'perRegOptionListEdit': {
          'title': '选项设定',
          'text': '用于设置下拉框、单选按钮（只能选一个）或多选框（可以选多个）里的具体选项。比如，为“性别”设置“男”、“女”两个选项。',
          'media': '/static/guide/选项设定.mp4'
        },
        'perRegMaxValue': {
          'title': '最大值',
          'text': '设置一个数字的上限。用户在填写表单时，输入的数字不能超过这个值。',
          'media': '/static/guide/最大值.jpg'
        },
        'perRegMinValue': {
          'title': '最小值',
          'text': '设置一个数字的下限。用户在填写表单时，输入的数字不能低于这个值。',
          'media': '/static/guide/最小值.jpg'
        },
        'perRegStepValue': {
          'title': '步进值',
          'text': '设置数字输入框每次增加或减少的幅度。比如设为5，用户点击“+”时，数字会按0、5、10...这样变化。',
          'media': '/static/guide/步进值.mp4'
        },
        'perRegCompWidth': {
          'title': '组件宽度',
          'text': '调整这个输入框在页面上占多宽。您可以选择让它占一小半（如1/3、1/2），或者占满一整行。',
          'media': '/static/guide/组件宽度.mp4'
        },
        'perRegIsRequired': {
          'title': '是否必填',
          'text': '打开开关后用户必须填写这个输入框才能提交表单，反之用户可以自由选择是否填写'
        }
      }
    }
  },
  methods: {
    getGuide(id) {
      const guide = this.guideList[id]
      const ReturnGuide = {}
      if (guide) {
        ReturnGuide.title = guide.title
        ReturnGuide.text = guide.text
        if (/\.(jpg|jpeg|png|gif)$/.test(guide.media)) {
          ReturnGuide.image = guide.media
        } else {
          ReturnGuide.video = guide.media
        }
      } else {
        ReturnGuide.title = '乎哟！出错了'
        ReturnGuide.text = '现在无法显示这个教程'
      }
      return ReturnGuide
    }
  }
})
</script>

<template>
  <div class="guide-cont">
    <img v-if="getGuide(id).image" :src="getGuide(id).image" class="guide-video">
    <video v-if="getGuide(id).video" autoplay loop :src="getGuide(id).video" muted class="guide-video"/>
    <div class="title">{{ getGuide(id).title }}</div>
    <div class="text">{{ getGuide(id).text }}</div>
  </div>
</template>

<style scoped>
.guide-cont{
  width: 100%;
  .title{
    color: #353535;
    font-size: 22px;
    font-weight: bold;
  }
  .text{
    margin-top: 8px;
  }
  .guide-video{
    mix-blend-mode: darken;
    width: 100%;
    aspect-ratio: 2/1;
  }
}
</style>
