<template>
  <view class="u-font-14" style="height: 100%">
    <view v-if="pluginContent">
      <view
        style="height: 100%"
        :data-uid="userId"
        :data-pid="projectId"
        :data-did="task.detailId"
        :data-rid="roleId"
        :data-tid="task.id"
        :data-tname="task.name"
        :data-pstart="task.planStart"
        :data-rstart="task.realStart"
        :data-pdu="task.planDuration"
        :data-rdu="task.realDuration"
        v-html="pluginContent"
      ></view>
    </view>

    <view v-else>
      <p-task-title :name="task.name" v-if="pluginId === '1'" />
      <p-task-description :text="task.description" v-if="pluginId === '2'" />
      <p-task-duration-delay :realDuration="task.realDuration" :planDuration="task.planDuration" v-if="pluginId === '3'" />
      <p-task-start-time-delay :realStart="task.realStart" :planStart="task.planStart" v-if="pluginId === '4'" />
      <!-- <p-task-start-time-delay :task="task" v-if="pluginId === '4'" /> -->
      <!-- <p-deliverable :task="task" v-if="pluginId === '5'" /> -->
      <!-- <p-subtasks :task="task" v-if="pluginId === '6'" /> -->
      <!-- <p-subproject :task="task" v-if="pluginId === '7'" /> -->
      <!-- <p-task-countdown :task="task" v-if="pluginId === '8'" /> -->
    </view>
  </view>
</template>

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

export default {
  name: 'Plugin',
  props: {
    task: { default: () => {}, type: Object },
    pluginId: { default: '1', type: String },
    styleType: { default: 0, type: Number },
    pluginTaskId: { default: '', type: String },
  },

  data() {
    return { pluginContent: null };
  },

  computed: {
    ...mapGetters('user', ['userId']),
    ...mapGetters('project', ['projectId']),
    ...mapState('role', ['roleId']),
  },

  created() {
    this.getPlugin();
  },

  methods: {
    // 获取插件信息
    async getPlugin() {
      const { pluginId, styleType } = this;
      const data = await this.$u.api.getOtherPlugin({
        pluginId,
        styleType,
      });
      if (!data || !data.id) return;
      const reg = /data-root=["|']?(\w+)["|']?/gi;
      // console.log(data.html);
      if (data.html) {
        // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId

        if (reg.test(data.html)) {
          const uuid = RegExp.$1;
          // console.log('uuid: ', uuid, `p${this.pluginTaskId}`);

          const str = data.html.replaceAll(uuid, `p${this.pluginTaskId}`);
          this.pluginContent = str;
        } else {
          this.pluginContent = data.html;
        }
      }
      // console.log(this.pluginContent);

      if (data.js) {
        if (reg.test(data.js)) {
          const uuid = RegExp.$1;
          const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
          this.handleDom(str);
        } else {
          this.handleDom(data.js);
        }
      }
    },

    // 创建script dom
    handleDom(js) {
      const { pluginId } = this;
      let domList = Array.from(document.getElementsByTagName('script'));
      const index = domList.findIndex(item => item.id === `p${pluginId}`);
      if (js && index === -1) {
        const scriptDom = document.createElement('script');
        scriptDom.id = `p${pluginId}`;
        scriptDom.setAttribute('data-type', 'plugin');
        scriptDom.innerHTML = js;
        this.$nextTick(() => {
          document.body.append(scriptDom);
        });
      }
    },
  },
};
</script>
