<template>
  <!-- Two-way Data-Binding -->
  <div class="act-edit">
    <div class="min-container">
      <div style="min-height: 460px">
        <Form :label-width="86">
          <FormItem label="展会名称">
            <Input size="large" v-model="form.name" />
          </FormItem>
          <FormItem label="展会概况">
            <quill-editor
              v-model="form.detailContent"
            />
          </FormItem>
          <FormItem label="联系我们">
            <quill-editor
              v-model="form.contactUs"
            />
          </FormItem>
          <FormItem>
            <Button type="primary" size="large" @click="upadteActivity">提交</Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import quillEditor from "@/components/quillEditor";
import { getActivityDetail, upadteActivity } from '@/api'
export default {
  data() {
    return {
      form: {
        contactUs: '',
        detailContent: ''
      }
    };
  },
  components: {
    quillEditor
  },
  
  computed: {
  },
  mounted() {
    console.log("this is current quill instance object", this.editor);
    this.getActivityDetail()
  },
  methods: {
    upadteActivity () {
      upadteActivity(this.form).then(() => {
        this.$Message.success('更新成功')
      })
    },
    getActivityDetail () {
      getActivityDetail().then(res => {
        this.form = res.data
      })
    }
  },
};
</script>

<style lang="less">
.act-edit {
  padding: 30px;
  .ql-snow .ql-picker {
    color: #fff;
  }
  .ql-snow .ql-stroke {
    stroke: #fff;
  }
  .ql-snow .ql-fill,
  .ql-snow .ql-stroke.ql-fill {
    fill: #fff;
  }
  .ql-editor {
    background: #161a1a;
    min-height: 460px;
  }
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    color: #000;
  }
  .ql-snow .ql-icon-picker .ql-picker-item svg line {
    stroke: #444;
  }
}
</style>
