<template>
  <el-dialog
    ref="dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :custom-class="`gz-dialog ${isDefFooter ? '' : 'gz-dialog--custom-footer'} ${fullscreen ? 'gz-dialog--fullscreen' : ''}`"
    :fullscreen="fullscreen"
    :modal="$attrs.modal || !fullscreen"
    :top="top"
    :visible.sync="visible"
    :width="width"
    v-bind="$attrs"
    @closed="onCancel"
    v-on="$listeners"
  >
    <template #title>
      <slot name="title-area">
        <div class="gz-dialog-title">
          {{ title }}
        </div>
      </slot>
    </template>

    <!-- <div ref="dialogContent" :class="{ 'app-dialog-content': dragHeight, 'full-content': isDefFooter }"> -->
    <div ref="dialogContent" class="app-dialog-content">
      <slot />
    </div>
    <slot name="footer">
      <div v-if="!hideFooter" ref="dialogFooter" slot="footer" class="gz-dialog-footer text-l">
        <el-button :loading="loading" class="confirm_btn" type="primary" @click="onConfirm">{{ confirmText }}
        </el-button>
        <el-button class="cancel_btn" @click="onCancel">{{ cancelText }}</el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    top: {
      type: String,
      default: '10vh',
    },
    hideFooter: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: '确 定',
    },
    cancelText: {
      type: String,
      default: '取 消',
    },
    width: {
      type: String,
      default: '50%',
    },
  },
  data() {
    return {
      visible: this.value,
      isDefFooter: false,
    };
  },
  watch: {
    value(val) {
      this.visible = val;
    },
    visible(val) {
      // if (val) {
      //   this.$nextTick(() => {

      //   }, 300);
      // }
      this.$emit('input', val);
    },
  },
  created() {
    this.inited = false;
  },
  methods: {
    onConfirm() {
      this.$emit('confirm');
    },
    onCancel() {
      this.visible = false;
      this.$emit('cancel');
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .gz-dialog {
    max-width: 95vw;
    min-width: 250px;
    min-height: 200px;
    overflow: hidden;
    //背景色灰底
    background-color: #eff0f5;

    .app-dialog-content {
      height: 63vh;
      background: #fff;
      padding: 11px;
      overflow-y: auto;
      border-radius: 4px;
    }

    .el-dialog__header {
      padding: 20px 20px 17px;
      //头部背景色白色
      background-color: #fff;
    }

    .el-dialog__body {
      padding: 11px;
      height: calc(100% - 60px - 72px);
    }

    .el-dialog__footer {
      padding: 0 11px 11px 11px;

      .gz-dialog-footer {
        text-align: right;
      }
    }

    .vue-treeselect {
      height: 32px;

      .vue-treeselect__control {
        border-radius: 0;
      }

      .vue-treeselect__placeholder,
      .vue-treeselect__single-value {
        line-height: 30px;
      }

      &.vue-treeselect--disabled {
        .vue-treeselect__control {
          background-color: #f5f7fa;
        }
      }
    }

    .el-form-item {
    }

    .el-form-item__error {
      right: 0;
      left: unset;
    }

    .confirm_btn,
    .cancel_btn {
      width: 100px;
    }

    &-title {
      font-size: 18px;
      font-weight: 500;
      color: #1e2128;
      position: relative;
      padding-left: 11px;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 65%;
        width: 3px;
        background: #1e80ff;
      }
    }

    &.gz-dialog--fullscreen {
      max-width: 100vw;
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;
      overflow: hidden;

      .el-dialog__body {
        flex: 1;
        padding-top: 11px;
      }

      .app-dialog-content {
        height: 100%;
        max-height: 100%;
        padding: 0;
      }

      .el-dialog__footer {
        .gz-dialog-footer {
          text-align: center;
        }
      }
    }
  }
}

.gz-dialog {
}
</style>
