<template>
  <teleport to="#dialog">
    <div class="dialog-bg" v-if="dialogVisible">
      <div class="dialog" :style="{width:width}">
        <div class="head">
          <h3>{{title}}</h3>  
          <i class="el-icon-close" @click="closeHandle"></i>
        </div>
        <div class="content">
          <slot />
        </div>
        <div class="floot" v-if="showFloor">
          <el-button @click="closeHandle">取 消</el-button>
          <el-button type="primary" @click="enterHandle">{{enterText || '保 存'}}</el-button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script>
import { computed, ref } from "vue";

export default {
  props: ["show", "title", "hideFloor", 'enterText',"width"],
  emits: ['update:show', 'submit', 'quit'],
  setup(props) {
    const dialogVisible = ref(props.show);
    const showFloor = computed(() => !(props.hideFloor || props.hideFloor === ''))

    return { dialogVisible, showFloor };
  },
  watch: {
    dialogVisible() {
      if (this.show !== this.dialogVisible) {
        this.$emit("update:show", this.dialogVisible);
      }
    },
    show() {
      if (this.show !== this.dialogVisible) {
        this.dialogVisible = this.show;
      }
    }
  },
  methods: {
    closeHandle() {
      this.$emit('quit')
      this.dialogVisible = false;
    },
    enterHandle() {
      this.$emit('submit')
      // this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>