<!--
 * @Author: fengyang9326@163.com
 * @Date: 2024-05-13 10:36:07
 * @LastEditors: fengyang9326@163.com
 * @LastEditTime: 2024-05-20 09:34:46
 * @FilePath: /web/components/com-dialogWrapper/index.vue
 * @Description: 弹窗封装
-->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    :fullscreen="dialogFullScreen"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :width="popupWidth"
    append-to-body
  >
    <!-- 弹窗title -->
    <template slot="title">
      <div class="custom_dialog_header">
        <span class="el_dialog_title">{{ dialogTitle }}</span>
        <div class="custom_dialog_menu" @click="dialogFullScreen = !dialogFullScreen">
          <svg-icon :icon-class="dialogFullScreen ? 'exit-fullscreen' : 'fullscreen'" />
        </div>
      </div>
    </template>

    <!-- 弹窗插槽 -->
    <slot>
      <p>弹框自定义的内容</p>
    </slot>

    <!-- 弹窗操作 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogWrapper',
  components: {},
  props: {
    /* 弹窗 title标题 */
    dialogTitle: {
      type: String,
      default: '标题',
    },
    /* 弹窗 width宽度 */
    popupWidth: {
      type: String,
      default: '35%',
    },
    /* 弹窗 显示隐藏状态 */
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      openDialog: false,
      dialogFullScreen: false,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        // 初始化数据
        if (this.visible) Object.assign(this.$data, this.$options.data());
        return this.visible;
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，
        // 在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('updateVisible', val);
      },
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /* 关闭弹窗 */
    handleClose() {
      this.$emit('handleClose');
    },
    /* 弹窗 确认 操作 */
    handleSubmit() {
      this.$emit('submitDialogData');
    },
  },
};
</script>
<style lang="scss" scoped></style>
