<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import {
  ElButton,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
} from 'element-plus';

import BiddingComponent from './components/bidding.vue';
import CheckComponent from './components/check.vue';
// 引入检查项组件、评论组件和查阅组件
import CommentComponent from './components/comment.vue';
// import ConsultComponent from './components/consult.vue';
import WeeklyComponent from './components/weekly.vue';

// 模拟任务数据
const taskData = ref({
  name: '未来路摄像头抓图AI检查',
  username: '张三',
  status: '待处理',
  priority: '必做',
  description: '摄像头自动抓图进行AI检查',
  standardGuide: '',
  executor: '钉钉技术支持',
  planDate: '2025-12-09',
  taskTime: '12-09 00:00 ~ 12-09 23:00',
  taskType: '运营',
  taskOwner: '',
  frequency: '每天一次',
  creator: '系统',
  suggestion: '暂无',
  images: [
    'https://picsum.photos/200/150?random=1',
    'https://picsum.photos/200/150?random=2',
  ],
  // 处理信息
  handleInfo: {
    handleStatus: '已完成',
    handleSituation: '已完成摄像头抓图AI检查，检查结果正常，无异常情况。',
    handleImages: [
      'https://picsum.photos/200/150?random=3',
      'https://picsum.photos/200/150?random=4',
      'https://picsum.photos/200/150?random=5',
    ],
    handleTime: '2025-12-09 14:30:00',
    handler: '张三',
  },
});

// 图片预览相关
const previewVisible = ref(false);
const previewImages = ref<string[]>([]);

// 预览图片
const previewImage = (imageUrl: string) => {
  previewImages.value = [imageUrl];
  previewVisible.value = true;
};

// 关闭图片预览
const closePreview = () => {
  previewVisible.value = false;
};

// 状态标签配置
const statusConfig: any = {
  待处理: { type: 'info', text: '待处理' },
  处理中: { type: 'warning', text: '处理中' },
  已完成: { type: 'success', text: '已完成' },
  已关闭: { type: 'danger', text: '已关闭' },
};

// 优先级标签配置
const priorityConfig: any = {
  必做: { type: 'danger', text: '必做' },
  选做: { type: 'warning', text: '选做' },
  常规: { type: 'info', text: '常规' },
};

// 关闭任务
const handleCloseTask = () => {
  console.log('关闭任务');
};

// 转交任务
const handleTransferTask = () => {
  console.log('转交任务');
};
</script>

