<template>
  <view class="column">
    <!-- v-if="tasks && tasks.length" -->
    <view>
      <view :key="task.id" v-for="task in tasks">
        <view class="flex">
          <TimeStatus :task="task" />
          <view class="flex items-center justify-between flex-1 ml-2 task-column">
            <view v-if="task.process !== 4">{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
            <view v-else>{{ $moment(+task.planStart).format('D日') }}</view>
            <!-- 任务功能菜单 -->
            <TaskTools v-if="task.process !== 4" />
          </view>
        </view>
        <view class="border-l-2 border-gray-300 plugin">
          <view class="h-3" v-if="task.process === 4"></view>
          <view class="ml-3 overflow-hidden shadow-lg task-box">
            <u-card
              :show-foot="false"
              :show-head="false"
              :style="{ height: setHeight(task.panel) }"
              class="h-16"
              margin="0"
              v-if="showSkeleton"
            >
              <view slot="body">
                <view>
                  <skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
                </view>
              </view>
            </u-card>

            <u-card
              :show-foot="false"
              :show-head="false"
              :style="{ height: setHeight(task.panel) }"
              class="h-16"
              margin="0"
              v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton"
              @click="onClickTask(+task.planStart)"
            >
              <!-- 任务面板插件 -->
              <view slot="body">
                <view class="p-0 u-col-between">
                  <view :key="pIndex" v-for="(row, pIndex) in task.plugins">
                    <view class="grid gap-2" v-if="row.length">
                      <Plugin
                        :class="getClass(plugin.col, plugin.row)"
                        :task="task"
                        :key="plugin.pluginTaskId"
                        :plugin-task-id="plugin.pluginTaskId"
                        :plugin-id="plugin.pluginId"
                        :param="plugin.param"
                        :style-type="styleType || 0"
                        v-for="plugin in row"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </u-card>
          </view>
        </view>
      </view>
    </view>
    <!-- 局部弹框操作栏 -->
    <Tips />
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton';
import TimeStatus from './TimeStatus.vue';
import TaskTools from './TaskTools.vue';

export default {
  name: 'TimeBox',
  components: { TimeStatus, Skeleton, TaskTools },

  data() {
    return { currentComponent: '', styleType: 0 };
  },

  computed: {
    ...mapState('role', ['roleId']),
    ...mapState('task', ['timeUnit', 'tasks', 'taskLoading', 'topEnd', 'bottomEnd', 'showSkeleton']),
    ...mapGetters('task', ['startTimeFormat']),
  },

  methods: {
    ...mapActions('task', ['getGlobal']),
    ...mapMutations('task', ['setTipsContent', 'setTipsContent']),

    // 设置任务面板高度
    setHeight(panel) {
      if (panel && panel.height) {
        return panel.height + 'px';
      } else {
        return 'auto';
      }
    },

    /**
     * 点击了定期任务的面板 更新可变的日常任务
     * @param {number} planStart 任务计划开始时间
     */
    onClickTask(planStart) {
      const param = { roleId: this.roleId, timeNode: planStart, timeUnit: this.timeUnit };
      this.getGlobal(param);
      this.$t.storage.setStorageSync('timeNode', planStart);
      this.$t.storage.setStorageSync('roleId', this.roleId);
    },

    // 设置网格布局
    getClass(col, row) {
      return [`row-span-${row}`, `col-span-${col}`];
    },
  },
};
</script>

<style scoped lang="scss">
.task-box {
  border-radius: 24rpx;
}
.column {
  padding: 24px 14px;
}
.task-column {
  height: 33px;
}
.plugin {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 15px;
}
/deep/ .ml-2 {
  margin-left: 16px;
}

/deep/ .ml-3 {
  margin-left: 20px;
}
</style>
