<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-color-picker v-model="item.css.background" />
        </el-form-item>
        <el-form-item label="二维码颜色">
          <el-color-picker v-model="item.css.color" />
        </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-item label="圆弧大小">
          <el-slider
            v-model="item.css.borderRadius"
            show-input
            :min="0"
            :max="20"
          />
        </el-form-item>
      </el-form>
      <div slot="reference">
        <svg t="1663386742109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3465" width="100%">
          <path d="M320 64H64v256h256V64z m64-64v384H0V0h384zM128 128h128v128H128z m832-64h-256v256h256V64z m64-64v384h-384V0h384z m-256 128h128v128h-128z m-448 576H64v256h256v-256z m64-64v384H0v-384h384z m-256 128h128v128H128zM448 0h64v64H448z m64 64h64v64H512zM448 128h64v64H448z m64 64h64v64H512zM448 256h64v64H448z m64 64h64v64H512zM448 384h64v64H448z m0 128h64v64H448z m64 64h64v64H512z m-64 64h64v64H448z m64 64h64v64H512z m-64 64h64v64H448z m64 64h64v64H512z m-64 64h64v64H448z m64 64h64v64H512z m448-448h64v64h-64zM64 512h64v64H64z m64-64h64v64H128zM0 448h64v64H0z m256 0h64v64H256z m64 64h64v64H320z m64-64h64v64H384z m192 64h64v64H576z m64-64h64v64h-64z m64 64h64v64h-64z m64-64h64v64h-64z m64 64h64v64h-64z m64-64h64v64h-64z m64 192h64v64h-64z m-384 0h64v64H576z m64-64h64v64h-64z m64 64h64v64h-64z m128 0h64v64h-64z m64-64h64v64h-64z m64 192h64v64h-64z m-384 0h64v64H576z m64-64h64v64h-64z m128 0h64v64h-64z m64 64h64v64h-64z m64-64h64v64h-64z m64 192h64v64h-64z m-320-64h64v64h-64z m64 64h64v64h-64z m64-64h64v64h-64z m64 64h64v64h-64z m-192 64h64v64h-64z m128 0h64v64h-64z m128 0h64v64h-64z" :fill="item.css.color" p-id="3466" />
        </svg>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'DkPosterViewQrcode',
  props: {
    item: {
      default: () => {
        return {}
      },
      type: Object
    },
    edit: {
      default: false, type: Boolean
    }
  },
  data() {
    return {
    }
  },
  computed: {
    _style() {
      var css = this.item.css
      return {
        backgroundColor: css.background,
        // borderColor: css.borderColor,
        // borderStyle: 'solid'
        height: '100%',
        overflow: 'hidden',
        // borderWidth: css.borderWidth + 'px',
        borderRadius: css.borderRadius + 'px'
      }
    }
  },
  mounted() {
    var css = this.item.css
    this.$set(this.item, 'type', 'qrcode')
    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>