<template>
  <Page title="" :auto-content-height="true">
    <template #description>
      <!-- 任务头部信息 -->
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div
            class="task-icon mr-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-500"
          >
            <img src="/icon/4.png" alt="任务图标" class="h-6 w-6" />
          </div>
          <div>
            <h2 class="mb-1 text-xl font-bold">{{ taskData.name }}</h2>
            <div class="flex items-center space-x-2">
              <ElTag :type="priorityConfig[taskData.priority]?.type || 'info'">
                {{
                  priorityConfig[taskData.priority]?.text || taskData.priority
                }}
              </ElTag>
              <ElTag :type="statusConfig[taskData.status]?.type || 'info'">
                {{ statusConfig[taskData.status]?.text || taskData.status }}
              </ElTag>
            </div>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <ElButton type="primary" @click="handleTransferTask">
            转交任务
          </ElButton>
          <ElButton type="primary" @click="handleCloseTask">
            关闭任务
          </ElButton>
        </div>
      </div>
    </template>
    <!-- <div>
      <span style="font-size: 20px; font-weight: 400">运营异常-任务详情</span>
    </div> -->
    <div class="boxdev">
      <div>
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >任务信息</span
              >
            </div>
          </template>
          <ElDescriptions class="task-info" :column="4">
            <ElDescriptionsItem label="任务描述:">
              {{ taskData.description }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="标准指引:">
              {{ taskData.standardGuide || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="执行人:">
              {{ taskData.executor }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="计划时间:">
              {{ taskData.planDate }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="任务时间:">
              {{ taskData.taskTime }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="任务类型:">
              {{ taskData.taskType }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="任务负责人:">
              {{ taskData.creator || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="任务频率:">
              {{ taskData.frequency }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="负责人:">
              {{ taskData.username }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="创建:" :span="4">
              {{ taskData.creator }}
            </ElDescriptionsItem>
            <ElDescriptionsItem>
              <div style="padding-left: 24px; margin-top: 10px">
                <div>处理建议: {{ taskData.frequency }}</div>
                <div>任务图片:</div>
                <div
                  v-if="taskData.images && taskData.images.length > 0"
                  class="task-images"
                >
                  <img
                    v-for="(image, index) in taskData.images"
                    :key="index"
                    :src="image"
                    alt="任务图片"
                    class="task-image"
                    @click="previewImage(image)"
                  />
                </div>
                <span v-else>-</span>
              </div>
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!--竞价-->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >竞价信息</span
              >
            </div>
          </template>
          <BiddingComponent />
        </ElCard>

        <!-- 周报信息 -->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >周报信息</span
              >
            </div>
          </template>
          <WeeklyComponent />
        </ElCard>

        <!-- 处理信息组件 -->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >处理信息</span
              >
            </div>
          </template>
          <ElDescriptions class="task-info" :column="4">
            <ElDescriptionsItem label="处理情况:">
              {{ taskData.handleInfo.handleStatus || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="处理时间:">
              {{ taskData.handleInfo.handleTime || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="处理状态:" :span="4">
              <ElTag :type="statusConfig[taskData.status]?.type || 'info'">
                {{ statusConfig[taskData.status]?.text || taskData.status }}
              </ElTag>
            </ElDescriptionsItem>
            <ElDescriptionsItem>
              <div style="padding-left: 24px; margin-top: 10px">
                <div>处理建议: {{ taskData.frequency }}</div>
                <div>任务图片:</div>
                <div
                  v-if="
                    taskData.handleInfo.handleImages &&
                    taskData.handleInfo.handleImages.length > 0
                  "
                  class="task-images"
                >
                  <img
                    v-for="(image, index) in taskData.handleInfo.handleImages"
                    :key="index"
                    :src="image"
                    alt="处理图片"
                    class="task-image"
                    @click="previewImage(image)"
                  />
                </div>
                <span v-else>-</span>
              </div>
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 检查项组件 -->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >检查项</span
              >
            </div>
          </template>
          <CheckComponent />
        </ElCard>
      </div>
      <div>
        <!-- 评论组件 -->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >评论</span
              >
            </div>
          </template>
          <CommentComponent />
        </ElCard>
      </div>
    </div>
    <!-- 图片预览组件 -->
  <ElImageViewer
    v-if="previewVisible"
    :url-list="previewImages"
    @close="closePreview"
  />
  </Page>

  
</template>

<style scoped lang="scss">
.boxdev {
  display: flex;
  gap: 20px;
}
.boxdev :deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
  // background: transparent !important;
}
.boxdev :deep(.el-card__header) {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  padding-left: 0px !important;

  border-bottom: none !important;
}
.boxdev :deep(.el-card__body) {
  padding-top: 0px !important;
}
::v-deep .el-descriptions__body {
  background: #ffffff00 !important;
}
.boxdev > div:nth-child(1) {
  flex: 1;
  min-width: 0;
}
.boxdev > div:nth-child(2) {
  width: 28%;
}
.task-detail-container {
  width: 100%;
  height: 100%;
}

.task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-icon {
  img {
    filter: invert(1);
  }
}

.task-info {
  // border: 1px solid red;
  :deep(.el-descriptions__label) {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-secondary);
  }

  :deep(.el-descriptions__content) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-primary);
  }
  :deep(.el-descriptions__table) {
    background: transparent !important;
  }
}

.task-images {
  display: flex;
  gap: 12px;
  margin-top: 4px;

  .task-image {
    width: 60px;
    height: 60px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }
  }
}
</style>
