<template>
  <div>
    <Card style="height:100%">
      <p slot="title">
        <Icon type="ios-film-outline"></Icon>
        {{forminfo.name}}
      </p>
      <Form ref="ofm" :model="formModel" :rules="metaRules">
        <template v-if="forminfo.lists && forminfo.lists.length>0">
          <Tabs value="main">
            <TabPane label="表单信息"  name="main">
              <template  v-for="group in forminfo.main">
                <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>
            </TabPane>
            <TabPane v-for="lst in forminfo.lists"  :key="lst.refBizCode" :label="lst.title" :name="lst.refBizCode">
              标签二的内容
              </TabPane>
          </Tabs>
        </template>
        <template v-else v-for="group in forminfo.main">
          <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
          <Row type="flex" justify="space-around" align="top" :key="'r'+group.title">
            <Col :xs="12" :sm="8" :md="6" :lg="6" 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>
      <div class="form-footer">
              <slot  :fm="formModel">
                  
              </slot>
      </div>
    </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: {
    resetForm(){
       this.$refs.ofm.resetFields()
    },
    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.main.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>
.form-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
</style>
