<template>
  <div
    v-if="bookText"
    class="strockplay-redInner"
    :style="{ borderColor: frameColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
  >
    <div v-if="playStorkes" :class="['strock-play-box']" @click="playHanzi" :style="{ color: frameColor }">
      <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
    </div>
    <div class="character-target-box">
      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" v-if="bgType === 'tian'" />
      <div :id="targetDiv" :ref="targetDiv" class="character-target-div"></div>
    </div>
  </div>
</template>

<script>
const HanziWriter = require('hanzi-writer');
export default {
  components: {},
  props: {
    bookText: {
      type: String,
      default: '',
    },
    targetDiv: {
      type: String,
      default: '',
    },
    playStorkes: {
      type: Boolean,
      default: true,
    },
    strokeColor: {
      type: String,
      default: '',
    },
    bookStrokes: {
      type: Object,
      default: () => {},
    },
    bgType: {
      type: String,
      default: 'tian',
    },
    frameColor: {
      type: String,
      default: '#F13232',
    },
    showErrorTip: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      writer: null,
    };
  },
  computed: {},
  watch: {
    targetDiv: {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.$nextTick(() => {
            this.initHanziwrite();
          });
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initHanziwrite();
    });
  },
  // 方法集合
  methods: {
    initHanziwrite() {
      let _this = this;
      if (this.$refs[this.targetDiv]) {
        let svg_arr = this.$refs[this.targetDiv].querySelectorAll('svg');
        svg_arr.forEach((item) => {
          item.remove();
        });
      }
      this.writer = HanziWriter.default.create(this.targetDiv, this.bookText, {
        charDataLoader(char, onComplete) {
          onComplete(_this.bookStrokes);
        },
        padding: 5,
        showOutline: true,
        strokeColor: this.strokeColor ? this.strokeColor : '#000',
        showHintAfterMisses: this.showErrorTip,
      });
    },
    playHanzi(event) {
      event.stopPropagation();
      this.writer.animateCharacter();
    },
  },
};
</script>

<style lang="scss" scoped>
.strockplay-redInner {
  position: relative;
  box-sizing: border-box;
  width: 64px; // 444px
  height: 64px; // 480px
  border: 1px solid #e81b1b;
}

.character-target-div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.character-target-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.character-target-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #dedede;
}

.strock-play-box {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  cursor: pointer;
}
</style>
