<template>
  <!-- <transition name="popupfade"> -->
  <div
    class="taskDetailRight"
    @click="getRight"
  >
    <div
      class="taskDetailRight-contant"
      @click.stop="aa"
    >
      <div class="taskDetailRight-contant-title commonFont">
        <div style="flex:1;">{{title}}</div>
        <i  v-if="!footer"  @click="$emit('cancel')" class="el-icon-close"></i>
      </div>
      <div class="taskDetailRight-contant-content">
        <slot name="content"></slot>
      </div>
      <div
        v-if="footer"
        class="taskDetailRight-contant-footer"
      >
        <div>
          <slot name="footer-left"></slot>
        </div>
        <div>
          <el-button
            size="small"
            @click="$emit('cancel')"
          >取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="$emit('submit')"
          >{{subumitText}}</el-button>
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
    <div>
    </div>
  </div>
  <!-- </transition> -->
</template>

<script>

export default {
  props: {
    subumitText: {
      type: String,
      default: '确 定'
    },
    title: {
      type: String,
      default: ''
    },
    footer: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isShow: true
    }
  },
  computed: {},
  watch: {},
  beforeMount () { },
  mounted () {
  },
  methods: {
    aa () { },
    onSubmit () {
      this.isShow = false
      this.$emit('update:show', false)
    },
    getRight () {
      this.$emit('cancel')
    }
  }

}

</script>

<style lang='less' scoped>
.popupfade-enter {
  transform: translateX(-100%);
}
.fade-leave {
  transform: translateX(0);
}
.popupfade-leave-to {
  transform: translateX(60%);
}

.fade-enter-to {
  transform: translateX(-100%);
}
.popupfade-leave-active,
.fade-enter-active {
  transition: all 40s;
}

.taskDetailRight {
  position: fixed;
  z-index: 50;
  height: 100vh;
  width: 100%;
  min-width: 200px;
  background: rgba(0, 0, 0, 0.12);
  top: 0;
  right: 0;
  transition: all 1s;
  &-contant {
    min-width: 100px;
    height: 100%;
    float: right;
    background: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    &-title {
      border-bottom: 1px solid @borderColor;
      padding: 10px 20px;
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: space-between;
      i{
        font-size: 22px;
        cursor: pointer;
      }
    }
    &-content {
      min-width: 480px;
      flex: 1;
      padding: 20px 20px;
      overflow: auto;
    }
    &-footer {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      border-top: 1px solid @borderColor;
    }
  }
}
</style>
