<!--  -->
<template>
  <div class="strockplay-redInner">
    <div v-if="playStorkes" :class="['strock-play-box']" @click="playHanzi">
      <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" />
      <div :id="targetDiv" :ref="targetDiv" class="character-target-div"></div>
    </div>
  </div>
</template>

<script>
import { GetStaticResources } from '@/api/app';
const HanziWriter = require('hanzi-writer');
export default {
  components: {},
  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor'],
  data() {
    return {
      writer: null,
    };
  },
  computed: {},
  watch: {
    targetDiv: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          let _this = this;
          _this.$nextTick(() => {
            _this.initHanziwrite();
          });
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    initHanziwrite() {
      let _this = this;
      _this.writer = null;
      //var ren = require("hanzi-writer-data/国");
      _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
        charDataLoader: function (char, onComplete) {
          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
          let data = {
            hz: char,
          };
          GetStaticResources(MethodName, data).then((res) => {
            onComplete(res);
          });
        },
        padding: 5,
        showOutline: true,
        strokeColor: _this.strokeColor ? _this.strokeColor : '#000',
      });
    },
    playHanzi(event) {
      let _this = this;
      _this.writer.animateCharacter();
      event.stopPropagation();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.$nextTick(() => {
      _this.initHanziwrite();
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.strockplay-redInner {
  position: relative;
  box-sizing: border-box;
  width: 128px; // 444px
  height: 128px; // 480px
}

.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;
  color: #e81b1b;
  cursor: pointer;
}
</style>
