<style>
.w-full {
  width: 100%;
}
/* .page-other .el-input .el-input__inner, .el-textarea__inner {
  border-radius: 0;
} */
</style>

<template>
  <div class="page-other">
    {{ model }}
    <eg-form-table v-model="model" title="标题" :list="list"></eg-form-table>
  </div>
</template>

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

export default {
  name: 'other',
  components: { EgForm, EgFormTable, EgTable },
  data() {
    return {
      tableData: [],
      model: {
        name: 'name',
        // location: {
        //   areaName: 'hahhhahaa',
        // },
      },
      list: [
        [
          { type: 'el-input', label: '姓名', key: 'name', props: { disabled: true } },
          { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' } },
          { type: 'el-input', label: '政治面貌', key: 'policy' },
          { type: 'el-input', label: '籍贯', key: 'hometown' },
          { type: 'el-switch', label: '婚姻', key: 'marry' },
        ],
        [
          { type: 'el-input', label: '曾用名', key: 'oldname', colspan: 1 },
          { type: 'el-input', label: '现居地', key: 'location' },
          { type: 'el-input', label: '户籍地', key: 'address', colspan: 3 },
          { type: 'el-image', label: '相片', key: 'image', props: { src: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1095903005,1370184727&fm=26&gp=0.jpg' },
            rowspan: 2
          },
        ],
        [
          { type: 'eagle-select', label: '爱好', key: 'hobby', props: { dataSource: [{ label: '游戏', value: '游戏' }, { label: '音乐', value: '音乐' }] }, colspan: 3 },
          { type: 'el-input', label: '教育程度', key: 'education', colspan: 3 },
        ],
        { type: 'el-input', label: '工作经历', key: 'experience', props: { type: 'textarea', autosize: { minRows: 6 }, placeholder: '请输入' } },
        [{ type: 'el-input', label: '备注', key: 'remark', props: { type: 'textarea', autosize: { minRows: 3 } } }],
      ],
      option: {
        list: [
          {
            group: { title: '基础信息', span: 12 },
            list: [
              {
                type(h, { config }) {
                  return h(
                    'el-tooltip',
                    { props: { content: '这里是提示', placement: 'top', effect: 'dark' } },
                    [h('el-input', config)]
                  )
                },
                label: '名称',
                key: 'name'
              },
              { type: 'el-input-number', label: '年龄', key: 'age',
                render(h, { row, value }) {
                  return h('el-tag', { props: { type: 'warning', size: 'mini' } }, [h('span', `${value}[${row.name}]`)])
                }
              },
            ],
          },
          { 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 = {
        name: '张三',
        age: 24,
        policy: '党员',
        hometown: '北京',
        marry: false,
        oldname: '张二',
        location: '上海',
        address: '北京市朝阳区',
        hobby: '游戏',
        education: '本科',
        image: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1095903005,1370184727&fm=26&gp=0.jpg'
        // experience: '暂无',
        // remark: '测试'
      }
      // 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(data) {
      console.log('cell-edit', data);
    },
    onRowNew(data) {
      console.log('row-new', data);
    },
    onRowEdit(data) {
      console.log('row-edit', data);
    },
    onRowDelete(data) {
      console.log('row-delete', data);
    }
  }
}
</script>