<template>
  <div class="video-config">
    <div class="config-header">设置</div>
    <widgetFormitem>
      展示视频名称
      <el-switch slot="right" v-model="currentSub.show" @change="change('show', $event)" />
    </widgetFormitem>
    <div class="confit-item">
      <div class="config-title">
        视频名称
      </div>
      <div class="config-setting">
        <Input v-model="currentSub.title" class="full-input" @input="change('title', $event)" />
      </div>
    </div>
    <div class="confit-item">
      <div class="config-title">
        视频链接
      </div>
      <div class="config-setting">
        <Input v-model="currentSub.link" class="full-input" @input="change('link', $event)" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Input } from 'element-ui'
import widgetFormitem from '../components/widgetFormitem'
export default {
  components: {
    widgetFormitem,
    Input
  },
  computed: {
    ...mapState('creationCamp', ['currentComponentKeyCode', 'currentComponentConfig']),
    currentSub() {
      return this.currentComponentConfig
    }
  },
  methods: {
    ...mapMutations('creationCamp', ['setComponentConfig']),
    change(key, value) {
      const temporary = {}
      temporary[key] = value
      this.setComponentConfig({
        keyCode: this.currentComponentKeyCode,
        content: temporary
      })
    }
  }
}
</script>

<style scoped>

</style>
