<template>
  <view class="u-font-14">
    <view style="height: 100%" v-if="pluginContent">
      <view v-if="pluginContent.html">
        <view style="height: 100%" v-html="pluginContent.html"></view>
      </view>
      <view v-else>
        <view v-if="item && item.name">
          <p-task-title :item="item" v-if="pluginId === '1'" />
          <p-task-description :item="item" v-if="pluginId === '2'" />
          <p-task-duration-delay :item="item" v-if="pluginId === '3'" />
          <p-task-start-time-delay :item="item" v-if="pluginId === '4'" />
          <p-deliverable :item="item" v-if="pluginId === '5'" />
          <p-subtasks :item="item" v-if="pluginId === '6'" />
          <p-subproject :item="item" v-if="pluginId === '7'" />
          <p-task-countdown :item="item" v-if="pluginId === '8'" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Plugin',
  props: {
    item: {
      default: () => {},
      type: Object,
    },
    pluginId: {
      default: '0',
      type: String,
    },
    styleType: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return { pluginContent: null };
  },
  async created() {
    await this.getPlugin();
    if (this.pluginContent.js) {
      var scriptDom = document.createElement('script');
      scriptDom.id = `p${this.pluginContent.pluginId}`;
      scriptDom.innerHTML = this.pluginContent.js;
      document.body.append(scriptDom);
    }
  },
  methods: {
    async getPlugin() {
      const { pluginId, styleType } = this;
      const res = await this.$u.api.getOtherPlugin({
        pluginId,
        styleType,
      });
      this.$emit('changeLoading', false);
      this.pluginContent = res;
      console.log(this.pluginContent);
    },
  },
};
</script>
