<template>
  <el-drawer ref="drwer" :size="width" :visible.sync="visible" custom-class="app-drawer" v-bind="$attrs"
             v-on="$listeners"
  >
    <template #title>
      <slot name="title-area">
        <div class="app-drawer-title">
          {{ title }}
        </div>
      </slot>
    </template>
    <div class="app-drawer-content">
      <slot />
    </div>
    <slot name="footer">
      <div v-if="!hideFooter" ref="dialogFooter" class="app-drawer-footer text-c">
        <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-drawer>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    hideFooter: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: '确 定',
    },
    cancelText: {
      type: String,
      default: '取 消',
    },
    width: {
      type: String,
      default: '30%',
    },
  },
  data() {
    return {
      visible: this.value,
    };
  },
  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 {
  .app-drawer {
    //背景色灰底
    background-color: #eff0f5;
    overflow: hidden;

    .el-drawer__header {
      padding: 20px;
      background-color: #fff;
      margin-bottom: 0;

      .app-drawer-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;
        }
      }
    }

    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .app-drawer-content {
      flex: 1;
      margin: 11px;
      padding: 11px;
      box-sizing: border-box;
      background-color: #fff;
      overflow-y: auto;
      border-radius: 4px;
    }

    .app-drawer-footer {
      padding: 0 11px 11px 11px;

      .gz-dialog-footer {
        text-align: right;
      }
    }
  }
}
</style>
