<template>
  <view class="m-2" v-if="globals && globals.length">
    <u-card @click="openCard" :show-foot="false" :show-head="false" style="max-height: 218rpx" border-radius="25" margin="0">
      <!-- :style="{ 'max-height': isShrink ? '106rpx' : '340rpx' }" -->
      <view slot="body">
        <scroll-view :scrollY="true" style="max-height: 280rpx">
          <!-- <scroll-view :scrollY="true" :style="{ 'max-height': isShrink ? '50rpx' : '280rpx' }"> -->
          <skeleton :banner="false" :loading="!globals.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
          <view class="grid gap-2">
            <block v-for="item in globals" :key="item.id">
              <template v-if="item.plugins">
                <block v-for="(pluginArr, i) in item.plugins" :key="i">
                  <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"
                      :plugin-id="plugin.pluginId"
                      :param="plugin.param"
                      :style-type="plugin.styleType || 0"
                      v-for="plugin in pluginArr"
                    />
                  </template>
                </block>
              </template>
            </block>
          </view>
        </scroll-view>
      </view>
    </u-card>
  </view>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton';

export default {
  name: 'Global',
  components: { Skeleton },

  data() {
    return {
      // loading: true,
      task: null,
    };
  },

  computed: {
    ...mapState('task', ['isShrink']),
    ...mapGetters('task', ['globals']),
  },

  methods: {
    ...mapMutations('task', ['setShrink']),

    // 手动展开日常任务
    openCard() {
      if (this.isShrink) {
        this.setShrink(false);
      }
    },
  },
};
</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>
