<template>
  <div>
    <Card>
      <div>
        <button type="primary" @click="testclick">test</button>
      </div>
        <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            {{forminfo.name}}
        </p>
      <Form ref="formInline" :model="formModel" :rules="metaRules">
        <template v-for="group in forminfo.data">
          <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
          <Row  type="flex" justify="space-around" align="top" :key="'r'+group.title">
            <Col :xs="2" :sm="4" :md="6" :lg="8" v-for="ctl in group.ctls" :key="ctl.prop">
              <FormItem v-if="ctlVisable[ctl.prop]" :label="ctl.label" :prop="ctl.prop">
                <template v-if="ctl.type=='input'">
                  <input v-model="formModel[ctl.prop]" />
                </template>
                <template v-if="ctl.type=='btn'">
                  <button :type="ctl.btncss"  :icon="ctl.icon">{{ctl.label}}</button>
                </template>
                <template v-if="ctl.type=='dic-select'">
                  <DicSelect  v-model="formModel[ctl.prop]"  :dicName="ctl.dicName" :placeHolder="ctl.placeHolder" :isMulti="ctl.isMulti"></DicSelect>
                </template>
                <template v-if="ctl.type=='model-select'">
                  <ModelSelect  v-model="formModel[ctl.prop]"  :refModel="ctl.refModel"  :placeHolder="ctl.placeHolder" :isMulti="ctl.isMulti"></ModelSelect>
                </template>
                <template v-if="ctl.type=='remote-select'">
                  <RemoteSelect  v-model="formModel[ctl.prop]"  :refModel="ctl.refModel"  :placeHolder="ctl.placeHolder" :isMulti="ctl.isMulti"></RemoteSelect>
                </template>
                  <template v-if="ctl.type=='switch'">
                    <Switchs  v-model="formModel[ctl.prop]"  :openlabel="ctl.opentext"  :closelabel="ctl.closetext"  :truecolor="ctl.truecolor"   :falsecolor="ctl.falsecolor"></Switchs>
                </template>
                <template v-if="ctl.type=='checkgroup'">
                    <Checkgroups  v-model="formModel[ctl.prop]"  :dicName="ctl.dicName"   :refModel="ctl.refModel"       :isborder="ctl.isBorder"></Checkgroups>
                </template>
                <template v-if="ctl.type=='radiogroup'">
                    <Radiogroups  v-model="formModel[ctl.prop]"  :dicName="ctl.dicName"   :refModel="ctl.refModel"       :isborder="ctl.isBorder"></Radiogroups>
                </template>
              </FormItem>
            </Col>
          </Row>
        </template>
      </Form>
    </Card>
  </div>
</template>
<script>
// import { getTableData } from '@/api/data'
import DicSelect  from "./childs/dicselects"
import ModelSelect  from "./childs/modelselects"
import RemoteSelect  from "./childs/remoteselects"
import Switchs  from "./childs/switchs"
import Checkgroups  from "./childs/checkgroups"
import Radiogroups  from "./childs/rediogroups"
export default {
  name: "forms",
  components: {
    DicSelect,
    ModelSelect,
    RemoteSelect,
    Switchs,
    Checkgroups,
    Radiogroups
  },
  props: {
    fminfo: {
      type: Object,
      default() {
        return {};
      }
    },
    refvalidatemethod: {
      type: Function,
      default() {
        return (rule, value, callback) => {
          return callback();
        };
      }
    }
  },
  data() {
    return {
      forminfo: this.fminfo ? this.fminfo : [],
      formModel: {},
      metaRules: {},
      btninfos: [],
      ctlVisable:{},
    };
  },
  watch: {
    fminfo(nf, of) {
      console.log(">>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<");
     this.initFormModel()
    }
  },
  methods: {
    validatex(rule, value, callback) {
      if (this.refvalidatemethod) {
        return this.refvalidatemethod(rule, value, callback);
      } else {
        return callback();
      }
    },
    testclick() {
      console.log(JSON.stringify(this.formModel));
    },
    initFormModel() {
      this.forminfo.data.forEach(m => {
        if (!m || !m.ctls) {
          return;
        }
        m.ctls.forEach(ctl => {
          this.$set(this.ctlVisable, ctl.prop, true);
          if (ctl.rules) {
            ctl.rules.forEach(r => {
              if (r.validator) {
                r.validator = self[r.validator];
              }
            });
            this.metaRules[ctl.prop] = ctl.rules;
          }
          if (ctl.type.indexOf("select")>=0 || ctl.type.indexOf("checkgroups")>=0) {
            this.$set(this.formModel, ctl.prop, []);
          } else {
            console.log(ctl.prop);
            if (ctl.type == "number") {
              this.$set(this.formModel, ctl.prop, 0);
            } else {
              console.log("=============")
              this.$set(this.formModel, ctl.prop, "");
            }
          }
        });
      });
    }
  },
  created(){
    this.initFormModel();
  },
  mounted() {
  }
};
</script>

<style>
</style>
