<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Icon } from '@iconify/vue'
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';

const themeStore = useThemeStore();
const { routerPushByKey } = useRouterPush();

const loading = ref<boolean>(false);
const btnLoading = ref<boolean>(false);
const useTime = ref<any>(null);
const useTimeModal = ref<boolean>(false);
const currentRow = ref<any>(null);
const list = ref<any[]>([]);
const lists = [
    {
        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
        approveTime: "2026-07-31", applicant: "吴强", level: "一般", type: "工艺",
        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "永久",
        useTime: "", planUse: "2026-08-01", pssr: "PSSR 检查确认表-签字版.pdf",
        hasChange: true,
    },
    {
        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
        approveTime: "2026-07-31", applicant: "吴强", level: "重要", type: "工艺",
        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "临时",
        useTime: "2026-07-16 06:30", planUse: "2026-08-01", pssr: "",
        hasChange: true,
    },
];

const timePickerProps = {
  format: 'HH:mm',      // 时间选择器面板上显示的格式
  seconds: false        // 隐藏秒选择器[reference:3][reference:4]
}

// 禁用今天之前的日期（今天可选）
const disabledDate = (ts: number) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0) // 今天的 00:00:00
  return ts < today.getTime() // 时间戳小于今天 0 点则禁用
}
// 获取列表数据
const getList = () => {
    loading.value = true;
    setTimeout(() => {
        list.value = lists;
        loading.value = false;
    }, 1000);
}

// 查看
const viewFile = (record: any) => {
    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
};
// 下载
const downloadFile = (record: any) => {
    window.$message?.success(`下载「${record.pssr}」`)
};
// 打开变更单
const openChange = (record: any) => {
    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
};
// 填写投用日期
const fillUseTime = (record: any) => {
    useTime.value = null;
    currentRow.value = record;
    useTimeModal.value = true;
};
// 保存投用日期
const saveUseTime = () => {
    if (!useTime.value) {
        return window.$message?.warning("请选择投用时间");
    }
    btnLoading.value = true;
    setTimeout(() => {
        btnLoading.value = false;
        useTimeModal.value = false;
    }, 1000);
}



onMounted(() => {
    getList();
})
</script>

<template>
<NSpace vertical :size="16">
    <!-- PSSR监督 -->
    <NSpin :show="loading" size="small">
        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
            <div class="flex flex-wrap items-center gap-2 mb-3">
                <span class="text-sm font-semibold text-slate-700">待投用变更（本车间 · 一车间）</span>
                <NTag size="small" type="primary">{{ list.length }} 起</NTag>
                <span class="ml-auto text-[11px] text-slate-400">按审批通过时间排序 · 投用时间由发起人在资料关闭页填报 · 支持属地负责人在此代录投用日期</span>
            </div>
            <div class="scroll">
                <div 
                    class="space-y-3 h-100%"
                    :style="{ 
                        '--theme-color': themeStore.themeColor,
                        '--warning-color': themeStore.otherColor.warning,
                    }"
                >
                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
                        <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
                        <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
                        <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
                        <NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</NTag>
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-1.5">
                                <p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
                                <NTag v-if="s.level==='一般'" size="small">{{s.level}}</NTag>
                                <NTag v-if="s.level==='重要'" size="small" type="error">{{s.level}}</NTag>
                                <NTag size="small" type="primary">{{s.type}}</NTag>
                                <NTag v-if="s.duration==='永久'" size="small">{{s.duration}}</NTag>
                                <NTag v-if="s.duration==='临时'" size="small" type="warning">{{s.duration}}</NTag>
                            </div>
                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.id }} · {{ s.applicant }}</p>
                            <p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approveTime ?? '—' }}</span></p>
                            <p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.useTime ? s.useTime : `待投用（计划 ${s.planUse}）` }}</span></p>
                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.statusDetail }}</p>
                        </div>
                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
                            <span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
                            <template v-if="s.pssr">
                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
                            </template>
                            <template v-else>
                                <span class="text-[11px] text-[var(--warning-color)]">待传</span>
                            </template>
                        </div>
                        <NButton v-if="!s.useTime" size="small" type="primary" class="text-xs" @click="fillUseTime(s)">填写投用日期</NButton>
                        <NButton v-if="s.hasChange" size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
                    </div>
                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
                        <NEmpty description="暂无数据"></NEmpty>
                    </div>
                </div>
            </div>
        </NCard>
        <!-- 填写投用日期弹窗 -->
        <NModal
              v-model:show="useTimeModal"
              preset="card"
              title="填写投用日期"
              :auto-focus="false"
              :style="{ width: '450px', height: 'auto' }"
              :segmented="{ content: true, footer: true }"
          >
              <template #default>
                <div class="space-y-3 text-sm">
                    <p class="text-xs text-slate-500">{{ currentRow?.id }} · {{ currentRow?.title }}</p>
                    <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-relaxed text-amber-700">
                        提示：投用前应完成变更培训与 PSSR 确认（资料已上传）。投用后变更进入待验收阶段，临时变更自投用日起计算时限。
                    </div>
                    <NDatePicker 
                        v-model:value="useTime" 
                        type="datetime" 
                        :is-date-disabled="disabledDate" 
                        format="yyyy-MM-dd HH:mm" 
                        placeholder="请选择投用时间"
                        :time-picker-props="timePickerProps"
                    />
                </div>
              </template>
              <template #footer>
                  <div class="flex justify-end gap-[10px]">
                      <NButton size="small" @click="useTimeModal = false">取消</NButton>
                      <NButton size="small" type="primary" :loading="btnLoading" @click="saveUseTime">确认投用</NButton>
                  </div>
              </template>
          </NModal>
    </NSpin>
</NSpace>
</template>

<style scoped lang="scss">
.scroll {
  height: calc(100vh - 180px);
  overflow-y: auto;
}
</style>
