<template>
  <div :style="_style">
    <el-popover
      trigger="click"
      placement="right"
      width="400"
      title="编辑二维码"
      :disabled="!edit"
    >
      <el-form label-position="left" label-width="100px" style="padding:20px 10px 0 10px" size="mini">
        <el-form-item label="圆角">
          <el-slider
            v-model="item.css.borderRadius"
            show-input
            :min="0"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="边框颜色">
          <el-color-picker v-model="item.css.borderColor" />
        </el-form-item>
        <el-form-item label="边框大小">
          <el-slider
            v-model="item.css.borderWidth"
            show-input
            :min="0"
            :max="20"
          />
        </el-form-item>
      </el-form>
      <div slot="reference" style="position: relative">
        <i class="el-icon-picture" style="width: 100%;color: #aaa" :style="{fontSize:item.css.height+'px'}" />
        <div style="position: absolute;bottom: 5px;width: 100%;text-align: center">自定义图</div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'DkPosterViewText',
  props: {
    item: {
      default: () => {
        return {}
      },
      type: Object
    },
    edit: {
      default: false, type: Boolean
    }
  },
  data() {
    return {
    }
  },
  computed: {
    _style() {
      var css = this.item.css
      return {
        backgroundColor: css.background,
        height: '100%',
        overflow: 'hidden',
        borderRadius: css.borderRadius + 'px'
      }
    }
  },
  mounted() {
    // var css = this.item.css
    // this.$set(this.item, 'type', 'image')
    // if (!css.background) {
    //   this.$set(css, 'background', '#f5f5f5')
    // }
    // if (!css.borderColor) {
    //   this.$set(css, 'borderColor', '#fff')
    // }
    // if (!css.color) {
    //   this.$set(css, 'color', '#333')
    // }
    // if (!css.borderWidth) {
    //   this.$set(css, 'borderWidth', 5)
    // }
    //
    // console.log(this.item)
  },
  methods: {}
}
</script>

<style scoped lang="scss">

</style>
