<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const {
  proxy
} = getCurrentInstance()

/* 返回上一级页面 */
const router = useRouter()
const onClickLeft = () => {
  router.back()
}

/* 查询请求 */
const pendingMatters = ref([])
const queryFetch = async () => {
  const url = '/sgsafe/ToDoList/querySafePendingMasters'
  const param = {
    userId: localStorage.getItem('userId')
  }
  const res = await proxy.$axios.get(url,param);
  if (res.data.code === 0) {
    pendingMatters.value = res.data.data
    // console.log(pendingMatters.value);
  } else {
    console.log('操作失败!' + res.data.msg)
  }
}

const jumpTargetPage = (item) => {
  if (item.status === '1') {
    return
  }
  // 隐患
  if (item.workflowQuery) {
    sessionStorage.setItem('workflowQuery',JSON.stringify(item.workflowQuery))
    router.push(item.routing)
  // 履职
  } else if (item.routing.includes('?')) {
    router.push(item.routing)
  } else {
  // 证件 + 应急物资
    router.push({ path: item.routing,query: { id: item.id } })
  }
}

onMounted(() => {
  queryFetch()
})

</script>

<template>

  <div class="page-container">
    <van-sticky>
      <van-nav-bar
        title="待办中心" />
    </van-sticky>

    <div class="notice-card" v-for="(item,idx) in pendingMatters" :key="idx" @click="jumpTargetPage(item)">
      <div class="notice-main">
          <span class="notice-tag notice-tag-blue">{{ item.status === '0' ? '待办' : '已办' }}</span>
          <span class="notice-dot" :class="item.status === '0' ? 'notice-dot-red' : 'notice-dot-yellow'"></span>
          <span class="notice-text bold-title">{{ item.title }}</span>
          <span class="notice-date">{{ item.time }}</span>
      </div>
      <div class="divider"></div>
      <div class="notice-bottom">
        <span >查看详情</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <div>
      <van-empty v-if="!pendingMatters" description="暂无待办" />
    </div>
  </div>

</template>

<style scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 可选：隐藏滚动条（视觉优化） */
.scroll-container::-webkit-scrollbar {
  display: none;
}


.notice-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(32, 123, 230, 0.06);
  margin: 15px auto 0 auto;
  width: 90%;
  padding: 10px 10px 10px 10px;
}

.notice-main {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 6px;
  height: 80px;
}

.divider {
  height: 1px;
  background-color: #dfe4ea;
  /*background: linear-gradient(to right, transparent, #dfe4ea, transparent);*/
  margin: 0 0;
}

.notice-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  margin-bottom: 6px;
  margin-top: 5px;
}

.notice-tag {
  font-size: 16px;
  font-weight: 600;
  padding: 2px 12px;
  border-radius: 8px;
  margin-right: 8px;
}

.notice-tag-blue {
  background: #207be6;
  color: #fff;
}

.notice-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.notice-dot-yellow {
  background: #ffd600;
}

.notice-dot-red {
  background: #ff5b5b;
}

.notice-dot-gray {
  background: #bfbfbf;
}

.notice-text {
  color: #333;
  flex: 1;
}

.notice-date {
  float: right;
  text-align: right;
  color: #888;
  font-size: 16px;
  margin-left: 10px;
}

.bold-title {
  font-weight: bold;
  color: #333;
}
</style>
