<script setup>
import {timeFormat} from "@/utils/util";
import {getWorkList, getWorkTab, getMessageWorkList,upMessageWork} from '@/api/work/index'
import {useRoute} from "vue-router";
import useUserStore from "@/stores/modules/user";
import useCatchStore from "@/stores/modules/catch";

const catchSotre = useCatchStore();
const workLoading = ref(false)
const messageLoading =ref(false)
const tableData = ref([])
const messageTable = ref([])
const tabNumber = ref({})
const activeName = ref("first")
const router = useRouter()
const route = useRoute();
const messageActive = ref("0")
const messageData = ref()
const messageDialog = ref(false)
const userStore = useUserStore();
//初始化部门数据
const departsAll =  catchSotre.getDepartsAll();
const departs =  catchSotre.getDeparts();

//点击tab切换
const handleClick = (row) => {

  activeName.value = row.props.name;
  getWorkListFun();
}
const handleMessageClick = (row) => {
  messageActive.value = row.props.name
  getMessageWorkListFun()
}
//获取我的工作事项
const getWorkListFun = async () => {
  workLoading.value=true;
  tableData.value =await getWorkList(activeName.value);
  workLoading.value=false;
}
//回显我的消息内容
const getMessageWorkListFun = async () => {
  messageLoading.value=true
  messageTable.value = await getMessageWorkList(messageActive.value);
  messageLoading.value=false
}
//修改为已阅
const upMessageWorkFun = async (id)=>{
  const res = await upMessageWork(id)
}
//获取tab数字
const getWorkTabFun = async () => {
  tabNumber.value = await getWorkTab();
}
//我的待办点击
const rowWorkClick = (row) => {
  console.log('当前待办项目节点',row.flowCode)
  let isEnd = row.reportType === "结算项目";
  if(row.isWarning){

    //跳转值审计预警审核
    let query ={
      isEnd:row.reportType === "项目控制价",
      reportId:row.reportId,
      warningId:row.warningId,
      isAudit:true,
      backPath:'/work',
      warningCode:row.flowCode
    }
    router.push({
      path:`/warning/edit`,
      query: query
    });
  }
  else if(row.flowCode == 'initial'){
    console.log('row',row)
    router.push({
      path:`/report/edit/controlPrice`,
      query: {
        isEnd:isEnd,
        id:row.reportId,
        node:row.flowCod,
        backPath:"/work",
        isAudit: true
      }
    });
  }
  else if (activeName.value === 'first') {

    router.push({
      path:'/report/edit/controlPrice',
      query:{
        isEnd:isEnd,
        id:row.reportId,
        isAudit:true
      }
    })
  } else {
    router.push({
      path:'/report/edit/controlPrice',
      query:{
        isEnd:isEnd,
        id:row.reportId,
        node:row.flowCode
      }
    })
  }
}
//我的信息点击
const rowMessageClick = (row) => {
  messageDialog.value = true
  messageData.value = row
  upMessageWorkFun(messageData.value.id)
}

const closeMessage =()=>{
  messageDialog.value=false;
  getWorkListFun()
  getWorkTabFun()
  getMessageWorkListFun()
}
const loading = ref(false);

function  getData(){
  loading.value=true
  getWorkListFun()
  getWorkTabFun()
  getMessageWorkListFun()
  //获取所有的二级单位（预加载）
  catchSotre.getDepartNotPolice()

  loading.value=false
}

onMounted(()=>{
  getData()

})





watch(()=>route.query.load,(val)=>{
  if(val){
    getData()
  }
})
</script>

<template>
  <div class="container">
    <el-row :gutter="20" style="height:50%">
      <el-col :span="15">
        <div class="flex v-center" style="height:30px;margin-bottom: 10px">
          <h3>待办事项</h3>
        </div>
        <el-tabs v-model="activeName" class="tab_font" @tab-click="handleClick">
          <el-tab-pane name="first">
            <template #label>
              <el-badge :value="tabNumber.first" v-if="tabNumber.first && tabNumber.first > 0">
                <span class="tab-nav-title">我的待办</span>
              </el-badge>
              <span class="tab-nav-title" v-else>我的待办</span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="second">
            <template #label>
