<!-- 配置卡片 -->
<template>
  <div>
    <el-card class="box-card">
      <div class="topBox">
        <el-tooltip class="item" effect="dark" :content="value.tag" placement="top-start" :disabled='!isTextOverflowing(value.tag,1,156,16)'>
          <div class="title omit">
            {{value.tag}}
          </div>
        </el-tooltip>
        <el-switch v-if="'isopen' in value" v-model="value.isopen" active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </div>
      <el-tooltip class="item" effect="dark" :content="value.content" placement="top-start" :disabled='!isTextOverflowing(value.content,2,206,12)'>
        <div class="content omit_2">
          {{value.content}}
        </div>
      </el-tooltip>
      <!-- <el-divider style="margin: 14px 0"></el-divider> -->
      <component v-if="value.inputCompont" :is='value.inputCompont.compont' v-model="value.value" v-bind="value.inputCompont.attrs" style="width:100%"></component>

    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['value'],
  components: {},

  computed: {},

  mounted() {},

  methods: {
    isTextOverflowing(text, lineNum = 1, width, fontSize) {
      // 创建一个临时的div来计算文本是否超出
      const tempDiv = document.createElement('div')
      tempDiv.innerHTML = text
      tempDiv.style.position = 'absolute'
      tempDiv.style.width = width + 'px'
      tempDiv.style.opacity = 0
      tempDiv.style.overflow = 'hidden'
      tempDiv.style.whiteSpace = 'nowrap'
      tempDiv.style.fontSize = fontSize + 'px'
      document.body.appendChild(tempDiv)
      const isOverflowing = tempDiv.scrollWidth > tempDiv.offsetWidth * lineNum
      document.body.removeChild(tempDiv)

      return isOverflowing
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.box-card {
  width: 240px;
  min-height: 150px;

  flex-shrink: 0;
  margin-bottom: 20px;

  background: linear-gradient(to bottom, #e7efff 10%, #fff 50%);
}
.box-card-2 {
  width: 240px;

  flex-shrink: 0;
}
.tag:not(:last-child) {
  margin-right: 10px;
}
div /deep/ .el-card__body {
  height: 100%;
  width: 100%;
  position: relative;
}

div /deep/.el-divider--horizontal {
  margin: 14px 0 0 0;
}
.topBox {
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 16px;
  color: $--color-text-primary;
  margin-bottom: 16px;
  width: 156px;
}
.content {
  margin-bottom: 10px;
  color: $--color-text-secondary;
  width: 206px;
  font-size: 12px;
}
.buttonBox {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  width: calc(100% - 32px);
}
</style>
