<template>
  <Card>
    <Form
      ref="forms"
      :model="formModel"
      :rules="formRules"
      label-position="right"
      :label-width="80"
      @keydown.enter.native="doexec('save',formModel)"
    >
      <div v-show="!isShowTabs">
        <div  v-for=" group in insideFormInfo" :key="group.title">
          <Divider orientation="left">{{group.title}}</Divider>
          <Row v-if="!group.cols" slot="content" type="flex" justify="start" :key="group.title+'d'">
            <Col v-for="ctl in group.ctls"  :key="ctl.title" :xs="12" :sm="8" :md="6" :lg="6">
              <FormItem :label="ctl.label" :key="ctl.prop" :prop="ctl.prop">
                <template v-if="ctl.type=='input'">
                  <Input v-model="formModel[ctl.prop]" :placeholder="ctl.placeHolder"/>
                </template>
                <template v-if="ctl.type=='select'">
                  <CSelect v-model="formModel[ctl.prop]" :isMultiple="ctl.isMultiple"></CSelect>
                </template>
                <template v-if="ctl.type=='switch'">
                  <CSwitch
                    v-model="formModel[ctl.prop]"
                    :true-color="ctl.trueColor"
                    :false-color="ctl.falseColor"
                    :isDisabled="ctl.isDisabled"
                  ></CSwitch>
                </template>
              </FormItem>
            </Col>
          </Row>
          <Row v-else>
                  <Col v-for="ctl in group.ctls"  :key="ctl.title" :span="24/Number(group.cols)">
                      <FormItem :label="ctl.label" :key="ctl.prop" :prop="ctl.prop">
                        <template v-if="ctl.type=='input'">
                          <Input v-model="formModel[ctl.prop]" :placeholder="ctl.placeHolder"/>
                        </template>
                        <template v-if="ctl.type=='select'">
                          <CSelect v-model="formModel[ctl.prop]" :isMultiple="ctl.isMultiple"></CSelect>
                        </template>
                        <template v-if="ctl.type=='switch'">
                          <CSwitch
                            v-model="formModel[ctl.prop]"
                            :true-color="ctl.trueColor"
                            :false-color="ctl.falseColor"
                            :isDisabled="ctl.isDisabled"
                          ></CSwitch>
                        </template>
                      </FormItem>
            </Col>
          </Row>
        </div>
        <div style="text-align:right;postion:absolute;bottom:1px;left:5px">
              <Button   v-for="btn in insideButtonInfo" :icon="btn.icon"  :type="btn.isfocus?'primary':'default'"  :key="btn.key"  @click="doexec(btn.key,formModel)"  size="small">{{btn.title}}</Button>
        </div>
      </div>
      <div  v-show="isShowTabs">
            <div style="text-align:right">
              <Button   v-for="btn in insideButtonInfo" :icon="btn.icon"  :type="btn.isfocus?'primary':'default'"  :key="btn.key"  @click="doexec(btn.key,formModel)"  size="small">{{btn.title}}</Button>
            </div>
           <Tabs slot="content">
              <TabPane v-for=" group in insideFormInfo" :key="group.title" :label="group.title" :style="group.styles">
                  <Row  v-if="!group.cols"  type="flex" justify="start" :key="group.title+'d'">
                            <Col v-for="ctl in group.ctls" :key="ctl.title" :xs="12" :sm="8" :md="6" :lg="6">
                              <FormItem :label="ctl.label" :key="ctl.prop" :prop="ctl.prop">
                                <template v-if="ctl.type=='input'">
                                  <Input v-model="formModel[ctl.prop]" :placeholder="ctl.placeHolder"/>
                                </template>
                                <template v-if="ctl.type=='select'">
                                  <CSelect v-model="formModel[ctl.prop]" :isMultiple="ctl.isMultiple"></CSelect>
                                </template>
                                <template v-if="ctl.type=='checkgroup'">
                                    <CCheck v-model="formModel[ctl.prop]" :chks="ctl.initValue"></CCheck>
                                  </template>
                                  <template v-if="ctl.type=='radiogroup'">
                                    <CRadio v-model="formModel[ctl.prop]" :options="ctl.initValue"></CRadio>
                                  </template>
                                <template v-if="ctl.type=='switch'">
                                  <CSwitch
                                    v-model="formModel[ctl.prop]"
                                    :true-color="ctl.trueColor"
                                    :false-color="ctl.falseColor"
                                    :isDisabled="ctl.isDisabled"
                                  ></CSwitch>
                                </template>
                              </FormItem>
                            </Col>
                    </Row>
                      <Row v-else>
                            <Col v-for="ctl in group.ctls"  :key="ctl.title" :span="24/Number(group.cols)" >
                                <FormItem :label="ctl.label" :key="ctl.prop" :prop="ctl.prop">
                                  <template v-if="ctl.type=='input'">
                                    <Input v-model="formModel[ctl.prop]" :placeholder="ctl.placeHolder"/>
                                  </template>
                                  <template v-if="ctl.type=='select'">
                                    <CSelect v-model="formModel[ctl.prop]" :isMultiple="ctl.isMultiple"></CSelect>
                                  </template>
                                 <template v-if="ctl.type=='checkgroup'">
                                    <CCheck v-model="formModel[ctl.prop]" :chks="ctl.initValue"></CCheck>
                                  </template>
                                  <template v-if="ctl.type=='radiogroup'">
                                    <CRadio v-model="formModel[ctl.prop]" :options="ctl.initValue"></CRadio>
                                  </template>
                                  <template v-if="ctl.type=='switch'">
                                    <CSwitch
                                      v-model="formModel[ctl.prop]"
                                      :true-color="ctl.trueColor"
                                      :false-color="ctl.falseColor"
                                      :isDisabled="ctl.isDisabled"
                                    ></CSwitch>
                                  </template>
                                </FormItem>
                      </Col>
                  </Row>
              </TabPane>
           </Tabs>
      </div>
    </Form>
  </Card>
