<template>
  <!-- 封装弹框 -->
  <div>
    <el-dialog title="" appendToBody custom-class="syswin-dialog-center-footer" :visible.sync="dialogVisible"
      :class="className"
      :fullscreen="fullscreen" :before-close="Cancel" :close-on-click-modal="closeOnClickModal" center class="popup">
      <div class="sy-full-cont">
        <div class="sy-full-headbox">
          <p class="sy-full-active" @click="Cancel">{{ title }}</p>
          <span> <i class="el-icon-arrow-right"></i></span>
          <p>{{ subtitle }}</p>
        </div>
        <div class="sy-full-content">
          <slot name="content"></slot>
        </div>
        <span v-if="!$slots.footer" slot="footer" class="sy-full-dialog-footer">
          <el-button type="primary" class="sy-full-btn sy-full-save" @click="Save">保存</el-button>
          <el-button @click="Cancel" class="sy-full-btn sy-full-cancel">取 消</el-button>
        </span>
        <div v-else class="sy-full-my-footer">
          <slot name="footer" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SyFullDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '550px'
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    otherData: {
      type: Object,
      default: () => { }
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    Cancel() {
      this.$emit('close')
    },
    Save() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>

.popup {
  ::v-deep .el-dialog {
    background: #f2f5f9;
  }

  ::v-deep .el-dialog__header {
    display: none;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    padding: 24px;
    height: 100%;
  }

  .sy-full-cont {
    height: 100%;
    background: #fff;
    position: relative;
    border-radius: 8px;

    .sy-full-headbox {
      height: 62px;
      background: #fff;
      border-bottom: 1px solid #eeeff3;
      color: #888888;
      line-height: 62px;
      display: flex;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      box-sizing: border-box;

      p {
        font-size: 16px;
        font-weight: bold;
      }

      span {
        padding: 0px 10px;
      }

      .sy-full-active {
        color: #027AFF;
        margin-left: 20px;
        cursor: pointer;
      }
    }

    .sy-full-content {
      height: calc(100% - 138px);
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }

  .el-button.el-button--default {
    // width: 88px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
  }

  .sy-full-dialog-footer,
  .sy-full-my-footer {
    height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eeeff3;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;

  }
}
</style>
