<template>
	<view v-if="ticket_">
		<uni-forms-item label="审批状态">
			<uni-tag :text="actStateEnum[ticket_?.act_state]?.text" :circle="true" size="small"
				:type="actStateEnum[ticket_?.act_state]?.type" :inverted="true" style="font-weight: 460;"></uni-tag>
			<span style="margin-left: 12rpx" @click="handleDetail">{{ticket_?.state_.name}}</span>
			<span style="margin-left: 12rpx;color:blue" @click="handleDetail">更多</span>
		</uni-forms-item>
		<uni-forms-item label="操作" v-if="ticket_?.state_.enable_retreat && isOwn">
			<button  type="warn" size="mini" @click="handleRetreat" style="margin-left:0px">撤回</button>
		</uni-forms-item>
		<uni-forms-item label="可处理人" v-if="ticket_.participant_">
			<span v-if="
										ticket_.participant_type == 2 ||
										ticket_.participant_type == 1
									">
				<span v-for="item in ticket_.participant_" :key="item.id">{{ item.name }}/</span>
			</span>
			<span v-else> 无 </span>
		</uni-forms-item>
		<uni-popup ref="popup" background-color="#fff">
			<scroll-view scroll-y="true" style="height: 600rpx;padding: 20rpx">
				<uni-forms-item label="审批状态">
					<uni-tag :text="actStateEnum[ticket_f?.act_state]?.text" :circle="true" size="small"
						:type="actStateEnum[ticket_f?.act_state]?.type" :inverted="true" style="font-weight: 460;"></uni-tag>
					<span style="margin-left: 12rpx">{{ticket_f?.state_.name}}</span>
					<button v-if="ticket_f?.state_.enable_retreat && isOwn" type="warn" size="mini" plain="true"
					                        @click="handleRetreat">撤回</button>
				</uni-forms-item>
				<uni-forms-item label="可处理人" v-if="ticket_f.participant_">
					<span v-if="
												ticket_f.participant_type == 2 ||
												ticket_f.participant_type == 1
											">
						<span v-for="item in ticket_f.participant_" :key="item.id">{{ item.name }}/</span>
					</span>
					<span v-else> 无 </span>
				</uni-forms-item>
				<div style="font-size: 28rpx;">
					<div v-for="item in flowsteps" :key="item.id" style="margin-bottom: 16rpx;border-top: 1px solid #000;">
						<div>
							<strong>{{ item.state_?.name || "未知状态" }}</strong>
						</div>
						<div>
							<span style="font-size: 22rpx">{{item.create_time}}-</span>
							<span v-if="item.intervene_type != 0"><uni-tag
									:type="interveneTypeEnum[item.intervene_type]?.type" :inverted="true" :circle="true"
									:text="interveneTypeEnum[item.intervene_type]?.text" style="font-weight: 460;">
								</uni-tag></span>
							<span v-if="item.transition_"
								:style="{ color: item.transition_.attribute_type === 1 ? '#67C23A' : '#F56C6C' }">
								{{ item.transition_.name }}
							</span>
							<span v-if="item.participant_">-{{ item.participant_.name }}</span>
						</div>
						<div v-if="item.suggestion">
							<span v-if="item.suggestion.length > 20">{{ item.suggestion.slice(0, 20) + "..." }}</span>
							<span v-else>
								{{ item.suggestion }}
							</span>
						</div>
					</div>
				</div>
			</scroll-view>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		defineEmits,
		watch
	} from 'vue'
	import API from '@/utils/api';
	import {
		actStateEnum, interveneTypeEnum
	} from "@/utils/enum.js"

	const props = defineProps({
		ticket_: {
			type: Object,
			default: null,
			required: false
		}
	})
	
	const ticket_f = ref({});
	const isOwn = ref(false);
	watch(
	  () => props.ticket_,
	  async (newVal) => {
	    if (newVal && Object.keys(newVal).length > 0) {
	      if(props.ticket_.create_by === uni.getStorageSync("userInfo").id){
	      	isOwn.value = true;
	      }
	    }
	  },
	  { immediate: false }
	)
	onMounted(() => {
		
	})
	
	const popup = ref(null);
	const flowsteps = ref([]);
	const handleDetail = async () => {
		ticket_f.value = await API.getTicketItem(props.ticket_.id)
		popup.value.open("top");
		API.getTicketFlowLogs(props.ticket_.id).then(res=>{
			flowsteps.value = res
		})
	}
	const handleRetreat = () => {
		uni.showModal({
			title: "撤回原因",
			editable: true,
			success(res) {
				if(res.confirm){
					API.ticketRetreat(props.ticket_.id, {"suggestion": res.content}).then(res=>{
						uni.navigateBack()
					})
				}
			}	
		})
	}
</script>