<template>
  <div class="app-container">
    <el-dialog :title='title' :visible.sync="dialogVisibl" width="60%" :before-close="dialog">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="动态标题" class="customer" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="动态内容" prop="desc">
          <Editor></Editor>

        </el-form-item>
        <el-form-item label="添加图片" class="customer" prop="name">
          <ImageUpload></ImageUpload>
        </el-form-item>
        <el-form-item>
        </el-form-item>
        <!-- <quillEditor></quillEditor> -->
      </el-form>
      <el-button type="primary" @click="onSubmit">确认修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
import comvideo from './video.vue'

export default {
  name: "modify",
  components: {
    comvideo
  },
  props: {
    dialogVisibl: {
      type: Boolean
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      width: '30%',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      value1: '',
      form: {
        name: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  created() { },
  methods: {
    dialog() {
      this.$emit('diaisibl')
    },
    onSubmit() {
      this.$emit('onSubmit')
    }
  }
};
</script>
<style  lang="scss" scoped>
.description {
  font-size: 25px;
  margin-top: 10px;
}

.customer {
  width: 33%;
}

.imgdiv {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  &-img {
    width: 120px;
  }
}
</style>