<template>
  <div class="form_wrapper">
    <a-form style="marginTop:20px" layout="inline" labelAlign="right" :colon="false" v-if="config.status">
      <a-form-item label="微信环境下禁止分享">
        <a-switch v-model="config.banSharing" />
      </a-form-item>
    </a-form>

    <!-- <a-form layout="inline" labelAlign="right">
      <a-form-item :label="config.status ? '开启' : '关闭'" :colon="false">
        <a-switch v-model="config.status" />
      </a-form-item>
    </a-form> -->

    <a-form v-if="!config.banSharing">
      <a-form-item label="分享标题" :colon="false" v-if="config.title !== 'undefined'">
        <a-input placeholder="请输入分享标题" v-model="config.title" />
      </a-form-item>
      <a-form-item label="分享描述" :colon="false" v-if="config.desc !== 'undefined'">
        <a-input placeholder="请输入分享描述" v-model="config.desc" />
      </a-form-item>
      <a-form-item label="分享图片" :colon="false" v-if="config.imgUrl !== 'undefined'">
        <!-- 上传图片 -->
        <UploadImg
          @change="handleChange"
          :value="urlList"
          :record="{
            options: {
              multiple: false,
              limit: 1,
              listType: 'picture',
              placeholder: '上传背景图片'
            }
          }"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import UploadImg from '../../UploadImg'

export default {
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      urlList: []
    }
  },
  watch: {
    config: {
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        if (val && val.imgUrl && !this.urlList.length) {
          this.urlList.push({ url: val.imgUrl, type: 'img', name: ' ', status: 'done', uid: Math.random() })
        }
      },
      immediate: true,
      deep: true
    }
  },
  components: {
    UploadImg
  },
  methods: {
    handleChange(value) {
      if (value.length) {
        this.config.imgUrl = value[0].url
      } else {
        this.config.imgUrl = ''
      }
    }
  }
}
</script>
