<script setup>
import { ref,onMounted } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { showNotify } from 'vant'
import { detailsApi,approvalApi,taskCountApi } from '@/api/apply';

const route = useRoute()
const loading = ref(false);
const params = ref(null)
const info = ref(null)
const showReject = ref(false)
const rejectComment = ref('')
const taskCount = ref(0);
// 状态
const statusList = ref([
    {text:'草稿',value:0},
    {text:'申请中（安全员/技术员）',value:1},
    {text:'申请中（车间主任）',value:2},
    {text:'申请中（车间值班人员）',value:101},
    {text:'各部门会签中',value:3},
    {text:'审批中',value:4},
    {text:'通过',value:5},
    {text:'已关闭',value:97},
    {text:'已撤回',value:98},
    {text:'已驳回',value:99},
]);
// 匹配选项
const matchOptions = (arr,val) => {
    const target = arr.find(item => item.value == val);
    return target ? target.text : '';
}
// 路由跳转
const jumpTo = (val) => {
    // 跳转已审批列表
    if(val===0){
        router.push({
            path: '/applyList',
        })
    }
    // 跳转待审批列表
    if(val===1){
        router.push({
            path: '/waitList',
        })
    }
    // 跳转联锁详情页
    if(val===2){
        router.push({
            path: '/lockDetail',
            query: { id: params.value.id, type: params.value.type,isMyself: params.value.isMyself },
        })
    }
}
// 同意
const agree = async () => {
    loading.value = true;
    try {
        await approvalApi(params.value?.id,{
            action: 'approve',
            comment: '',
            risk_description: info.value?.risk_description,
            safety_measures: info.value?.safety_measures,
            cosign_item_id: info.value?.cosign_item_id,//审核人id
        });
        showNotify({ message: '同意成功', background: '#00b42a' });
        jumpTo(params.value?.type==='wait'?1:0);
    } finally {
        loading.value = false;
    }
}
// 驳回
const reject = async () => {
    rejectComment.value = '';
    showReject.value = true;
}
// 驳回确认
const rejectConfirm = (action) => new Promise(async (resolve) => {
    // 取消
    if(action==='cancel'){
        showReject.value = false;
        resolve(true);
    }
    // 确认
    if(action==='confirm'){
        if(rejectComment.value==''){
            showNotify({ message: '请输入驳回理由', background: '#ff7d00' });
            resolve(false);
            return;
        }
        try {
            await approvalApi(params.value?.id,{
                action: 'reject',
                comment: rejectComment.value,//驳回理由
                risk_description: info.value?.risk_description,
                safety_measures: info.value?.safety_measures,
                cosign_item_id: info.value?.cosign_item_id,//审核人id
            });
            showNotify({ message: '驳回成功', background: '#00b42a' });
            resolve(true);
            jumpTo(params.value?.type==='wait'?1:0);
        } catch (error) {
            resolve(false);
        }
    }
});
// 获取详情
const getDetail = async () => {
    loading.value = true;
    try {
        const res = await detailsApi(params.value?.id);
        info.value = res.data;
        if(res.data?.status>=1 && res.data?.status<=4){
            let allEmpty = res.data?.draft_apply_steps.every(item => item.draft_cosign_items.length === 0);
            if(res.data?.draft_apply_steps?.length && !allEmpty){
                info.value.steps = res.data?.draft_apply_steps;
            }else{
                info.value.steps = res.data?.apply_steps;
            }
        }else{
            info.value.steps = res.data?.apply_steps;
        }
        console.log(info.value);
    } finally {
        loading.value = false;
    }
}
// 获取待审批数量
const getTaskCount = async () => {
    try {
        const res = await taskCountApi();
        taskCount.value = res.data?.chain_remove?.count || 0;
    } catch (error) { 
        
    }
}

onMounted(() => { 
    getTaskCount();
    if(route.query){
        params.value = route.query;
        getDetail();
    }
})
</script>

<template>
<!-- 全屏加载遮罩层 -->
<div v-if="loading" class="global-loading-overlay">
    <van-loading size="30px" color="#1989fa" vertical></van-loading>
