<script>
import formBuilder from '@/utils/formBuilder'
export default {
  props: {
    device: {
      type: String,
      default: 'desktop',
      required: true
    }
  },
  data() {
    return {
      info: [
        {
          id: 1,
          type: "text",
          gs_x: 1,
          gs_y: 1,
          gs_height: 1,
          gs_width: 6,
          name: "aaa",
          label: "aaa",
          help_text: 'write aaa'
        },
        {
          id: 2,
          type: "textarea",
          gs_x: 7,
          gs_y: 1,
          gs_height: 1,
          gs_width: 6,
          name: "bbb",
          label: "bbb",
          help_text: 'write bbb'
        },
        {
          id: 3,
          type: "date",
          gs_x: 1,
          gs_y: 2,
          gs_height: 1,
          gs_width: 4,
          name: "ccc",
          label: "ccc",
          help_text: 'write ccc'
        },
        {
          id: 4,
          type: "datetime",
          gs_x: 5,
          gs_y: 2,
          gs_height: 1,
          gs_width: 4,
          name: "ddd",
          label: "ddd",
          help_text: 'write ddd'
        },
        {
          id: 5,
          type: "select",
          gs_x: 1,
          gs_y: 3,
          gs_height: 1,
          gs_width: 6,
          name: "eee",
          label: "eee",
          help_text: 'write eee'
        },
        {
          id: 6,
          type: "radio",
          gs_x: 1,
          gs_y: 4,
          gs_height: 1,
          gs_width: 6,
          name: "fff",
          label: "fff",
          help_text: 'write fff'
        },
        {
          id: 7,
          type: "file",
          gs_x: 1,
          gs_y: 5,
          gs_height: 1,
          gs_width: 6,
          name: "ggg",
          label: "ggg",
          help_text: 'write ggg'
        },
        {
          id: 8,
          type: "label",
          gs_x: 1,
          gs_y: 6,
          gs_height: 1,
          gs_width: 6,
          name: "hhh",
          label: "hhh",
        },
        {
          id: 9,
          type: "static",
          gs_x: 1,
          gs_y: 7,
          gs_height: 1,
          gs_width: 6,
          name: "iii",
          label: "iii",
        },
        {
          id: 10,
          type: "hr",
          gs_x: 1,
          gs_y: 8,
          gs_height: 1,
          gs_width: 6,
          name: "jjj",
          label: "jjj",
        },
        {
          id: 11,
          type: "choice",
          gs_x: 1,
          gs_y: 9,
          gs_height: 1,
          gs_width: 6,
          name: "kkk",
          label: "kkk",
        },
        {
          id: 12,
          type: "choices",
          gs_x: 1,
          gs_y: 10,
          gs_height: 1,
          gs_width: 6,
          name: "lll",
          label: "lll",
        },
      ],
      form: {
        aaa: "",
        bbb: ""
      },
      file: {
        ggg: []
      }
    }
  },
  methods: {
  },
  computed: {

  },
  render(h) {
    return h('el-form', {
      class: 'form',
      props: {
        model: this.form,
        'label-position': 'top'
      }
    },this.info.map(field => formBuilder.bind(this)(this.device, field, h)))
  }
}
</script>

<style scoped lang="scss">
.form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}
::v-deep .el-form-item {
  margin-bottom: 0;
}
::v-deep .el-form-item__label {
  padding-bottom: 0;
}
</style>
