<template>
  <list-layout>
    <template slot="filterItem">
      <el-button @click="showDialog">弹窗</el-button>
    </template>
    <md-table :data="listData">
      <md-table-column
        type="index"
        label="序号"
        align="center"
        min-width="55"
        width="55"
      />
      <md-table-column
        label="姓名"
        min-width="100"
        prop="name"
        align="center"
      />
      <md-table-column
        label="姓名"
        min-width="100"
        prop="name"
        align="center"
      />
      <md-table-column
        label="姓名"
        min-width="100"
        prop="name"
        align="center"
      />
    </md-table>

    <normal-dialog
      :visible.sync="dialogVisible"
      :before-close="closeHandle"
      class="dialog"
    >
      <template slot="title">
        <img src="@/assets/images/dialog/add_icon.png">
        新增
      </template>
      <div class="dialog-content">
        <form-area title="基本信息">
          <form-line>
            <form-item
              label="姓名"
              size="big"
            >
              <el-input />
            </form-item>
            <form-item label="性别">
              <el-input />
            </form-item>

          </form-line>
        </form-area>
        <div class="table-wrap">
          <md-table :data="listData">
            <md-table-column
              type="index"
              label="序号"
              align="center"
              min-width="55"
              width="55"
            />
            <md-table-column
              label="姓名"
              min-width="100"
              prop="name"
              align="center"
            />
            <md-table-column
              label="姓名"
              min-width="100"
              prop="name"
              align="center"
            />
            <md-table-column
              label="姓名"
              min-width="100"
              prop="name"
              align="center"
            />
          </md-table>
        </div>
      </div>
    </normal-dialog>
  </list-layout>
</template>

<script>
export default {
  name: 'table-page',
  data() {
    return {
      listData: [
        { id: 1, name: '123' },
        { id: 2, name: '223' },
        { id: 3, name: '323' },
      ],
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeHandle(done) {
      done();
    },
  },
};
</script>

<style lang="scss">
.dialog {
  .dialog-content {
    height: 700px;
    display: flex;
    flex-direction: column;
  }
  .table-wrap {
    flex: 1;
  }
}
</style>


