<template>
  <CardBox>
    <view class="flow-card-box" @click="lookFlow()">
      <view class="flow-title-box">
        <view class="card-title">{{ content.processName }}</view> 
      </view>
      <view class="card-hr"></view>
      <view class="card-content">
        <view class="icon">
          <text class="iconfont icon-jiedian"></text>
        </view>
        <text class="card-content-text">{{
          content.startUserName ? content.startUserName : content.originator
        }}</text>
      </view>
      <view class="card-content">
        <view class="icon">
          <text class="iconfont icon-likaishijian"></text>
        </view>
        <text class="card-content-text">{{
          content.startTime ? content.startTime : content.createTime
        }}</text>
      </view>
      <view class="card-content">
        <view class="icon">
          <text class="iconfont icon-a-1Frenyuanyonghu"></text>
        </view>
        <text class="card-content-text">{{
          content.taskName ? content.taskName : content.processName
        }}</text>
      </view> 
			<view v-if="type==WorkflowListType.TODO||type==WorkflowListType.FINISHED||type==WorkflowListType.MY">
				<view class="card-content">
					<view class="icon">
						<text class="iconfont icon-date"></text>
					</view>
					<text class="card-content-text">当前任务耗时：{{content.consumingTime}}</text>
				</view> 
				<view class="card-content">
					<view class="icon">
						<text class="iconfont icon-likaishijian"></text>
					</view>
					<text class="card-content-text">{{content.status}}</text>
				</view> 
				<view class="card-content" v-if="content.summaryInfo">
					<view class="icon">
						<text class="iconfont icon-likaishijian"></text>
					</view>
					<text class="card-content-text">{{content.summaryInfo}}</text>
				</view> 
			</view> 
			<view class="btn-list">
			  <view class="btn" v-if="type==WorkflowListType.FINISHED||type==WorkflowListType.MY" @click.stop="withdraw(processId)"><text>撤回</text></view>
			  <view class="btn" v-if="type==WorkflowListType.MY" @click.stop="restart(processId)"><text>重新发起</text></view> 
			  <view class="btn" v-if="hasApproval" @click.stop="approvalFlow()"><text>待审批</text></view>
			  <view v-else-if="type==WorkflowListType.FINISHED||type==WorkflowListType.MY" class="btn" @click.stop="urgingFlow()"><text>催办</text></view>
			  <view v-else class="btn" @click="lookFlow()"><text>查看</text></view>
			  <view class="btn" style="background:#fde9ef"  v-if="type==WorkflowListType.MY" @click.stop="handleDelete(props.content.processId)">
				  <text style="color:red">作废</text>
			  </view>
			</view> 
    </view>
    <uni-popup ref="withdrawDialogRef" type="dialog">
      <uni-popup-dialog type="info" mode="base" cancelText="关闭" confirmText="确定" title="请选择撤回到的节点" @confirm="handleWithdrawSubmit">
        <view class="approval-node-box">
           <view class="node-item " :class="rejectIndex==index?'active':''" 
           v-for="(item,index) in rejectList" :key="index"
           @click="changeRejectIndex(index)"
           >{{ item.activityName }}</view>
        </view>	
      </uni-popup-dialog>
    </uni-popup> 
    <uni-popup ref="dialogRef" type="dialog">
      <uni-popup-dialog type="info" mode="base" cancelText="关闭" confirmText="确定" title="请选择催办方式" @confirm="handleSubmit">
        <view class="approval-box">
           <uni-data-checkbox multiple  v-model="checkedList" :localdata="options" @change="handleChange"></uni-data-checkbox>
        </view>	
      </uni-popup-dialog>
    </uni-popup> 
  </CardBox>
</template>

