<template>
    <AppLayout :title="title" :show-bg-image="false" >
        <view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>帮扶任务详情</text>
					<view class="title-line"></view>
				</view>
			</view>
            <view class="form-container">
				<view class="form-item">
					<view class="item-label">
						任务名称：
					</view>
					<view class="item-value">
						{{formData.taskName}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						任务类型：
					</view>
					<view class="item-value">
						{{formData.taskType}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						优先级：
					</view>
					<view class="item-value">
						{{formData.priority}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						目标人数：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.goalPersonCount}}人
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						分配区域：
					</view>
					<view class="item-value" v-if="isAssignment" >
						{{formData.taskAllocation.allocationByDeptName}}
					</view>
					<view class="item-value" v-else >
						{{formData.taskAllocation.executeDeptName}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						创建时间：
					</view>
					<view class="item-value">
						{{formData.createTime}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						截止时间：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.deadline}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						分配状态：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.allocationStatus}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						分配说明：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.allocationNote?formData.taskAllocation.allocationNote:'暂无'}}
					</view>
				</view>
			</view>
        </view>
		<view class="main-list" :style="getBackgroundStyle('k.png')" v-if="isAssignment">
			<view class="list-top">
				<view class="list-title">
					<text>分配列表</text>
					<view class="title-line" style="left: 70rpx;"></view>
				</view>
				<view class="title-total">
					共<text class="total-num">{{allocationList.length}}</text>条记录
				</view>
			</view>
			<view class="list-box" v-if="allocationList.length>0">
				<view class="con-box" v-for="(item,index) in allocationList" :key="index">
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
							<view class="item-label1">
								目标人数：
							</view>
						</view>
						<view class="item-right">
							{{item.goalPersonCount}}
						</view>
					</view>
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
							<view class="item-label1">
								分配人：
							</view>
						</view>
						<view class="item-right">
							{{item.allocationByName}}
						</view>
					</view>
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
							<view class="item-label1">
								分配区域：
							</view>
						</view>
						<view class="item-right">
							{{item.allocationByDeptName}}
						</view>
					</view>
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
							<view class="item-label1">
								分配时间：
							</view>
						</view>
						<view class="item-right">
							{{item.allocationTime}}
						</view>
					</view>
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
							<view class="item-label1">
								执行区域：
							</view>
						</view>
						<view class="item-right">
							{{item.createByDeptName}}
						</view>
					</view>
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/date.png'" mode=""></image>
							<view class="item-label1">
								执行状态：
							</view>
						</view>
						<view class="item-right">
							{{item.allocationStatus}}
						</view>
					</view>
					<view class="form-item mb-30" >
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
							<view class="item-label1">
								截止时间：
							</view>
						</view>
						<view class="item-right">
							{{item.deadline}}
						</view>
					</view>
				</view>
			</view>
		    <empty v-else pdTop="200"></empty>
		</view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive,onMounted  } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

const title = ref('');
const formData = reactive({
	taskName: '',
	taskType: '',
	priority: '',
	createTime:'',
	allocationStatus:'',
	taskAllocation: {
	  goalPersonCount: null,
	  executeDeptId: '',
	  executeDeptName: '',
	  executeDeptAncestors: '',
	  allocationStatus: '1',
	  allocationNote: '',
	  deadline: null,
	  goalPersonList: []
	}
})
const isAssignment=ref(true)
const taskTypeOptions=ref([])
const priorityOptions=ref([])
const allocationStatusOptions=ref([])
const executeDeptOptions=ref([])
// 表单引用
const formRef = ref(null)
const allocationList=ref([])
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});

// 事件处理
function onDateChange(){}
function taskTypeChange(){}
function priorityChange(){}
function executeDeptChange(){}

