<template>
  <el-container ref="cardRef"
                :id="theme==='light'?'':'dark-card-wrap'"
                :style="rootStyle"
                class="card-wrap">
    <el-header :height="navHeaderHeight">
      <el-row>
        <el-col :span="12">
          <span class="inline-block devide">{{$t(title)}}</span>
        </el-col>
        <el-col :span="12"
                class="close-col">
          <div>
            <i class="el-icon-refresh"
               @click.stop.prevent="onRefresh"></i>
            <i class="el-icon-close"
               @click.stop.prevent="removeNode"></i>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <slot>
        <div>插槽内容</div>
      </slot>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'HtNavCard',
  data () {
    return {}
  },
  props: {
    // 主题
    theme: {
      type: String,
      default: 'light',
      validate: value => {
        return ['dark', 'light'].includes(value)
      }
    },
    // 导航头部高度
    navHeaderHeight: {
      type: String,
      default: 'auto'
    },
    // 左边title
    title: {
      type: String,
      default: 'ht.card.text_1'
    }
  },
  computed: {
    rootStyle () {
      let theme = this.theme === 'dark' ? '#000' : '#fff'
      return {
        '--theme': theme
      }
    }
  },
  methods: {
    async onRefresh () {
      this.$emit('refresh')
    },
    // 暴露移除方法
    async removeNode () {
      const dom = this.$refs['cardRef']
      if (!dom) return
      console.log('dom', dom.$el, dom.parentNode)
      dom && dom.$el && dom.$el.parentNode.removeChild(dom.$el)
    }
  }
}
</script>

<style lang="scss" scoped>
#dark-card-wrap {
  .devide {
    color: #fff;
  }
  .el-header {
    border-color: #77819b;
  }
  .el-main {
    color: #fff;
  }
}
.card-wrap {
  width: 100%;
  min-width: 800px;
  background: var(--theme);
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  .close-col {
    text-align: right;
  }
  .inline-block {
    display: inline-block;
  }
  .el-icon-refresh,
  .el-icon-close {
    font-size: 15px;
    font-weight: 900;
    color: #9e9e9e;
    cursor: pointer;
  }
  .el-icon-close {
    padding-left: 10px;
  }
  /deep/.el-col {
    padding: 13px 20px;
    line-height: 24px;
  }

  /deep/.el-row {
    height: 100%;
    display: flex;
    align-items: center;
  }
  /deep/.el-header {
    padding: 0;
    border-bottom: 1px solid #ebeef5;
  }
  .devide {
    font-size: 18px;
    font-weight: 900;
    border-left: 5px solid #409eff;
    padding-left: 5px;
  }
}
</style>
