<template>
  <view class="m-2">
    <u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '96rpx' : '300rpx' }" border-radius="25" margin="0">
      <view slot="body">
        <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
          <skeleton :banner="false" :loading="!plugins.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
          <view class="p-0 u-col-between">
            <view class="grid grid-cols-3 gap-2 h-auto" v-if="plugins.length">
              <Plugin
                :class="getClass(plugin.col, plugin.row)"
                :key="pluginIndex"
                :pluginId="plugin.pluginId"
                :styleType="plugin.styleType || 0"
                v-for="(plugin, pluginIndex) in plugins"
              />
            </view>
          </view>
        </scroll-view>
      </view>
    </u-card>
  </view>
</template>

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

export default {
  name: 'Global',
  components: { Skeleton },
  props: { plugins: { type: Array, default: () => [] } },
  data() {
    return {
      // loading: true,
      pluginId: 0,
      styleType: 0,
      task: null,
    };
  },

  // mounted() {
  //   setTimeout(() => (this.loading = false), 2000);
  // },
  computed: mapState('home', ['isShrink']),
  methods: {
    getClass(col, row) {
      return [`row-span-${row}`, `col-span-${col}`];
    },
  },
};
</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>
