<template>
  <div :class="[b(),className]"
       :style="styleSizeName"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
       ref="main">
    <avue-form :option="fillOption"
               @submit="handleSubmit"
               v-model="fillForm"></avue-form>
  </div>
</template>

<script>
import { getObj } from '@/api/fill'
import { addObj } from '@/api/filldata'
import create from "../../create";
export default create({
  name: "fill",
  data () {
    return {
      fillOption: {},
      fillForm: {}
    };
  },
  computed: {
    fillId () {
      return this.option.id
    }
  },
  watch: {
    fillId () {
      this.getOption()
    }
  },
  created () {
    this.getOption()
  },
  methods: {
    handleSubmit (form, done) {
      let data = {
        templateId: this.fillId,
        data: JSON.stringify(this.fillForm)
      }
      addObj(data).then(() => {
        this.$message.success('提交成功');
        this.fillForm = {}
        this.handleClick()
        done()
      }).catch(err => {
        done()
      })
    },
    getOption () {
      getObj(this.option.id).then(res => {
        const data = res.data.data;
        try {
          this.fillOption = JSON.parse(data.options);
        } catch {

        }
      })
    }
  },
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
});
</script>

