<template>
  <!-- v-finger:pinch="pinchHandler" -->
  <view class="column">
    <view v-if="tasks && tasks.length">
      <view :key="task.id" v-for="task in tasks" :id="`a${task.id}`">
        <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" :task="task" />
          </view>
        </view>
        <view class="plugin">
          <view class="h-3" v-if="task.process === 4"></view>
          <!-- <view class="ml-3 overflow-hidden shadow-lg task-box"> -->
          <view class="ml-3">
            <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>

            <view v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" @click="onClickTask(task.planStart - 0, task.id)">
              <view class="p-0 u-col-between grid gap-3">
                <view :key="pIndex" v-for="(row, pIndex) in task.plugins">
                  <view class="grid grid-cols-1" v-if="row.length">
                    <Plugin
                      :class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
                      :task="task"
                      :key="plugin.pluginTaskId"
                      :plugin-info="plugin"
                      :plugin-task-id="plugin.pluginTaskId"
                      :business-plugin-id="plugin.businessPluginId"
                      :plugin-id="plugin.pluginId"
                      :param="plugin.param"
                      :style-type="data.styleType || 0"
                      v-for="plugin in row"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 局部弹框操作栏 -->
    <Tips />
  </view>
</template>

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

const props = defineProps({
  tasks: {
    type: Array,
    default: () => []
  }
})

const data = reactive({
  currentComponent: '',
  styleType: 0,
});

const store = useStore();
const roleId = computed(() => store.state.role.roleId);
const timeUnit = computed(() => store.state.task.timeUnit);
// const tasks = computed(() => store.state.task.tasks);
const showSkeleton = computed(() => store.state.task.showSkeleton);
const startTimeFormat = computed(() => store.getters['task/startTimeFormat']);

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

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

function pinchHandler(evt) {
  // evt.scale代表两个手指缩放的比例
  console.log(`缩放：${evt.zoom}`);
}
</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;
  border-left: 2px solid #d1d5db;
}
::v-deep .ml-2 {
  margin-left: 16px;
}

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