<template>
  <teleport to="#dialog">
    <div class="dialog-bg" v-if="dialogVisible">
      <div class="dialog" :style="{width: (width ? width : 680) + 'px'}">
        <div class="head">
          <h3>{{title}} </h3>  
          <i class="el-icon-close" @click="closeHandle" v-if="showClose || showClose === void 0 || cornerClose"></i>
        </div>
        <div class="content">
          <slot />
        </div>
        <div class="floot" v-if="showFloor">
          <el-button type="danger" v-if="showDel" @click="deleteHandle" >删 除</el-button>
          <el-button @click="closeHandle" v-if="showClose || showClose === void 0">取 消</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', 'showClose','showDelete','cornerClose'],
  setup(props) {
    const dialogVisible = ref(props.show);
    console.log('props',props);
    const showDel = ref(props.showDelete)
    const showFloor = computed(() => !(props.hideFloor || props.hideFloor === ''))
    return { dialogVisible, showFloor,showDel };
  },
  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;
    },
    deleteHandle() {
      console.log('deleteHandle')
      this.$emit('delete')
    }
  },
};
</script>

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