</div>
<div class="main">
    <div class="tab-box">
        <p class="tab" :class="{'active':params?.type==='finish'}" @click="jumpTo(0)">已审批</p>
        <p class="tab" :class="{'active':params?.type==='wait'}" @click="jumpTo(1)">待审批<span v-if="taskCount>0">{{taskCount}}</span></p>
    </div>
    <template v-if="info">
        <div class="detail">
            <div class="row">
                <div v-if="info.template_id==4">
                    <p v-if="info.status==1">申请中（车间值班人员）</p>
                    <p v-else>{{matchOptions(statusList,info.status)}}</p>
                </div>
                <div v-else>
                    <p v-if="info.status==5 || info.status==100">通过</p>
                    <p v-else>{{matchOptions(statusList,info.status)}}</p>
                </div>
                <p>申请摘除数量({{info.chain_count}})个</p>
            </div>
            <div class="row">
                <p>岗位：{{info.chain_position}}</p>
                <p>类型：{{info.template_name}}</p>
            </div>
            <div class="row">
                <p>摘除理由：{{info.reasons}}</p>
            </div>
            <div class="row">
                <p>计划摘除时间：{{info.plan_remove_time?.slice(0,16)}}</p>
            </div>
            <div class="row">
                <p>计划恢复时间：{{info.plan_recover_time?.slice(0,16)}}</p>
            </div>
            <div class="row col">
                <p class="blue-color">风险辨识</p>
                <p>{{info.risk_description}}</p>
            </div>
            <div class="row col">
                <p class="blue-color">安全措施</p>
                <p>{{info.safety_measures}}</p>
            </div>
            <div class="row col">
                <div class="timeline">
                    <div class="timeline-item" v-if="info.template_id==4">
                        <div class="left">
                            <p class="timeline-dot"></p>
                            <div class="txt">班长：</div>
                            <div class="txt">{{info?.apply_user?.realname}}</div>
                        </div>
                    </div>
                    <div class="timeline-item" v-if="info.template_id>=1 && info.template_id<=3">
                        <div class="left">
                            <p class="timeline-dot"></p>
                            <div class="txt">车间工程师：</div>
                            <div class="txt">{{info?.apply_user?.realname}}</div>
                        </div>
                    </div>
                    <template v-for="(item, index) in info?.steps || []" :key="index">
                        <template v-for="(sItem,sIndex) in (item.cosigns || item.cosign_items || item.draft_cosign_items)" :key="sIndex">
                            <div class="timeline-item">
                                <div class="left">
                                    <p class="timeline-dot"></p>
                                    <div class="txt">{{sItem.dept_name}}：</div>
                                    <div class="txt">{{sItem.user_name}}</div>
                                </div>
                                <div class="txt" v-if="sItem.signed_at">{{(sItem.signed_at)?.slice(0,16)}}</div>
                            </div>
                        </template>
                    </template>
                </div>
            </div>
            <div class="row" v-if="info?.status==99 && info?.reject">
                <p>驳回：{{info?.reject?.comment}}</p>
            </div>
        </div>
        <div class="btns">
            <p class="btn" @click="jumpTo(params?.type==='finish'?0:1)">返回列表</p>
            <p class="btn" @click="jumpTo(2)">联锁详情</p>
            <div class="op" v-if="
                params?.type==='wait' && info?.status!=99 && params?.isMyself==='pending' &&
                (info?.status==1 || info?.status==2 || info?.status==3 || info?.status==4) &&
                (((info?.template_id==1 || info?.template_id==4) && (info?.current_step>=1 && info?.current_step<=3)) || 
                ((info?.template_id==2 || info?.template_id)==3 && (info?.current_step>=1 && info?.current_step<=4))) ||
                info?.template_id==5
            ">
            <p class="btn" @click="agree">同意</p>
            <p class="btn" @click="reject">驳回</p>
            </div>
        </div>
    </template>
    <template v-else>
        <van-empty description="暂无数据" />
    </template>
</div>
<!-- 驳回弹框 -->
<van-dialog v-model:show="showReject" title="驳回" show-cancel-button :before-close="rejectConfirm" @cancel="rejectConfirm">
    <div style="padding: 10px 0;">
        <van-field v-model="rejectComment" label="驳回理由" type="textarea" rows="1" autosize required clearable placeholder="请输入驳回理由" />
    </div>
</van-dialog>
</template>

<style scoped>
.blue-color {
    color: #1989fa;
}
.main {
    height: 100vh;
    padding: 12px;
    overflow: hidden;
    font-size: 14px;
}
/* tab切换 */
.tab-box {
    display: flex;
    border: 1px solid #1989fa;
}
.tab {
    width: 50%;
    padding: 5px 0;
    text-align: center;
    font-size: 16px;
    color: #1989fa;
}
.tab.active {
    background-color: #1989fa;
    color: #fff;
}
/* 详情 */
.detail {
    margin-top: 12px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    border: 1px solid #f1f1f1;
    border-radius: 2px;
    padding: 10px;
}
.detail .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
}
.detail .col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.detail .row:first-child {
    margin-top: 0;
}
/* 底部按钮 */
.btns {
    margin-top: 12px;
    display: flex;
    gap: 12px;
}
.btns .btn {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    border: 1px solid #eee;
    border-radius: 2px;
}
.btns .op {
    width: 100%;
    display: flex;
    gap: 12px;
}
/* 时间线 */
.timeline {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.timeline:before {
    content: '';
    width: 1px;
    height: calc(100% - 6px);
    background: #1989fa;
    position: absolute;
    top: 3px;
    left: 6px;
}
.timeline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.timeline-item .left {
    display: flex;
    align-items: center;
}
/* 圆点 */
.timeline-dot {
    width: 12px;
    height: 12px;
    background: #1989fa;
    border-radius: 50%;
    margin-right: 10px;
}
</style>
