<template>
  <u-card
    @click="openCard"
    :show-foot="false"
    :show-head="false"
    :style="{ 'max-height': globalsHeight + 'px' }"
    border-radius="25"
    margin="0"
    class="global-container"
  >
    <template v-slot:body>
      <scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }">
        <!-- 骨架屏 -->
        <skeleton :banner="false" :loading="showGlobalSkeleton" :row="3" animate class="u-line-2 skeleton"></skeleton>

        <view class="grid">
          <view class="py-3 u-font-14 rounded-md bg-white" style="height: 100%" v-if="visibleRoles[roleIndex].name === '我'">
            <button class="text-xs bg-blue-500 text-white leading-6" style="width: 500rpx" @click="toWorkbench">工作台</button>
          </view>

          <template v-for="item in globals" :key="item.id">
            <template v-if="item.plugins && item.plugins.length">
              <view v-for="(pluginArr, i) in item.plugins" :key="i" class="pb-3">
                <template class="p-0 u-col-between" v-if="pluginArr.length">
                  <Plugin
                    :class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
                    :task="item"
                    :key="plugin.pluginTaskId"
                    :plugin-task-id="plugin.pluginTaskId"
                    :business-plugin-id="plugin.businessPluginId"
                    :plugin-id="plugin.pluginId"
                    :param="plugin.param"
                    :style-type="plugin.styleType || 0"
                    v-for="plugin in pluginArr"
                  />
                </template>
              </view>
            </template>

            <!-- 任务名插件 -->
            <view v-else class="pb-3">
              <Plugin plugin-id="1" :task="item" />
            </view>
          </template>
        </view>
      </scroll-view>
    </template>
  </u-card>
</template>

<script setup>
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton.vue';

defineProps({
  globals: {
    type: Array,
    default: () => [],
  },
});

const sysHeight = uni.getSystemInfoSync().screenHeight; // 屏幕的高度
const globalsHeight = Math.floor(((sysHeight - 44 - 30 - 10) / 5) * 4); // 全局任务的最大高度
const store = useStore();
const isShrink = computed(() => store.state.task.isShrink); // 全局任务是否收缩
const showGlobalSkeleton = computed(() => store.state.task.showGlobalSkeleton); // 全局任务骨架屏

const visibleRoles = computed(() => store.state.role.visibleRoles); // 展示的角色信息
const roleIndex = computed(() => store.state.role.roleIndex); // 时间轴角色索引
const roleId = computed(() => store.state.role.roleId); // 当前展示查看的角色id

// 手动展开日常任务
function openCard() {
  if (isShrink.value) {
    store.commit('task/setShrink', false);
  }
}

// 跳转工作台
function toWorkbench() {
  uni.navigateTo({
    url: '/pages/workbench/workbench'
  });
}
</script>

<style scoped lang="scss">
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}
</style>