<script setup>
import { ref  } from "vue";
import CardBox from "@/components/card/CardBox.vue";
import { WorkflowListType } from "@/common/enums/workflow.ts";
import {processUrge,getRejectNode,postWithdrawNode,postMoveRecycle} from "@/common/api/workflow/index.js"
const props = defineProps({
  content: {
    type: Object,
    default: () => {
      return {
        processName: "",
        startUserName: "",
        startTime: "",
      };
    },
  },
  hasApproval: false,
  type:{
    type:String,
    default:WorkflowListType.TODO
  }
});
const emit = defineEmits(['refrash']);
const dialogRef = ref();
const withdrawDialogRef = ref();
const rejectList = ref([]);
const rejectIndex = ref(0);
const checkedList=ref([0])
const options = [
	{
		text: '系统消息',
		value: 0,
	},
	{
		text: '短信',
		value: 1,
	},
];
function lookFlow() {
	if(props.hasApproval){//如果是待办，点击数据默认进去审批界面
		approvalFlow();
		return;
	}
  uni.redirectTo({
    url: "/pages/workflow/look?processId="+props.content.processId+"&type="+props.type
  });
}
function approvalFlow() {
  uni.redirectTo({
    url: "/pages/workflow/approval?taskId="+props.content.taskId+"&processId="+props.content.processId+"&type="+props.type
  });
}
function urgingFlow(){ 
	let description = '';
	if (props.content.status === '审批结束') { 
		description = '当前流程已经审批结束，无法进行催办。';
	} else if (props.content.status.indexOf('已催办') !== -1) { 
		description = '当前流程已催办，请耐心等待。';
	} else {
		dialogRef.value.open('center');
		return;
	}
	uni.showToast({
		icon:'none', 
		title:description,
	});
}
async function withdraw(){
  if (props.content.processId) {
      try {
        let res = await getRejectNode(props.content.processId, props.content.taskId);
        if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
          rejectList.value = res.data;
          withdrawDialogRef.value.open('center');
        }
      } catch (error) {
        close();
      }
    }
}
function changeRejectIndex(index){
  rejectIndex.value = index;
}
function restart(){
  // 重新发起
  uni.navigateTo({
      url: "/pages/workflow/launch?taskId="+props.content.taskId+"&processId="+props.content.processId+"&isWithdraw=0",
  });
}
async function handleDelete(processId){
	if (!processId) {
		uni.showToast({
			title: 'processId不能为空',
			icon: 'error',
			mask: true,
		});
		return;
	}
	   uni.showModal({
		  title: '提示',
		  content: '确认要移入回收站吗？',
		  success: function (res) {
			if (res.confirm) {
			  // 用户点击确定，执行删除操作
			  handlemoveRecycle(processId);
			  // 在这里执行删除操作
			} else if (res.cancel) {
			  // 用户点击取消
			}
		  }
		});

}
async function handlemoveRecycle(processId){
	 try {
		let res = await postMoveRecycle(processId);
		if (res&&res.data) {
		  uni.showToast({
			title: '移入回收站成功',
			icon: 'none',
			mask: true,
		  });
		  setTimeout(() => {
		  	emit('refrash')
		  }, 1000);
		  
		} else {
		  uni.showToast({
			title: '移入回收站失败.'+(res.msg||''),
			icon: 'error',
			mask: true,
		  });
		}
	} catch (error) {}
}
async function handleWithdrawSubmit(){
  if (rejectList.value.length > 0) {
      if (rejectList.value[rejectIndex.value].activityId=='Event_start_node') {
        uni.showToast({
          title: '重新发起流程',
          icon: 'none',
          mask: true,
        });
        uni.navigateTo({
          url: "/pages/workflow/launch?taskId="+props.content.taskId+"&processId="+props.content.processId+"&isWithdraw=1",
      });
        return false;
      } else {
        try {
          let res = await postWithdrawNode(props.content.processId, rejectList.value[rejectIndex.value].activityId);
          if (res&&res.data) {
            uni.showToast({
              title: '撤回节点成功',
              icon: 'none',
              mask: true,
            });
          } else {
            uni.showToast({
              title: '撤回节点失败',
              icon: 'none',
              mask: true,
            });
          }
        } catch (error) {
          uni.showToast({
              title: '撤回节点失败',
              icon: 'none',
              mask: true,
            });
        }
      }
    } else {
      uni.showToast({
        title: '请选择一个节点进行撤回',
        icon: 'none',
        mask: true,
      });
    }

}
async function handleSubmit (){ 
	if (!checkedList.value) {
		uni.showToast({
			icon:'error', 
			title:'请选择催办方式',
		});
		return;
	}
	const params = {
		urgeType: checkedList.value.join(','),
		processId: props.content.processId,
		taskId: props.content.taskId,
	};
	await processUrge(params);
	dialogRef.value.close();
	checkedList.value = [0];
	uni.showToast({
		icon:'success', 
		title:'已成功催办',
	}); 
	emit('refrash')
};
function handleChange(e){ 
	checkedList.value=e.detail.value
}
</script>

<style lang="scss">
.flow-card-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28rpx;
	
	.btn-list{
	  border-top:1px solid #eeeeee;
	  display: flex;
		padding-top: 14px;
		margin-top: 14px;
		justify-content: flex-end;
	  .btn {
	    width: 50px;
	    height: 21px;
	    background: #e9eefd;
	    border-radius: 10px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-left: 5px;
	    text {
	      font-size: 10px;
	      font-weight: 500;
	      color: #5e95ff;
	      line-height: 12px;
	    }
	  }
	}
}
.flow-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 14px;
  .card-title {
    font-size: 31rpx;
    font-weight: bold;
    color: #253954; 
  }
}
.card-hr {
  width: 100%;
  height: 1rpx;
  background: #eeeeee;
  border-radius: 0rpx;
  opacity: 1;
  margin-bottom: 28rpx;
}
.card-content {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10rpx 0;
  .icon {
    width: 35rpx;
    height: 35rpx;
    background: #d9dfea;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .iconfont {
    font-size: 18rpx;
    color: #fff;
  }
  .card-content-text {
    font-size: 27rpx;
    font-weight: 500;
    color: #253954;
    line-height: 32rpx;
    margin-left: 10rpx;
		flex:1;
  }
}
.approval-node-box{
  max-height: 800rpx;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  .node-item{
    flex-basis: 80%;
    margin: 10rpx 0;
    padding: 10rpx;
    height: 84rpx;
    border: 1rpx solid #c6e2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
  }
  .active{
    color: #9ecbfb;
    border: 1px solid #c6e2ff;
    background: #ecf5ff;
  }
}
</style>
