<style>
.custom-form {
  background: #cfc;
}
.custom-title {
  background: #ccf;
}
.custom-content {
  background: #fcc;
}
</style>

<template>
  <div>
    <p>这是一个非markdown页面</p>
    <pre>{{ model }}</pre>
    <el-button size="mini" @click="handleGetValue">校验</el-button>
    <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" form-class="custom-form" title-class="custom-title" content-class="custom-content"></eg-form>
  </div>
</template>

<script>
import EgForm from './form-new';

export default {
  name: 'other',
  components: { EgForm },
  data() {
    return {
      model: {},
      option: {
        list: [
          {
            group: { title: '基础信息', span: 12 },
            list: [
              { type: 'el-input', label: '名称', key: 'name' },
              { type: 'el-input-number', label: '年龄', key: 'age' },
            ],
          },
          {
            group: { title: '住址', span: 24, key: 'location' },
            list: [
              { type: 'el-input', label: '地址简称', key: 'locationMin' },
              {
                group: { span: 12, key: 'district' },
                list: [
                  { type: 'el-input', label: '省', key: 'province', span: 24, rules: [{ required: true, message: '请输入省' }] },
                  { type: 'el-input', label: '市', key: 'city', span: 24 },
                ],
              },
              {
                group: { title: '小区信息', span: 24 },
                list: [
                  { type: 'el-input', label: '小区名', key: 'areaName', span: 24 },
                  { type: 'el-input', label: '门牌号', key: 'homeNum', span: 24 },
                  {
                    group: { title: 'A栋', span: 24 },
                    list: [
                      { type: 'el-input-number', label: '人数', key: 'anumber', span: 24,
                        on: {
                          change(value) {
                            console.log(value);
                          }
                        }
                      },
                    ],
                  },
                  {
                    group: { title: 'B栋', span: 24, key: 'bside' },
                    list: [
                      { type: 'el-input-number', label: '人数', key: 'bnumber', span: 24,
                        on({ model, update }) {
                          return {
                            change(value) {
                              if (value === 18 && model.age === 18) {
                                // TODO update后本值不变的BUG
                                update({ name: 'location.areaName', value: 'haha' });
                              }
                            }
                          }
                        }
                      },
                    ],
                  }
                ],
              }
            ],
          },
          { type: 'el-input', label: '身高', key: 'height' },
          { type: 'el-input', label: '体重', key: 'weight' },
        ]
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.model = {
        age: 7,
        name: '1',
        location: {
          locationMin: 'a',
          district: {
            province: 'p',
            city: 'c'
          },
          areaName: 'a',
          homeNum: 'n',
          anumber: '1',
          bside: {
            bnumber: '2'
          }
        },
        height: '3',
        weight: '4'
      }
    }, 3000);
  },
  methods: {
    onValidate(v) {
      console.log(v);
    },
    handleGetValue() {
      this.$refs.form.validate();
    }
  }
}
</script>
