<template>
  <!-- 外层 -->
  <view>
    <view class="flex">
      <TimeStatus :task="task" />
      <view class="flex items-center justify-between flex-1 ml-2 task-column">
        <view v-if="task.process2 !== 4">{{ $moment(+task.planStart).format('YYYY年MM月DD日') }}</view>
        <view v-else>{{ $moment(+task.planStart).format('YYYY年MM月DD日') }}</view>
      </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
          @click="onClickTask(task.planStart - 0, task.id)"
          :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"
        >
          <view slot="body">
            <view class="p-0 u-col-between">
              <NotEvaluated :task="task" v-if="task.data.mentalTest.finishStatus === 0" />
              <view v-else>
                <EvaluatedNLCP :task="task" v-if="task.data.type === 0" />
                <EvaluatedXLJH :task="task" v-if="task.data.type === 1" />
              </view>
            </view>
          </view>
        </u-card>
      </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 EvaluatedNLCP from 'components/Evaluated/EvaluatedNLCP';
import EvaluatedXLJH from 'components/Evaluated/EvaluatedXLJH';

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

  props: {
    task: {
      type: Object,
      default: null,
    },
    taskIndex: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {};
  },

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

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

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

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

<style scoped lang="scss">
.task-box {
  border-radius: 24rpx;
}

.task-column {
  height: 33px;
}
.plugin {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 15px;
}
::v-deep .ml-2 {
  margin-left: 16px;
}

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