<template>
  <div class="strockredBox">
    <div class="strockred">
      <div class="character-target-box">
        <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
        <div :id="targetDiv" class="character-target-div"></div>
      </div>
      <!-- <div v-if="reset" :class="['reset-box']" @click="resetHanzi">
        <SvgIcon icon-class="reset" class="reset-btn" />
      </div> -->
    </div>
  </div>
</template>

<script>
const HanziWriter = require('hanzi-writer');
export default {
  name: 'Strockred',
  components: {},
  props: {
    bookText: {
      type: String,
      default: '',
    },
    targetDiv: {
      type: String,
      default: '',
    },
    reset: {
      type: Boolean,
      default: true,
    },
    hanziColor: {
      type: String,
      default: '',
    },
    bookStrokes: {
      type: Object,
      default: () => {},
    },
    isAnswer: {
      type: String,
      default: 'false',
    },
  },
  data() {
    return {
      writer: null,
    };
  },
  computed: {},
  watch: {
    hanziColor(newVal) {
      this.updateColor(newVal);
    },
    Book_text: {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.$nextTick(() => {
            this.initHanziwrite();
          });
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initHanziwrite();
    });
  },
  // 方法集合
  methods: {
    initHanziwrite() {
      let _this = this;
      let options = {
        charDataLoader(char, onComplete) {
          onComplete(_this.bookStrokes);
        },
        padding: 5,
        showCharacter: false,
        strokeColor: this.hanziColor,
        drawingColor: this.hanziColor,
        drawingWidth: 6,
      };
      this.writer = HanziWriter.default.create(this.targetDiv, this.Book_text, options);
      this.writer.quiz({
        onComplete: function (summaryData) {
          // 禁用操作 清除后传参给父级保存答案
          _this.$emit('update:isAnswer', 'true');
        },
      });
    },
    resetHanzi() {
      this.writer.quiz();
      this.$emit('update:isAnswer', 'false');
    },
    updateColor(color) {
      this.writer.updateColor('strokeColor', color);
      this.writer.updateColor('drawingColor', color);
    },
  },
};
</script>

<style lang="scss" scoped>
.strockredBox {
  width: 64px; // 444px
  height: 64px; // 480px
}

.strockred {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  .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;
  }

  .reset-box {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    color: $text-color;
    cursor: pointer;

    &:hover {
      color: #000;
    }
  }
}
</style>
