<!--
 * @Author       : xh
 * @Date         : 2022-12-01 14:33:01
 * @LastEditors: y001554
 * @FileName     :   
-->
<template>
  <div>
    <el-button size="small" type="primary" @click="show">弹出弹窗</el-button>
    <gen-modal v-bind="$attrs" type="large" v-on="$listeners">
      <template slot="modalHeader">
        <el-button type="primary" size="mini"> 自定义头部 </el-button>
      </template>
      <div>
        <el-table ref="table" height="100%" :data="tableData" header-row-class-name="tbheader" size="mini" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="150" fixed="left" />
          <el-table-column prop="date" label="日期" width="150" />
          <el-table-column prop="date" label="日期" width="150" />
          <el-table-column prop="date" label="日期" width="150" />

          <el-table-column prop="name" label="姓名" width="150" />
          <el-table-column prop="address" label="地址" show-overflow-tooltip />

          <el-table-column prop="address" label="操作" fixed="right" show-overflow-tooltip>
            <el-button type="primary" size="mini"> XXX </el-button>
          </el-table-column>
        </el-table>
      </div>
      <template slot="modalFooter">
        <el-button type="primary" size="mini" plain @click="cancel"> 取消 </el-button>
        <el-button type="primary" size="mini"> 确认 </el-button>
      </template>
    </gen-modal>
  </div>
</template>

<script>
const defaultModel = {
  value1: [],
  value2: ''
}
export default {
  name: 'DemoModal',
  // components: { Modal },
  data() {
    return {
      loading: true,

      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },

        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },

        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },

        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      rules: {}
    }
  },

  methods: {
    cancel() {
      this.$ui.hide('DemoModal')
    },
    show() {
      // this.$ui.hide('DemoModal')
      this.$ui.show('DemoModal')
    },

    // 保存
    handleSave() {
      alert('提交')
    },
    // 取消
    handleCancel() {
      this.form.model = Object.assign({}, defaultModel)
    }
  }
}
</script>
