<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  daylist: {
    type: Array,
    default: () => [],
  },
});
watch(
  () => props.daylist,
  (newVal) => {
    console.log(newVal);
  },
  { deep: true },
);
const router = useRouter();

// 跳转至任务详情页
const handleTaskClick = (taskId: number) => {
  router.push(`/schedule/detail/${taskId}`);
};
const authStatusMap = {
  0: {
    name: '可授权',
    color: '#215ACD',
    backcolr: '#E4EDFF',
  },
  1: {
    name: '被授权',
    color: 'orange',
    backcolr: '#FFEAD6',
  },
  2: {
    name: '已授权',
    color: '#339169',
    backcolr: '#D6EFE6',
  },
} as any;
// border-color: rgb(229 231 235 / 1);
// 模拟数据
const emergencyTasks = [
  {
    id: 1,
    title: '应急演练',
    icon: 'warning',
    color: '#D34B27',
    mainColor: '#FFE6E0',
    deadline: '12-31 23:59',
    days: 61,
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 2,
    title: '纳税人普查',
    icon: 'document',
    color: '#D34B27',
    mainColor: '#FFE6E0',
    deadline: '12-31 23:59',
    days: 61,
    status: '被授权',
    statusColor: 'orange',
  },
];

const todayTasks = [
  {
    id: 1,
    title: '监控录像抽检',
    icon: 'monitor',
    color: '#FF9428',
    mainColor: '#FFEAD6',
    deadline: '12-07 23:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 2,
    title: '爆缸试水1',
    icon: 'water',
    color: '#FF9428',
    mainColor: '#FFEAD6',
    deadline: '12-14 23:00',
    status: '已授权',
    statusColor: '#339169',
  },
  {
    id: 3,
    title: '应急消防用品月检',
    icon: 'fire',
    color: '#FF9428',
    mainColor: '#FFEAD6',
    deadline: '12-31 13:59',
    status: '被授权',
    statusColor: 'orange',
  },
  {
    id: 4,
    title: '核对销售（油品）调查1',
    icon: 'check',
    color: '#FF9428',
    mainColor: '#FFEAD6',
    deadline: '12-15 23:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 5,
    title: '便利店盘点',
    icon: 'shopping',
    color: '#FF9428',
    mainColor: '#FFEAD6',
    deadline: '12-31 23:59',
    status: '被授权',
    statusColor: 'orange',
  },
  {
    id: 6,
    title: '新员工三级教育',
    icon: 'user',
    color: '#339169',
    mainColor: '#D6EFE6',
    deadline: '12-06 23:00',
    status: '已授权',
    statusColor: '#339169',
  },
  {
    id: 7,
    title: '厨房宿舍月检',
    icon: 'home',
    color: '#339169',
    mainColor: '#D6EFE6',
    deadline: '12-31 23:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 8,
    title: '收油流程巡检',
    icon: 'oil',
    color: '#339169',
    mainColor: '#D6EFE6',
    deadline: '12-07 23:59',
    status: '被授权',
    statusColor: 'orange',
  },
  {
    id: 9,
    title: '第一次例会',
    icon: 'meeting',
    color: '#339169',
    mainColor: '#D6EFE6',
    deadline: '12-15 23:00',
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 10,
    title: '建军计划',
    icon: 'plan',
    color: '#339169',
    mainColor: '#D6EFE6',
    deadline: '12-03 23:00',
    status: '已授权',
    statusColor: '#339169',
  },
  {
    id: 11,
    title: '员工培训',
    icon: 'training',
    color: '#339169',
    mainColor: '#D6EFE6',
    deadline: '12-31 23:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
];

const tomorrowTasks = [
  {
    id: 1,
    title: '巡检日检',
    icon: 'check',
    color: '#215ACD',
    mainColor: '#E4EDFF',
    deadline: '12-31 13:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 2,
    title: '爆缸试水1',
    icon: 'water',
    color: '#215ACD',
    mainColor: '#E4EDFF',
    deadline: '12-14 23:00',
    status: '已授权',
    statusColor: '#339169',
  },
  {
    id: 3,
    title: '应急消防用品月检',
    icon: 'fire',
    color: '#215ACD',
    mainColor: '#E4EDFF',
    deadline: '12-31 13:59',
    status: '被授权',
    statusColor: 'orange',
  },
  {
    id: 4,
    title: '核对销售（油品）调查1',
    icon: 'check',
    color: '#215ACD',
    mainColor: '#E4EDFF',
    deadline: '12-15 23:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
  {
    id: 5,
    title: '便利店盘点',
    icon: 'shopping',
    color: '#86909C',
    mainColor: '#F1F1F1',
    deadline: '12-31 23:59',
    status: '已授权',
    statusColor: '#339169',
  },
  {
    id: 6,
    title: '新员工三级教育',
    icon: 'user',
    color: '#86909C',
    mainColor: '#F1F1F1',
    deadline: '12-06 23:00',
    status: '被授权',
    statusColor: 'orange',
  },
  {
    id: 7,
    title: '巡检日检',
    icon: 'check',
    color: '#86909C',
    mainColor: '#F1F1F1',
    deadline: '12-31 13:59',
    status: '可授权',
    statusColor: '#215ACD',
  },
];
</script>

<template>
  <!-- 逾期待处理 -->
  <div class="mb-6">
    <h3 class="mb-3 text-lg font-semibold">逾期待处理</h3>
    <div
      class="grid grid-cols-4 gap-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5"
    >
      <div
        v-for="task in props.daylist"
        :key="task.id"
        class="h-[96px] w-[240px] cursor-pointer rounded shadow-sm transition-all hover:shadow-md"
        @click="handleTaskClick(task.id)"
      >
        <div
          class="flex h-8 items-center justify-center rounded-t text-sm font-medium text-white"
          :style="{ backgroundColor: authStatusMap[task?.authStatus]?.color }"
        >
          已逾期 {{ task.days }} 天
        </div>
        <div
          class="flex h-[64px] items-center justify-between rounded-b border border-t-0 border-gray-200 p-4"
          :style="{
            backgroundColor: authStatusMap[task?.authStatus]?.backcolr,
          }"
        >
          <div class="flex items-center" style="margin-right: 8px">
            <span
              class="flex-none rounded px-2 py-0.5 text-xs font-medium"
              style="color: #ffffff"
              :style="{
                backgroundColor: authStatusMap[task?.authStatus]?.color,
              }"
            >
              {{ authStatusMap[task?.authStatus]?.name || '未知' }}
            </span>
          </div>
          <div class="flex min-w-0 flex-1 items-center">
            <div class="min-w-0">
              <div class="truncate font-medium">
                {{ task?.taskName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 当日任务 -->
  <div class="mb-6">
    <h3 class="mb-3 text-lg font-semibold">当日</h3>
    <div
      class="grid grid-cols-4 gap-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5"
    >
      <div
        v-for="task in todayTasks"
        :key="task.id"
        class="h-[96px] w-[240px] cursor-pointer rounded shadow-sm transition-all hover:shadow-md"
        @click="handleTaskClick(task.id)"
      >
        <div
          class="flex h-8 items-center justify-center rounded-t text-sm font-medium text-white"
          :style="{ backgroundColor: authStatusMap[task?.authStatus]?.color }"
        >
          {{ task.deadline }}
        </div>
        <div
          class="flex h-[64px] items-center justify-between rounded-b border border-t-0 border-gray-200 p-4"
          :style="{
            backgroundColor: authStatusMap[task?.authStatus]?.backcolr,
          }"
        >
          <div class="flex items-center" style="margin-right: 8px">
            <span
              v-if="task.status"
              class="flex-none rounded px-2 py-0.5 text-xs font-medium"
              style="color: #ffffff"
              :style="{
                backgroundColor:
                  task.statusColor === '#215ACD'
                    ? '#215ACD'
                    : task.statusColor === '#339169'
                      ? '#339169'
                      : task.statusColor === 'orange'
                        ? '#ea580c'
                        : '',
              }"
            >
              {{ task.status }}
            </span>
          </div>
          <div class="flex min-w-0 flex-1 items-center">
            <div class="min-w-0">
              <div class="truncate font-medium">{{ task.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 明日任务 -->
  <div>
    <h3 class="mb-3 text-lg font-semibold">明日</h3>
    <div
      class="grid grid-cols-4 gap-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5"
    >
      <div
        v-for="task in tomorrowTasks"
        :key="task.id"
        class="h-[96px] w-[240px] cursor-pointer rounded shadow-sm transition-all hover:shadow-md"
        @click="handleTaskClick(task.id)"
      >
        <div
          class="flex h-8 items-center justify-center rounded-t text-sm font-medium text-white"
          :style="{ backgroundColor: authStatusMap[task?.authStatus]?.color }"
        >
          {{ task.deadline }}
        </div>
        <div
          class="flex h-[64px] items-center justify-between rounded-b border border-t-0 border-gray-200 p-4"
          :style="{
            backgroundColor: authStatusMap[task?.authStatus]?.backcolr,
          }"
        >
          <div class="flex items-center" style="margin-right: 8px">
            <span
              v-if="task.status"
              class="flex-none rounded px-2 py-0.5 text-xs font-medium"
              style="color: #ffffff"
              :style="{
                backgroundColor:
                  task.statusColor === '#215ACD'
                    ? '#215ACD'
                    : task.statusColor === '#339169'
                      ? '#339169'
                      : task.statusColor === 'orange'
                        ? '#ea580c'
                        : '',
              }"
            >
              {{ task.status }}
            </span>
          </div>
          <div class="flex min-w-0 flex-1 items-center">
            <div class="min-w-0">
              <div class="truncate font-medium">{{ task.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
