<template>
  <div class="properties-centent kk-checkbox">
    <div class="head-title"></div>
    <div class="properties-body">
      <a-form>
        <a-form-item label="表单距顶部距离（px）">
          <div class="change-col-box">
            <div>
              <a-input-number v-model="config.marginTop" />
            </div>
          </div>
        </a-form-item>
        <a-form-item label="表单属性">
          <kCheckbox
            v-if="typeof config.hideRequiredMark !== 'undefined'"
            v-model="config.hideRequiredMark"
            label="隐藏必选标记"
          />
        </a-form-item>

        <a-form-item label="提交按钮文字">
          <a-input v-model="config.submitButtonText" />
        </a-form-item>
  
        <a-form-item label="背景图片" :colon="false" v-if="config.backgroundImage !== 'undefined'">
          <!-- 上传图片 -->
          <UploadImg
            @change="handleChange"
            :value="urlList"
            :record="{
              options: {
                multiple: false,
                limit: 1,
                listType: 'picture',
                placeholder: '上传背景图片'
              }
            }"
            listType="picture"
          />
        </a-form-item>
        <a-form-item label="提示">
          实际预览效果请点击预览查看
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
/*
 * author kcz
 * date 2019-11-20
 * description 表单属性设置面板组件
 */
import kCheckbox from '../../KCheckbox/index.vue'
import UploadImg from '../../UploadImg'

import axios from 'axios'
export default {
  name: 'FormProperties',
  components: {
    kCheckbox,
    UploadImg
  },
  data() {
    return {
      urlList: []
    }
  },
  props: {
    config: {
      type: Object,
      required: true
    },
    previewOptions: {
      type: Object,
      required: true
    }
  },
  watch: {
    config: {
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        if (val && val.backgroundImage && !this.urlList.length) {
          console.log('genxingl')
          this.urlList.push({ url: val.backgroundImage, type: 'img', name: ' ', status: 'done', uid: Math.random() })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleChange(value) {
      if (value.length) {
        this.config.backgroundImage = value[0].url
      } else {
        this.config.backgroundImage = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.change-col-box {
  > div {
    padding: 5px;
    display: flex;
    > label {
      text-align: right;
      padding-right: 8px;
      display: block;
      font-size: 16px;
      width: 45px;
    }
  }
}
</style>
