<template>
  <!--
    作者：luoyiming
    时间：2020-06-25
    描述：插件中心-限时秒杀-秒杀活动-基础设置
  -->
  <div class="active-basic">
    <div class="common-form">基本信息</div>

    <el-form-item label="活动标题" prop="title" :rules="[{ required: true, message: '请输入活动标题', trigger: 'blur' }]">
      <el-input v-model="form.title" placeholder="请输入活动标题" class="max-w460"></el-input>
    </el-form-item>

    <el-form-item label="活动广告" prop="image_id" :rules="rulesImage">
      <div class="d-c-c ad-picture" @click="openUpload">
        <img v-if="form.image_id > 0" :src="form.file_path" width="300" height="124" />
        <span v-else class="el-icon-picture-outline"></span>
      </div>
      <p class="ml10 gray">提示：图片尺寸建议750x310</p>
    </el-form-item>

    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>
import Upload from '@/components/file/Upload';
export default {
  components: {
    /*选择商品组件*/
    Upload
  },
  data() {

    /*验证图片是否上传*/
    const validatorImages = (rule, value, callback) =>{
    	if(value<1){
    		return callback(new Error('请上传活动图'));
    	}else{
         callback();
    	}
    };

    return {
      /*是否上传图片*/
      isupload: false,
      /*图片是否上传了*/
      rulesImage: [{ validator: validatorImages, required: true, message: '请上传活动广告图片', trigger: 'change' }]
    };
  },
  props: {
    form: Object
  },
  methods: {
    /*上传*/
    openUpload(e) {
      this.isupload = true;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.form.file_path = e[0].file_path;
        this.form.image_id = e[0].file_id;
      }
      this.isupload = false;
    }
  }
};
</script>

<style lang="scss">
.active-basic .ad-picture {
  width: 300px;
  height: 124px;
  border-radius: 16px;
  font-size: 40px;
  border: 1px dashed #cccccc;
  color: $blue;
  cursor: pointer;
  overflow: hidden;
}
.active-basic .ad-picture:hover {
  border: 1px dashed $blue;
}

.active-basic .ad-picture img {
  object-fit: fill;
}
</style>