<!--              <el-badge :value="tabNumber.second" v-if="tabNumber.second && tabNumber.second > 0">-->
<!--                <span class="tab-nav-title">我的已办</span>-->
<!--              </el-badge>-->
              <span class="tab-nav-title">我的已办</span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-table v-loading="workLoading" :data="tableData" max-height="350" @row-click="rowWorkClick">
          <el-table-column width="70" type="index" label="序号" :index="(index)=> index+1"></el-table-column>
          <el-table-column width="130" label="审批类型">
            <template #default="{row}">
              <el-tag>{{row.isWarning?'审计预警审核':'项目报审'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="项目名称" prop="reportName"></el-table-column>
          <el-table-column label="操作" prop="work"></el-table-column>
          <el-table-column label="时间">
            <template #default="{row}">
              {{ row.time ? timeFormat(row.time) : '/' }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="9">
        <div class="flex v-center" style="height:30px;margin-bottom: 10px">
          <h3>我的消息</h3>
        </div>
        <el-tabs v-model="messageActive" class="tab_font" @tab-click="handleMessageClick">
          <el-tab-pane name="0">
            <template #label>
              <el-badge :value="tabNumber.unread" v-if="tabNumber.unread && tabNumber.unread > 0">
                <span class="tab-nav-title">未读</span>
              </el-badge>
              <span class="tab-nav-title" v-else>未读</span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="1">
            <template #label>
<!--              <el-badge :value="tabNumber.read" v-if="tabNumber.read && tabNumber.read > 0">-->
<!--                <span class="tab-nav-title">已读</span>-->
<!--              </el-badge>-->
              <span class="tab-nav-title" >已读</span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-table :data="messageTable" max-height="350" @row-click="rowMessageClick" v-loading="messageLoading">
          <el-table-column label="报审项目" prop="reportName" ></el-table-column>
          <el-table-column label="发送人" prop="crtUser" width="80"></el-table-column>
          <el-table-column label="环节" prop="node" show-overflow-tooltip></el-table-column>
          <el-table-column label="发送时间" prop="crtTime">
            <template #default="{row}">
              {{ row.crtTime ? timeFormat(row.crtTime) : '/' }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="height:50%">
      <el-col :span="15">
        <div class="flex v-center" style="height:30px;margin-bottom: 10px">
          <h3>单位整改情况</h3>
        </div>
        <el-table  max-height="350">
          <el-table-column label="审计单位"></el-table-column>
          <el-table-column label="项目总数"></el-table-column>
          <el-table-column label="问题数"></el-table-column>
          <el-table-column label="已整改数"></el-table-column>
          <el-table-column label="未整改数"></el-table-column>
          <el-table-column label="已整改率"></el-table-column>
          <el-table-column label="整改项目数"></el-table-column>
          <el-table-column label="未整改率"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="9">
        <div class="flex v-center" style="height:30px;margin-bottom: 10px">
          <h3>审计成果</h3>
        </div>
      </el-col>
    </el-row>

    <el-dialog v-model="messageDialog" title="消息" width="50vw" @close="closeMessage">
      <el-form label-width="100">
        <el-row>
          <el-col :span="12">
            <el-form-item label="报审项目:">{{ messageData.reportName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="环节:">{{ messageData.node }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发送人:">{{ messageData.crtUser }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发送时间:">{{ timeFormat(messageData.crtTime) }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作:">
              <el-tag type="success" v-if="messageData.node== '重新进窗'" >进窗</el-tag>
              <el-tag type="danger" v-else-if="messageData.node == '退窗'" >退窗</el-tag>
              <el-tag type="success" v-else-if="messageData.flowState === 'end'"> 通过</el-tag>
              <el-tag type="success" v-else-if="messageData.node == '审计预警项目反馈'">项目预警提交反馈</el-tag>
              <el-tag type="danger" v-else>驳回</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="信息">{{ messageData.message }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.tab_font > .el-tabs_item {
  font-size: 20px !important;
}
</style>
