<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="90%"
    center
    :before-close="handleClose"
  >
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="top-buttons">
          <el-button
            type="primary"
            icon="plus"
            @click="handleAdd"
          >保存</el-button>
          <el-button
            type="primary"
            icon="edit"
            @click="handleEdit"
          >另存</el-button>
          <el-button
            type="primary"
            icon="delete"
            @click="handleDelete"
          >复制</el-button>
          <el-button
            type="primary"
            icon="refresh"
            @click="handleRefresh"
          >重置</el-button>
          <el-button
            type="primary"
            icon="download"
            @click="handleExport"
          >修改</el-button>
        </div>
        <div class="list-container">
          <ul v-for="data in tableData" :key="data.name">
            <li>
              <a>{{ data.name }}</a>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="16">
        <el-tabs v-model="currentTab">
          <el-tab-pane label="Tab1">这是tab1的内容</el-tab-pane>
          <el-tab-pane label="Tab2">这是tab2的内容</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PopupDialog',

  props: {
    title: {
      type: String,
      default: '弹出层标题'
    }
  },

  data() {
    return {
      visible: false,
      tableData: [
        {
          name: '名称1',
          date: '2022-01-01',
          address: '地址1'
        },
        {
          name: '名称2',
          date: '2022-02-01',
          address: '地址2'
        },
        {
          name: '名称3',
          date: '2022-03-01',
          address: '地址3'
        }
      ],
      currentTab: 'Tab1'
    }
  },

  methods: {
    handleAdd() {
      console.log('新增数据')
    },

    handleEdit() {
      console.log('编辑数据')
    },

    handleDelete() {
      console.log('删除数据')
    },

    handleRefresh() {
      console.log('刷新数据')
    },

    handleExport() {
      console.log('导出数据')
    },

    handleClose(done) {
      this.visible = false
      done()
    }
  }
}
</script>

<style scoped>
.dialog-content {
  display: flex;
  justify-content: space-between;
  height: 400px;
}

.left-content {
  width: 70%;
  padding-right: 10px;
}

.right-content {
  width: 30%;
}

.top-buttons {
  margin-bottom: 10px;
}

.list-container {
  height: calc(100% - 40px);
  overflow-y: auto;
}
</style>