</template>
<script>
import { formInfoQuery } from "@/api/meta";
import CSelect from "./selects";
import CSwitch from "./switches";
import CCheck from "./checkgroup"
import CRadio from "./radiogroup"
export default {
  name: "Forms",
  components: {
    CSelect,
    CSwitch,
    CCheck,
    CRadio
  },
  props: {
    formInfo: {
      type: Array
    },
    validator: {
      type: Function
    },
    isAuto: {
      type: Boolean
    },
    bizCode: {
      type: String
    },
    value: {
      type: Object
    },
    isShowTabs: {
      type: Boolean
    },
    isSearch: {
      type: Boolean
    },

  },
  data() {
    return {
      formModel: {},
      formRules: {},
      insideFormInfo: this.formInfo ? this.formInfo : [],
      insideButtonInfo:[]
    };
  },
  created() {
    if (this.formInfo && !isAuto) {
      this.initFormInfo();
    } else {
      formInfoQuery(this.bizCode).then(res => {
        if(!this.isSearch){
              this.insideFormInfo = res.data.forminfo
              this.insideButtonInfo= res.data.authbuttons.inform
        }else{
              this.insideFormInfo = res.data.searchFormInfo
              this.insideButtonInfo= res.data.authbuttons.insearch
        }
        this.initFormInfo();
      });
    }
  },
  watch: {
    value(nv, ov) {
      this.formModel = nv;
    },
    formModel(nv, ov) {
      this.$emit("input", this.formModel);
    }
  },
  computed: {},
  methods: {
    validatex(rule, value, callback){
        callback();
    },
    resetForm(){
      this.$refs.forms.resetFields();
    },
    initFormInfo() {
      this.insideFormInfo.forEach(group => {
        group.ctls.forEach(ctl => {
          if (ctl.rules) {
            ctl.rules.forEach(r => {
              if (r.validator) {
                r.validator = this[r.validator]
                  ? this[r.validator]
                  : (r, v, cbk) => cbk();
              }
            });

           if(ctl.rules){
              ctl.rules.forEach(r=>{
                    if(r.validator){
                      r.validator=this[r.validator];
                    }
              });
              this.formRules[ctl.prop]=ctl.rules;
           }
          }
          if (ctl.type == "select" && ctl.type == "checkgroup") {
            this.$set(this.formModel, ctl.prop, []);
          } else {
            if (ctl.type == "number") {
              this.$set(this.formModel, ctl.prop, 0);
            } else {
              this.$set(this.formModel, ctl.prop, "");
            }
          }
        });
      });
    },
    doexec(action,fm) {
      if(action!="cancel"){
             this.$refs.forms.validate((valid) => {
                    if (valid) {
                        this.$emit("on-action", action, this.formModel)
                    } else {
                      this.$Message.error('输入不符合验证规则，请检查输入.');
                    }
        })
      }else{
         this.$emit("on-action", action, this.formModel)
      }
      console.log(this.formModel);
    }
  }
};
</script>
