<template>
  <view class="render-box shadow-lg" v-if="show">
    <!-- #ifdef H5 -->
    <view
      class="content"
      style="border-radius: 8px"
      :id="`project-${task.id}`"
      :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-${task.id}`"
      :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, reactive, watch, ref } 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 },
  businessPluginId: { default: '', type: String },
  param: { type: String, default: '' },
});

const data = reactive({ show: true });

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']);
const allPlugin = uni.$storage.getStorageSync('allPlugin');
</script>

<script module="project" lang="renderjs">
export default {
  data() {
    return {
      pluginContent: null,
      pluginJs: null,
      show: false,
      pluginLists: [],
      flag: false,
      pluginInfo: {}
    };
  },

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

  methods: {
    // 获取插件信息
    async getPlugin() {
      this.pluginLists = JSON.parse(this.allPlugin);
      this.pluginLists.forEach(item => {
        if (this.pluginId === item.id) {
          this.flag = true;
          this.pluginInfo = item;
          this.show = true;
        }
      });

      if (this.flag) {
        this.$nextTick(() => {
          this.init(this.pluginInfo);
        });
      } else {
        const params = { businessPluginId: this.businessPluginId };
        this.$catchReq.getOtherPlugin(params, (err, res) => {
          if (err) {
            console.error('err: ', err);
          } else {
            if (!res) return;
            if (res.html && res.js) {
              this.show = true;
              this.$nextTick(() => {
                this.init(res);
              });
            }
          }
        });
      }
    },

    init(res) {
      const content = document.getElementById(`project-${this.task.id}`);
      content.innerHTML = res.html;

      const script = document.createElement('script');
      script.innerHTML = res.js;
      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>
