<template>
  <div class="check-vue">
    <span class="left-line" v-if="leftLine"> </span>
    <span class="check-box" :class="{'checked': checked}"></span>
    <span class="check-label">{{ label }}</span>
  </div>
</template>

<script>
export default {
  props: ["label", "jsonDataArray", "leftLine"],
  computed: {
    checked() {
      if (this.jsonDataArray) {
        return this.jsonDataArray.includes(this.label);
      }
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.check-vue {
  display: flex;
  align-items: center;
}
.check-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 0.5px solid rgba(0, 0, 0, 0.8);
}

.check-label {
  height: 100%;
  padding-left: 2px;
  font-family: SimSun;
  font-size: 14px;
  line-height: 1;
}
.checked {
  position: relative;
}
.checked::before {
  position: absolute;
  content: " ";
  width: 5px;
  height: 10px;
  transform: rotate(45deg);
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  top: -1px;
  left: 2px;
}
.left-line {
  display: inline-flex;
  align-items: center;
  width: 12px;
  height: 12px;
}
.left-line::before {
  content: "";
  display: inline-block;
  width: 12px;
  border-top: 1px solid;
}

.padding-top-14 {
    padding-top: 14px;
}

@media print {
  .check-label {
    height: 100%;
    padding-left: 6px;
    font-family: SimSun;
    font-size: 18px;
    line-height: 1;
  }
  .check-box {
    width: 18px;
    height: 18px;
  }

  .checked::before {
    position: absolute;
    content: "";
    width: 7px;
    height: 13px;
    transform: rotate(45deg);
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    top: -0px;
    left: 4px;
  }
}
</style>