<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="title">
          <el-input v-model="form.title"  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="动态内容" prop="content">
          <Editor  v-model="form.content" :height="300"  :disabled="disabled"></Editor>

        </el-form-item>
        <el-form-item label="添加图片" class="customer" prop="name">
          <ImageUpload  :disabled="disabled" ref="refUpload"></ImageUpload>
        </el-form-item>
        <el-form-item>
        </el-form-item>
        <!-- <quillEditor></quillEditor> -->
      </el-form>
      <el-button type="primary"  @click="onSubmit">{{btn}}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import comvideo from './video.vue'
import {  articlesGET } from '@/api/orderform/index'

export default {
  name: "modify",
  components: {
    comvideo
  },
  props: {
    dialogVisibl: {
      type: Boolean
    },
    title: {
      type: String
    },
    btn: {
      type: String
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  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: {
        title: '',
        content: '',
        fileVos:[]
      },
      currentInfo:{},
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  created() { },
  watch:{
    currentInfo(sta,val){
      console.log(sta,val,'kllllllllllllll')
    },
    title(sta,val){
          this.$refs['refUpload'].fileVos = []
    },
    dialogVisibl(sta,val){
      if(this.title == '新增订单'){
        this.$refs['refUpload'].fileVos = []
      }
    }
  },
  methods: {
    dialog() {
      this.$emit('diaisibl')
    },
    // 详情
    articles(val) {
      articlesGET(val).then((res) => {
         this.form = res.data
         if(res.data.fileVos != null){
          this.$refs['refUpload'].fileVos = res.data.fileVos
         }else{
          this.$refs['refUpload'].fileVos = []
         }
      })
    },
    onSubmit() {
      this.form.fileVos = this.$refs['refUpload'].fileVos
      this.$emit('onSubmit', this.form.fileVos)
    }
  }
};
</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>