<template>
  <div class="page card">
    <div class="page-wrapper">
      <div class="ele-wrapper ele-wrapper-btn">
        <el-button @click="onBtnClick">打开对话框</el-button>
      </div>
      <div class="ele-wrapper ele-wrapper-dialog">
        <hm-modal
          :visible="dialog.visible"
          @ok="onDialogOk"
          @cancel="onDialogCancel"
        >
        </hm-modal>
      </div>
    </div>
  </div>
</template>

<script>
import HmModal from "/@/components/built-in/element-plus/layout/HmModal.vue";

export default {
  components: {
    HmModal,
  },
  data() {
    let self = this;
    return {
      table: {
        actions: [
          {
            name: "编辑",
            callback: function (item) {
              console.log("点击编辑: ", item);
              self.dialog.visible = true;
            },
          },
          {
            name: "删除",
            callback: function (item) {
              console.log("点击删除: ", item);
            },
          },
        ],
        combined: [],
      },
      dialog: {
        visible: false,
      },
    };
  },
  mounted() {},
  methods: {
    onBtnClick() {
      this.dialog.visible = true;
      console.log("this.dialog:", this.dialog);
    },
    onDialogOk() {
      this.dialog.visible = false;
    },
    onDialogCancel() {
      this.dialog.visible = false;
    },
  },
};
</script>

<style scoped>
.page {
}
</style>
