<template>
  <el-drawer :visible.sync="showDrawerTow" :append-to-body="true" :before-close="handleClose" @open="openD()" :with-header="false" :wrapperClosable="closeModal">
    <input ref="input" tabindex="0" style="position: absolute;right: 0;top: 0;width: 0px;opacity: 0;" />
    <header class="drawer-header flex-box-ce">
      <span class="flex-1">{{ drawerTitle }}</span>
      <i v-if="closeModal" @click="handleClose2" class="el-icon-close"></i>
    </header>
    <div class="drawer-main"><slot name="main"></slot></div>
    <footer v-if="footNo" class="drawer-footer flex-box-end flex-v-ce"><slot name="footer"></slot></footer>
  </el-drawer>
</template>
<script>
export default {
  name: 'BrawerBox',
  props: {
    showDrawer: {
      type: Boolean,
      default: false
    },
    drawerTitle: {
      type: String,
      default: '设置'
    },
    closeModal: {
      //是否可以通过点击 modal 关闭 Dialog
      type: Boolean,
      default: true
    },
    footNo: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showDrawerTow: false
    };
  },
  watch: {
    showDrawer(val) {
      this.showDrawerTow = val;
      if (val) {
        this.openend();
      }
    }
  },
  methods: {
    // 解决打开首页输入组件自动聚焦问题
    openend() {
      this.$nextTick(() => {
        this.$refs.input.focus();
        setTimeout(() => {
          this.$refs.input.blur();
        }, 200);
      });
    },
    openD() {},
    handleClose(done) {
      this.$emit('update:showDrawer', false);
      this.showDrawerTow = false;
      done();
    },
    handleClose2() {
      this.$emit('update:showDrawer', false);
      this.showDrawerTow = false;
    }
  }
};
</script>

<style scoped="scoped">
.el-icon-close {
  cursor: pointer;
  padding: 8px;
  position: relative;
  right: -8px;
}
.el-icon-close:hover {
  color: #f56c6c;
}
::v-deep .li .el-checkbox__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 440px;
}
::v-deep .li .el-radio__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
  max-width: 440px;
}
::v-deep .el-drawer {
  width: 500px !important;
}
.drawer-header {
  height: 60px;
  border-bottom: 1px solid #ebebeb;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  padding: 0 20px;
}
.drawer-main {
  height: calc(100vh - 120px);
  padding: 20px;
  overflow-y: scroll;
  min-width: 450px;
  font-size: 14px;
}
.drawer-main::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background-color: rgba(216, 216, 216, 0.8);
}
.drawer-main::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(201, 201, 201, 0);
}
.drawer-main::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
  background-color: rgb(168, 167, 167);
}
.drawer-main ::v-deep .flex-box-ce{
	display: flex !important;
	align-items: center !important;
}
.drawer-footer {
  background-color: #fff;
  border-top: 1px solid #ebebeb;
  padding: 10px 20px;
  font-size: 14px;
}
::v-deep .width-150 {
  width: 180px;
}
::v-deep :focus {
  outline: 0;
}
</style>
