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

<template>
  <div>
    <pre>{{ model }}</pre>
    <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable @cell-edit="onCellEdit">
      <el-table-column type="selection"></el-table-column>
      <template #value-location-locationMin="{ value }">
        <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag>
      </template>
      <template #value-location-district-province="{ value }">
        <el-tag v-if="value" type="success" size="mini" disable-transitions>{{ value }}</el-tag>
      </template>
      <!-- <template #location-district-city>
        <el-table-column label="城市测试" prop="location-district-city">
          <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag>
        </el-table-column>
      </template> -->
    </eg-table>
    <el-button size="mini" @click="handleGetValue">校验</el-button>
    <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
    <eg-form
      ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
      form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
    ></eg-form>
  </div>
</template>

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

export default {
  name: 'other',
  components: { EgForm, EgTable },
  data() {
    return {
      tableData: [],
      model: {
        name: 'name',
        location: {
          areaName: 'hahhhahaa',
        },
      },
      option: {
        list: [
          {
            group: { title: '基础信息', span: 12 },
            list: [
              { type: 'el-input', label: '名称', key: 'name' },
              { type: 'el-input-number', label: '年龄', key: 'age' },
            ],
          },
          {
            group: { title: '', span: 12 },
          },
          {
            group: { title: '住址', key: 'location', span: 24 },
            list: [
              { type: 'el-input', label: '地址简称', key: 'locationMin' },
              {
                group: { key: 'district' },
                list: [
                  { type: 'eagle-select', label: '省', key: 'province', props: { dataSource: [{ label: '新疆', value: '新疆' }, { label: '四川', value: '四川' }] }, rules: [{ required: true, message: '请输入省', trigger: 'change' }], minWidth: 120 },
                  // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
                  { type: 'eagle-select', label: '市', key: 'city',
                    props: { dataSource: [{ label: '上海', value: '上海' }, { label: '北京', value: '北京' }] },
                    render: {
                      type: 'a', props: { href: 'https:///www.baidu.com/', target: '_blank' }, style: { color: 'red' },
                      children({ row }) {
                        const { location: { district: { city } = {} } = {} } = row;
                        return city ? `${city}[城市]` : '';
                      }
                    }
                  },
                ],
              },
              {
                group: { title: '小区信息' },
                list: [
                  { type: 'el-input', label: '小区名', key: 'areaName' },
                  { type: 'el-input', label: '门牌号', key: 'homeNum' },
                  {
                    group: { title: 'A栋' },
                    list: [
                      { type: 'el-input-number', label: '人数', key: 'anumber',
                        props: { 'controls-position': 'right' },
                        on: {
                          change(value) {
                            console.log(value);
                          }
                        }
                      },
                    ],
                  },
                  {
                    group: { title: 'B栋', key: 'bside' },
                    list: [
                      { type: 'el-input-number', label: '人数', key: 'bnumber',
                        on({ model, update }) {
                          return {
                            change(value) {
                              if (value === 18 && model.age === 18) {
                                console.log(model)
                                update({ 'location.areaName': 'hehe', name: 'aaa', 'text.0': 'abc', 'ttt.0': 'abc' });
                              }
                            }
                          }
                        }
                      },
                    ],
                  }
                ],
              }
            ],
          },
          { type: 'el-input', label: '身高', key: 'height', props: { type: 'textarea', min: 3 }, style: { width: '100%' }, span: 24 },
          { 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'
      }
      this.tableData = [this.model];
    }, 1000);
  },
  methods: {
    onValidate(isValidated, model) {
      console.log(isValidated, model);
    },
    handleGetValue() {
      this.$refs.form.validate();
    },
    onCellEdit(e) {
      console.log(e)
    }
  }
}
</script>