<template>
  <view>
    <!-- #ifdef H5 -->
    <view
      class="content"
      id="project"
      :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"
    ></view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view
      class="content"
      id="project"
      :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"
    ></view>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

defineProps({
  task: { default: () => {}, type: Object },
  pluginId: { default: '1', type: String },
  styleType: { default: 0, type: Number },
  pluginTaskId: { default: '', type: String },
  param: { type: String, default: '' },
});

const store = useStore();
const roleId = computed(() => store.state.role.roleId);
const token = computed(() => store.state.user.token);
const userId = computed(() => store.getters['user/userId']);
const projectId = computed(() => store.getters['project/projectId']);
</script>

<script module="project" lang="renderjs">
export default {
  data() {
    return {
      pluginContent: null,
      pluginJs: null,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.getPlugin();
    });
  },

  methods: {
    // 获取插件信息
    async getPlugin() {
      const params = { pluginId: this.pluginId, styleType: this.styleType };
      this.$catchReq.getOtherPlugin(params, (err, res) => {
        if (err) {
          console.error('err: ', err);
        } else {
          if (!res || !res.id) return;
          if (res.html && res.js) {
            this.$nextTick(() => {
              this.init(res);
            });
          }
        }
      });
    },

    init(res) {
      const content = document.querySelector('.content');
      content.innerHTML = res.html;

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