<template>
  <div>
    <basic-container>
      <avue-form :option="formOption"
                 v-model="formData"
                 @submit="handleSubmit">
        <template slot-scope="scope"
                  slot="name">
          <avue-crud-input @click.native="tip"
                           :disabled="scope.column.disabled"
                           v-model="scope.value">
          </avue-crud-input>
        </template>
      </avue-form>
    </basic-container>
    <basic-container>
      <el-button @click.native="formate"
                 style="margin: 8px 0">格式化</el-button>
      <el-input type="textarea"
                :autosize="{ minRows: 2, maxRows: 15}"
                placeholder="请输入内容"
                v-model="formJson">
      </el-input>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import formOption from "@/const/forms/formOption";
export default {
  name: "froms",
  data () {
    return {
      formJson: "",
      formOption: formOption,
      formData: {},
    };
  },
  created () {
    this.formJson = JSON.stringify(formOption, null, 2);
  },
  watch: {},
  mounted () {
    this.formData = {
      name: "smallwei",
      sex: 0,
      type: 0,
      grade: [0, 1]
    }
    this.formData.username = "smallwei";
  },
  computed: {
    ...mapGetters(["permission"])
  },
  props: [],
  methods: {
    tip () {
      this.$message({
        message: "点击事件"
      });
    },
    formate () {
      let p = new Promise((resolve, reject) => {
        resolve(JSON.parse(this.formJson));
      });
      p
        .then(data => {
          this.formOption = data;
          this.formJson = JSON.stringify(data, null, 2);
          this.$message({
            message: "数据加载成功",
            type: "success"
          });
        })
        .catch(err => {
          this.$message({
            center: true,
            dangerouslyUseHTMLString: true,
            message: `JSON格式错误<br \>\n${err}`,
            type: "error"
          });
        });
    },
    handleSubmit (form) {
      this.form = form;
      this.$message({
        message: form,
        type: "success"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.from-container {
  padding: 8px 10px;
}
</style>
