<template>
  <view class="u-font-14" style="height: 100%">
    <view v-if="pluginContent">
      <view
        :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-rstart="task.realStart"
        :data-tid="task.id"
        :data-tname="task.name"
        :data-token="token"
        :data-uid="userId"
        style="height: 100%"
        v-html="pluginContent"
      ></view>
    </view>

    <view v-else>
      <!-- <plugin-default /> -->
      <!-- <component :task="task" :is="pluginComponent"></component> -->
      <p-task-title :task="task" v-if="pluginId === '1'" />
      <p-task-description :task="task" v-if="pluginId === '2'" />
      <p-task-duration-delay :task="task" v-if="pluginId === '3'" />
      <p-task-start-time-delay :task="task" v-if="pluginId === '4'" />
      <p-upload-deliverable :task="task" v-if="pluginId === '5' && isMine" />
      <p-delivery-history :task="task" v-if="pluginId === '5' && !isMine" />
      <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'" /> -->
      <p-manage-project :task="task" v-if="pluginId === '9'" />
      <p-manage-role :task="task" v-if="pluginId === '10'" />
      <p-manage-member :task="task" v-if="pluginId === '11'" />
      <p-manage-task :task="task" v-if="pluginId === '12'" />
      <p-wbs-import :task="task" v-if="pluginId === '13' || pluginId === '14'" />
      <p-deliver-check :task="task" v-if="pluginId === '15'" />
    </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 },
    param: { type: String, default: '' },
  },

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

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

    // 插件名称
    // pluginComponent() {
    //   const target = this.$t.plugin.defaults.find(item => item.id === +this.pluginId);
    //   if (!target) return '';
    //   return target.component;
    // },
  },

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

  methods: {
    // 获取插件信息
    async getPlugin() {
      const { pluginId, styleType } = this;
      const params = { pluginId, styleType };
      this.$t.$q.getOtherPlugin(params, (err, data) => {
        if (err) {
          console.error('err: ', err);
        } else {
          if (!data || !data.id) return;
          const reg = /data-root=["|']?(\w+)["|']?/gi;
          let uuid = '';
          // FIXME: 没有兼容  只有js, 没有html的情况
          if (data.html) {
            // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId

            if (reg.test(data.html)) {
              uuid = RegExp.$1;
              const str = data.html.replace(new RegExp(uuid, 'g'), `p${this.pluginTaskId}`);
              this.pluginContent = str;
            } else {
              this.pluginContent = data.html;
            }

            const str = data.js.replace(new RegExp(uuid, 'g'), `p${this.pluginTaskId}`);
            this.handleDom(str);
          }
        }
      });

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

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