<template>
  <div>
    <el-input :value="input" :placeholder="placeholder" disabled>
      <template slot="append">
        <el-button @click.native="onClick">设置</el-button>
      </template>
    </el-input>
    <el-dialog :visible.sync="show" width="1200px" append-to-body title="自定义海报" top="10vh">
      <dk-poster v-model="posterData" @submit="success" />
    </el-dialog>
  </div>
</template>

<script>
import DkPoster from './DkPoster'
export default {
  name: 'DkPosterInput',
  components: { DkPoster },
  props: {
    placeholder: {
      default: '',
      type: String
    },
    value: {
      default: () => {
        return {}
      },
      type: [Object]
    }
  },
  data() {
    return {
      show: false,
      posterData: {
        background: '',
        width: 320,
        height: 500,
        borderRadius: 0,
        views: []
      }
    }
  },
  computed: {
    input() {
      return '宽高：' + this.posterData.width + 'X' + this.posterData.height + '，' + this.posterData.views.length + '个元素，' + (this.posterData.background ? '有' : '无') + '背景图'
    }
  },
  watch: {
    value() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.posterData = this.value
      if (!this.value.views) {
        this.$set(this.posterData, 'views', [])
      }
      if (!this.value.width) {
        this.$set(this.posterData, 'width', 320)
      }
      if (!this.value.height) {
        this.$set(this.posterData, 'height', 500)
      }
      this.$emit('input', this.posterData)
    },
    onClick() {
      this.show = true
    },
    success() {
      this.show = false
      console.log(14444)
      this.$emit('input', this.posterData)
    }
  }
}
</script>

<style scoped>

</style>
