<template>
  <view class="render-box shadow-lg" v-if="pluginInfo">
    <view
      :id="`render-${pluginTaskId}`"
      :data-did="task.detailId"
      :data-param="param"
      :data-pdu="task.planDuration"
      :data-pid="projectId"
      :data-pstart="task.planStart"
      :data-rdu="task.realDuration"
      :data-rid="roleId"
      :data-tid="task.id"
      :data-tname="task.name"
      :data-token="token"
      :data-rstart="task.realStart"
      :data-uid="userId"
      :pluginInfo="pluginInfo"
      :change:pluginInfo="project.renderDom"
    ></view>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
  name: 'RenderHtmlFragment',
  props: {
    task: { default: () => {}, type: Object },
    pluginId: { default: '1', type: String },
    styleType: { default: 0, type: Number },
    pluginTaskId: { default: '', type: String },
    businessPluginId: { default: '', type: String },
    param: { type: String, default: '' },
  },
  data() {
    return {
      pluginInfo: null,
    };
  },
  computed: {
    ...mapState(['allPlugin']),
    ...mapState('role', ['roleId']),
    ...mapState('user', ['token']),
    ...mapGetters('project', ['projectId']),
    ...mapGetters('user', ['userId']),
  },

  mounted() {
    this.getPlugin();
  },
  methods: {
    getPlugin() {
      const allPlugin = this.allPlugin || uni.$storage.getStorageSync('allPlugin');
      if (allPlugin && JSON.parse(allPlugin)) {
        // 有本地数据
        try {
          const pluginLists = JSON.parse(allPlugin);
          // pluginLists 肯能没有find方法,交给catch处理
          const pluginTarget = pluginLists.find(item => item.id === this.pluginId);
          this.pluginInfo = pluginTarget || null;
        } catch (error) {
          console.error('error: ', error);
          this.pluginInfo = null;
        }
      } else {
        // 没有本地数据 API 查询
        const params = { businessPluginId: this.businessPluginId };
        uni.$catchReq.getOtherPlugin(params, (err, res) => {
          if (err) {
            console.error('err: ', err);
            this.pluginInfo = null;
          } else {
            this.pluginInfo = res || null;
          }
        });
      }
    },
  },
};
</script>

<script module="project" lang="renderjs">
// TODO: 未处理配置 多次使用插件的复用
export default {
  methods: {
    /**
     * 渲染dom
     * @param {object|null} res 插件详情 监听的pluginInfo
     * @param {*} b
     * @param {object} instance 实例对象
     */
    renderDom(res, b, instance) {
      console.log('res,b,instance: ', res,b,instance);
      if (!res) return;
      if (res.html) {
        const content = window.document.getElementById(`render-${this.pluginTaskId}`);
        content.innerHTML = res.html;
      }

      if (res.js) {
        const script = window.document.createElement('script');
        script.innerHTML = res.js;
        window.document.body.appendChild(script);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.render-box {
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  overflow: hidden;
}

button {
  border: none !important;
}
</style>
