<template>
  <div>
    <Card style="height:100%;padding-bottom:60px;border-radius:0px">
      <p slot="title">
        <Icon type="ios-paper-outline"/>
        {{forminfo.name}}
      </p>
      <Form ref="ofm" :model="formModel" :rules="metaRules" label-position="left">
        <template v-if="forminfo.lists && forminfo.lists.length>0">
          <Tabs value="main" @on-click="tabselected">
            <TabPane label="表单信息" name="main">
              <template v-for="group in forminfo.main">
                <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
                <Row type="flex" justify="start" :key="'r'+group.title">
                  <Col
                    :xs="getCols(group.cols)"
                    :sm="getCols(group.cols)"
                    :md="getCols(group.cols)"
                    :lg="getCols(group.cols)"
                    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
                          type="text"
                          v-model="formModel[ctl.prop]"
                          :placeholder="ctl.placeHolder"
                          :style="ctl.style"
                        >
                      </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"
                          :labelField="ctl.labelField"
                          :valueField="ctl.valueField"
                        ></ModelSelect>
                      </template>
                      <template v-if="ctl.type=='remote-select'">
                        <RemoteSelect
                          v-model="formModel[ctl.prop]"
                          :refModel="ctl.refModel"
                          :placeHolder="ctl.placeHolder"
                          :isMulti="ctl.isMulti"
                          :labelField="ctl.labelField"
                          :valueField="ctl.valueField"
                        ></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>
                      <template v-if="ctl.type=='upload'">
                        <Uploads v-model="formModel[ctl.prop]"></Uploads>
                      </template>
                      <template v-if="ctl.type=='password'">
                        <input
                          type="password"
                          v-model="formModel[ctl.prop]"
                          :placeholder="ctl.placeHolder"
                        >
                      </template>
                      <template v-if="ctl.type=='textarea'">
                        <Input
                          v-model="formModel[ctl.prop]"
                          type="textarea"
                          :placeholder="ctl.placeHolder"
                          :style="ctl.style"
                        />
                      </template>
                    </FormItem>
                  </Col>
                </Row>
              </template>
            </TabPane>
            <TabPane
              :disabled="tabDisabled[lst.bizCode]"
              v-for="lst in forminfo.lists"
              :key="lst.bizCode"
              :label="lst.title"
              :name="lst.bizCode"
            >
              <ChildList
                :ref="lst['bizCode']"
                :modelName="lst['modelName']"
                :metaName="lst['bizCode']"
                :packageName="lst['packageName']"
                :initPropZIndex="1100"
                :isLazy="lst.isLazy"
                :isChildList="true"
                :initWhere="getInitWhere(lst.initWhere)"
                :refvalidatemethod="refvalidatemethod"
              ></ChildList>
            </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="start" align="top" :key="'r'+group.title">
            <Col
              :xs="getCols(group.cols)"
              :sm="getCols(group.cols)"
              :md="getCols(group.cols)"
              :lg="getCols(group.cols)"
              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]"
                    :placeholder="ctl.placeHolder"
                    :disabled="ctl.disabled"
                    :style="ctl.style"
                  >
                </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>
                <template v-if="ctl.type=='upload'">
                  <Uploads v-model="formModel[ctl.prop]"></Uploads>
                </template>
                <template v-if="ctl.type=='password'">
                  <input
                    type="password"
                    v-model="formModel[ctl.prop]"
                    :placeholder="ctl.placeHolder"
                  >
                </template>
                <template v-if="ctl.type=='textarea'">
                  <Input
                    v-model="formModel[ctl.prop]"
                    type="textarea"
                    :placeholder="ctl.placeHolder"
                    :style="ctl.style"
                  />
                </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 Vue from "vue";
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";
import Uploads from "./childs/uploads";
export default {
  name: "forms",
  components: {
    DicSelect,
    ModelSelect,
    RemoteSelect,
    Switchs,
    Checkgroups,
    Radiogroups,
    Uploads
  },
  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: {},
      tabDisabled: {},
      refvalidatemethod2: this.refvalidatemethod
    };
  },
  watch: {
    fminfo(nf, of) {
      this.initFormModel();
    },
    forminfo(nf) {
      this.initFormModel();
    }
  },
  computed: {},
  methods: {
    getInitWhere(initWhereObj) {
      let refwhere = {};
      refwhere[initWhereObj.fieldName] = this.formModel[
        initWhereObj.valueField
      ];
      return refwhere;
    },
    tabselected(bizcode) {
      console.log("tabselected.................", bizcode);
      if (bizcode != "main" && this.$refs[bizcode]) {
        console.log(this.$refs[bizcode]);
        this.$refs[bizcode][0].fetchData();
      }
    },
    getCols(cols) {
      let cs = cols ? cols : 2;
      return 24 / cs;
    },
    validate(cbk) {
      this.$refs.ofm.validate(v => {
        return cbk(v);
      });
    },
    activeChildTables(vf) {
      Object.keys(this.tabDisabled).forEach(k => {
        this.tabDisabled[k] = vf == false ? vf : true;
      });
    },
    setCtlVisable(prop, isShow) {
      this.ctlVisable[prop] = isShow;
    },
    resetForm() {
      this.$refs.ofm.resetFields();
    },
    validatex(rule, value, callback) {
      alert(this.refvalidatemethod2);
      // if (this.refvalidatemethod2) {

      //   return this.refvalidatemethod2(rule, value, callback);
      // } else {
      //   return callback();
      // }
      setTimeout(() => {
        if (this.refvalidatemethod2) {
          return this.refvalidatemethod2(rule, value, callback);
        } else {
          return callback();
        }
      }, 3000);
    },
    testclick() {
      console.log(JSON.stringify(this.formModel));
    },
    initFormModel() {
      if (this.forminfo.lists && this.forminfo.lists.length > 0) {
        this.forminfo.lists.forEach(item => {
          this.$set(this.tabDisabled, item["bizCode"], true);
        });
      }
      if (this.forminfo.main) {
        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 = this[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 == "switch") {
                this.$set(this.formModel, ctl.prop, false);
              } else 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>
