<template>
  <div>
    <Card>
      <div></div>
      <Form ref="formInline" :model="formdata" :rules="ruleInline">
        <template v-for="group in forminfo">
          <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
          <Row :key="'r'+group.title">
            <Col :xs="2" :sm="4" :md="6" :lg="8" v-for="ctl in group.ctls" :key="ctl.prop">
              <FormItem :label="ctl.label"></FormItem>
            </Col>
          </Row>
        </template>
      </Form>
    </Card>
  </div>
</template>
<script>
// import { getTableData } from '@/api/data'
export default {
  name: "forms",
  components: {},
  props: {
    fminfo: {
      type: Array,
      default() {
        return [];
      }
    },
    refvalidatemethod:{
      type:Function,
      default(){
        return (rule, value, callback)=>{
          return callback()
        }
      }
    }
  },
  data() {
    return {
      forminfo: [
        {
          title: "控制信息",
          col: 3,
          ctls: [
            {
              type: "switch",
              prop: "isAdmin",
              acText: "是管理员",
              inactText: "否",
              placeHolder: "请输入单次使用消耗的宝币数",
              style: ""
            }
            //  {"type":"select","refModel":"pmproduct","isMulti":false,"label":"所属产品","prop":"pmproduct_id","labelField":"name","valueField":"id","style":""},
          ]
        },
        {
          title: "基本信息",
          col: 3,
          ctls: [
            {
              type: "input",
              label: "账号",
              prop: "userName",
              placeHolder: "登录账号",
              style: "",
              rules: [{ required: true, message: "  ", trigger: "blur" }]
            },
            {
              type: "input",
              label: "昵称",
              prop: "nickName",
              placeHolder: "昵称",
              style: "",
              rules: [{ required: true, message: "  ", trigger: "blur" }]
            },
            {
              type: "input",
              label: "电话",
              prop: "mobile",
              placeHolder: "请输入电话",
              style: "",
              rules: [
                { validator: "validatex", trigger: "blur" },
                { required: true, message: "  ", trigger: "blur" }
              ]
            }
            //  {"type":"select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":""},
          ]
        }
      ],
      formModel: {},
      metaRules:{},
      btninfos: []
    };
  },
  watch: {
    fminfo(nf, of) {
      this.forminfo = nf;
      this.forminfo.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 == "select") {
            this.$set(this.formModel, ctl.prop, []);
          } else {
            console.log(ctl.prop);
            if (ctl.type == "number") {
              this.$set(this.formModel, ctl.prop, 0);
            } else {
              this.$set(this.formModel, ctl.prop, "");
            }
          }
        });
      });
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params);
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    validatex(rule, value, callback){
         if(this.refvalidatemethod){
           return  this.refvalidatemethod(rule, value, callback);
         }else{
           return callback();
         }
    },
  },
  mounted() {
    getTableData().then(res => {
      this.tableData = res.data;
    });
  }
};
</script>

<style>
</style>