function listNotParam(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={}
	$api.myRequest('/dispatch/dept/listNotParam',params,'get',9100,header).then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.deptId,
				    text: item.deptName,
					ancestors:item.ancestors
				}
				executeDeptOptions.value.push(obj)
			})
		}
	});
}
function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/assist_task_type').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				taskTypeOptions.value.push(obj)
			})
		}
	});
	$api.myRequest('/system/public/dict/data/type/assist_task_priority').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				priorityOptions.value.push(obj)
			})
		}
	});
	$api.myRequest('/system/public/dict/data/type/assist_task_allocation_status').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				allocationStatusOptions.value.push(obj)
			})
		}
	});
}
function getDetail(id){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		id:id
	}
	$api.myRequest('/dispatch/assist/task/getTask',params,'get',9100,header).then((resData) => {
		resData.data.taskType=getabelByValue(resData.data.taskType,taskTypeOptions.value)
		resData.data.priority=getabelByValue(resData.data.priority,priorityOptions.value)
		let allocationStatus=resData.data.taskAllocation.allocationStatus
		resData.data.allocationStatus=getabelByValue(allocationStatus,allocationStatusOptions.value)
		Object.assign(formData, resData.data)
		getAllocationList()
	});
}
function getAllocationList(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		parentId:formData.taskAllocation.id
	}
	$api.myRequest('/dispatch/assist/task/allocation/getAllocationList',params,'get',9100,header).then((resData) => {
		console.log("resData",resData)
		resData.data.forEach(item=>{
			item.allocationStatus=getabelByValue(item.allocationStatus,allocationStatusOptions.value)
		})
		allocationList.value=resData.data
	});
}
function getabelByValue(value,arr) {
	if (!Array.isArray(arr)) {
	    return ''
	}
	const item = arr.find(item => item.value === String(value))
	return item ? item.text : '暂无'
}
onLoad((options) => {
	if(options.url&&options.url=='taskAssignment'){
		isAssignment.value=false
	}
	listNotParam()
	runAsyncTasks(options)
});
const runAsyncTasks = async (options) => {
  await getDictionary()
  let dataInfo=JSON.parse(options.item)
  console.log("dataInfo",dataInfo)
  Object.assign(formData, dataInfo)
  if(isAssignment.value){
	  getAllocationList()
  }
}


</script>

<style lang="stylus" scoped>
image
  height: 100%
  width: 100%
.main-list
  background-color: #ffffff
  padding: 20rpx 20rpx 28rpx 20rpx
  margin: 30rpx 30rpx
  box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
  border-radius: 12px
.list-top
  display: flex
  align-items: center
  justify-content: space-between
.list-title
  font-weight: bold
  font-size: 36rpx
  color: #404040
  position: relative

.title-line
  position: absolute
  bottom: -10rpx
  left: 70rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx
.input,
.picker
  flex: 1

.picker-value
  color: #666
  
.form-container
  margin-top: 30rpx
.con-box
  background: #fff
  padding: 20rpx
  box-shadow: 0px 0px 6rpx 0px rgba(0,71,200,0.16)
  border-radius: 24rpx
  border: 1rpx solid #EDF5FF
  margin-top: 30rpx
.form-item
  display: flex
  align-items: center
  margin-bottom: 20rpx
.mb-30
  margin-bottom: 30rpx
.item-left
  display: flex
  align-items: center
.item-img
  width: 26rpx
  height: 26rpx
  margin-right: 10rpx
.item-label1
  font-size: 26rpx
  color: #B3B3B3
  width: 130rpx
.item-label
  width:200rpx
  text-align: left
  font-size: 30rpx
  color: #606266
  height: 72rpx
  padding: 0 24rpx 0 0
  vertical-align: middle
  flex-shrink: 0
  box-sizing: border-box
.item-value
  color: #333
  font-size: 30rpx
  height: 72rpx
  padding: 0 24rpx 0 0
  vertical-align: middle
  flex-shrink: 0
  box-sizing: border-box
:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 20rpx 20rpx;
}

.btn {
  width: 45%;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
}

.reset-btn {
  background-color: #D8E9FF;
  color: #1176FF;
}

.submit-btn {
  background-color: #368BFF;
  color: white;
}
.choice-btn{
	width: 100%;
	height: 70rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	background-color: #368BFF;
	color: white;
	margin-left: 0;
}
:deep(.uni-easyinput__content)
  background: rgba(0,0,0,0) !important
</style>
