<template>
  <el-dialog
    class="clause-dialog"
    v-model="dialogVisible"
    :width="600"
    center
    align-center
    :close-on-click-modal="false"
    @closed="closed"
    destroy-on-close
    :show-close="false"
  >
    <div style="min-height: 400px">
      <ClauseInfo :info="info" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="large" type="primary" @click="dialogVisible = false" plain>返回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from "vue";
import { Clause } from "@/api/interface";
import ClauseInfo from "./ClauseInfo.vue";

const dialogVisible = ref(false);
const info = ref({} as Clause.ClauseInfo);

// 弹窗关闭
function closed() {
  console.log("closed");
}

function open(params: Clause.ClauseInfo) {
  info.value = params;
  dialogVisible.value = true;
}
defineExpose({
  open
});
</script>

<style lang="scss">
.clause-dialog {
  .el-dialog__header {
    display: none;
  }
  .dialog-footer {
    .el-button {
      min-width: 100px;
    }
  }
}
</style>
