<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :class="[isFullScreen ? 'full-screen' : '']"
    :append-to-body="true"
    :width="width"
    top=".98rem"
    @close="closeDialog"
    :destroy-on-close="true"
  >
    <template slot="title">
      <div class="dialog-title">
        <span class="dialog-title-span">
          {{ title }}
        </span>
        <span class="op-buttons">
          <i
            @click="changeFullScreen"
            :class="['iconfont', isFullScreen ? 'icon-suoxiao' : 'icon-fangda']"
          ></i>
        </span>
      </div>
    </template>
    <slot />
  </el-dialog>
</template>
<script>
export default {
  name: "Dialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    width: {
      type: [String, Number],
      default: 1200,
    },
  },
  data() {
    return {
      isFullScreen: false,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("change-visible", val);
      },
    },
  },
  methods: {
    closeDialog() {
      console.log("???");
      this.dialogVisible = false;
      console.log(this.dialogVisible);
    },
    changeFullScreen() {
      this.isFullScreen = !this.isFullScreen;
      this.$nextTick(() => {
        window.dispatchEvent(new Event("resize"));
      });
    },
  },
};
</script>
<style lang="less" scoped>
.dialog-title {
  position: relative;
  z-index: 999;
  color: #fff;
  font-size: 18px;
  line-height: 0.22rem;
  .op-buttons {
    position: absolute;
    right: 15px;
    top: 0px;
    i {
      cursor: pointer;
      margin-left: 15px;
      font-size: 18px;
      margin-right: 18px;
      padding: 0 12px;
      &:hover {
        color: #409eff;
      }
    }
  }
}
.dialog-title-span {
  position: relative;
}
</style>