<!--
@ 作者: 秦东
@ 时间: 2024-04-12 13:06:44
@ 备注: 页面设置
-->
<script lang='ts' setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { tipMstClass,tipMstTypeClass,repetitionPeriodClass,weekForDay,runWeekInfo } from '@/api/DesignForm/tableButton'
import { tipMsgInfo } from '@/api/taskapi/types'
import { gainFlowLookSee,editLookPowerView,setUpMsg,gainSetUpMsg } from '@/api/taskapi/management'
import employeesDialog from '@/components/workflow/dialog/employeesDialog.vue'

import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({
	formKey:{
		type:String,
		default:""
	},
	formVersion:{
		type:String,
		default:""
	},
	tabsActive:{
		type:Number,
		default:1
	},
	state:{
		type:Object,
		default(){
			return {}
		}
	}
});

const emits = defineEmits<{
    (e: 'update:state', val: formStruct): void
	(e: 'update:formKey', val: string): void
	(e: 'update:formVersion', val: string): void
	(e: 'judgeFlowIsEdit', val: boolean): void
	(e: 'runNextWindows', val: number): void
	(e: 'closeFormPage'): void
}>()

const ruleFormRef = ref<FormInstance>()
const isShow = ref(false)
let checkedList = ref<any[]>([])
const powLookList = ref([])
const activePageIndex = ref<number>(1)
const handselect = (key: string, keyPath: string[]) => {
	// console.log("handselect---->",key, keyPath)
	activePageIndex.value = key
	switch(key){
		case "2":
			gainSetUpMsgInfo();
			break;
		default:
			getLookView();
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-04-13 09:35:00
@ 功能: 关闭页面
*/
const closePage = () => {
	emits("closeFormPage")
}
/**
@ 作者: 秦东
@ 时间: 2024-04-13 16:13:00
@ 功能: 获取可见范围
*/
const getLookView = () => {
	gainFlowLookSee({id:props.formVersion})
		.then(({data})=>{
			// console.log("获取可见范围",data)
			powLookList.value = data
		})
}
onMounted(()=>{
	getLookView()
})
/**
@ 作者: 秦东
@ 时间: 2024-04-15 11:09:01
@ 功能: 刷新可见范围
*/
const surePromoter = (data:any) => {
	// console.log("刷新可见范围",data)
    powLookList.value = data;
    isShow.value = false;
	editLookPowerView({id:props.formVersion,listData:data})
		.then(({data})=>{
			// console.log("刷新可见范围--->",data)
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-04-15 11:15:03
@ 功能: iconIsShow
*/
const iconIsShow = (data:any) => {
	if(data.type == 3){
		return 3
	}else if(data.type == 2){
		return 2
	}
	return 1
}

/**
@ 作者: 秦东
@ 时间: 2024-04-15 15:38:51
@ 功能: 提醒页面功能
*/
/** =================================================================================================================== */
const ruleFormRefTip = ref(ElForm);
const tipForm = reactive<tipMsgInfo>({
	types:1,	//1：流程提醒；2：表单提醒
	tipClass:2 //1:只提醒一次；2：周期性提醒
})
const zhouqiVal = reactive<runWeekInfo>({
	week:0,
	day:0,
	hour:0,
	minute:0
})
/**
@ 作者: 秦东
@ 时间: 2024-04-15 16:21:29
@ 功能: 时间周全
*/
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: '一周后',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
]
/**
@ 作者: 秦东
@ 时间: 2024-04-18 08:41:45
@ 功能: 获取消息设置
*/
const gainSetUpMsgInfo = () => {
	
	gainSetUpMsg({id:props.formKey.toString()})
		.then((data) => {
			// console.log("获取消息设置-====-->",data.data.ruleCont)
			if(data.code == 0){
				let ruleCont = data.data.ruleCont
				tipForm.types = ruleCont.tipForm.types
				tipForm.tipClass = ruleCont.tipForm.tipClass
				tipForm.specifyTime = ruleCont.tipForm.specifyTime?ruleCont.tipForm.specifyTime:""
				tipForm.repetitionPeriod= ruleCont.tipForm.repetitionPeriod?ruleCont.tipForm.repetitionPeriod:""
				tipForm.tipMsg= ruleCont.tipForm.tipMsg
				zhouqiVal.week = ruleCont.attribute.week;
				zhouqiVal.day =  ruleCont.attribute.day;
				zhouqiVal.hour =  ruleCont.attribute.hour;
				zhouqiVal.minute =  ruleCont.attribute.minute;
			}
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-04-18 08:55:59
@ 功能: 重置消息提醒表单
*/
const resetForm = (formEl: FormInstance | undefined) => {
	tipForm.types = 1
	tipForm.tipClass = 2
	// tipForm.specifyTime =1
	// tipForm.repetitionPeriod=1
	tipForm.tipMsg=""
	zhouqiVal.week = 0;
	zhouqiVal.day = 0;
	zhouqiVal.hour = 0;
	zhouqiVal.minute = 0;
 	if (!formEl) return
  	formEl.resetFields()
}
/**
@ 作者: 秦东
@ 时间: 2024-04-18 09:15:55
@ 功能: 提交消息提醒设置
*/
const submitForm = () =>{
	let sendInfo = {
		id:props.formKey.toString(),
		setCont:JSON.stringify({
			tipForm:tipForm,
			attribute:zhouqiVal
		})
	}
	setUpMsg(sendInfo)
		.then((data)=>{
			// console.log("获取消息设置-====-->",data)
			if(data.code == 0){
				ElMessage({
					message: data.msg,
					type: 'success',
				})
			}else{
				ElMessage.error(data.msg)
			}
		})
}
</script>
<template>
	<div class="common-layout">
		<el-container>
			<el-aside class="asideBox">
				<el-card class="setUpPageMenue" shadow="always">
					<el-scrollbar class=" boxScroll">
						<el-menu
							default-active="1"
							active-text-color="#409EFF"
        					background-color="#FFFFFF"
							class="el-menu-vertical-demo"
							@select="handselect"
						>
							<el-menu-item index="1">
								<i class="fa fa-crosshairs"></i>
								<span>可见范围</span>
							</el-menu-item>
							<el-menu-item index="2">
								<i class="fa fa-commenting-o"></i>
								<span>消息提醒</span>
							</el-menu-item>
						</el-menu>
					</el-scrollbar>
				</el-card>
			</el-aside>
			<el-main>
				<el-card v-if="activePageIndex==1" class="setUpPageMenue" shadow="always">
					<template #header>
						<div class="card-header">
							<span>可见范围</span>
							<i class="fa fa-close" @click="closePage"></i>
						</div>
					</template>
					<el-scrollbar class="boxScroll_main">
						<el-row>
							<el-col :span="24">
								<el-space wrap size="default">
									<el-tag v-for="item in powLookList" :key="item.targetId" type="plain" effect="plain">
										<i v-if="iconIsShow(item)==3" class="fa fa-home"></i> 
										<i v-else-if="iconIsShow(item)==2" class="fa fa-group                            "></i>
										<i v-else class="fa fa-user"></i> {{item.name}}
									</el-tag>
								</el-space>
							</el-col>
							<el-col :span="24">
								<el-button type="primary" :icon="Edit" class="box_top" @click="isShow=true">编辑可见范围</el-button>
							</el-col>
						</el-row>
					</el-scrollbar>
				</el-card>
				<el-card v-if="activePageIndex==2" class="setUpPageMenue" shadow="always">
					<template #header>
						<div class="card-header">
							<span>消息提醒</span>
							<i class="fa fa-close" @click="closePage"></i>
						</div>
					</template>
					<el-scrollbar class="boxScroll_main">
						<el-form
							ref="ruleFormRef"
							:model="tipForm"
							:rules="rules"
							label-width="auto"
							class="demo-ruleForm"
							status-icon
						>
							<el-form-item label="提醒类型" prop="name">
								<el-select
									v-model="tipForm.types"
									clearable
									placeholder="提醒类型"
									style="width: 240px"
								>
									<el-option
									v-for="item in tipMstClass"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</el-form-item>
							<el-form-item label="提醒周期类型" prop="name">
								<el-select
									v-model="tipForm.tipClass"
									clearable
									placeholder="提醒周期类型"
									style="width: 240px"
								>
									<el-option
									v-for="item in tipMstTypeClass"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</el-form-item>
							<el-form-item v-if="tipForm.tipClass==1" label="指定提醒时间" prop="name">
								<el-date-picker
									v-model="tipForm.specifyTime"
									type="datetime"
									placeholder="请选择时间"
									:shortcuts="shortcuts"
									value-format="x"
								/>
							</el-form-item>
							<el-form-item v-else label="提醒周期" prop="name">
								<el-row>
									<el-col :span="24" class="zhouqiBox">
										<el-select
											v-model="tipForm.repetitionPeriod"
											clearable
											placeholder="提醒周期"
											style="width: 100px"
										>
											<el-option
											v-for="item in repetitionPeriodClass"
											:key="item.value"
											:label="item.label"
											:value="item.value"
											/>
										</el-select>
										<el-row>
											<el-col v-if="tipForm.repetitionPeriod==1||tipForm.repetitionPeriod==4" :span="24" class="zhouqiBox">
												<el-input
													v-model="zhouqiVal.hour"
													class="mx-4 timeBox"
													
												>
													<template #append>小时</template>
												</el-input>
												<el-input
													v-model="zhouqiVal.minute"
													class="mx-1 timeBox"
													
												>
													<template #append>分钟</template>
												</el-input>
											</el-col>
											<el-col v-if="tipForm.repetitionPeriod==2" :span="24" class="zhouqiBox">
												<el-input
													v-model="zhouqiVal.day"
													class="mx-4 timeBox"
													
												>
													<template #append>天</template>
												</el-input>
												<el-input
													v-model="zhouqiVal.hour"
													class="mx-4 timeBox"
													
												>
													<template #append>小时</template>
												</el-input>
												<el-input
													v-model="zhouqiVal.minute"
													class="mx-1 timeBox"
													
												>
													<template #append>分钟</template>
												</el-input>
											</el-col>
											<el-col v-if="tipForm.repetitionPeriod==3||tipForm.repetitionPeriod==5" :span="24" class="zhouqiBox">
												<el-input
													v-model="zhouqiVal.minute"
													class="mx-1 timeBox"
													
												>
													<template #append>分钟</template>
												</el-input>
											</el-col>
											<el-col v-if="tipForm.repetitionPeriod==6" :span="24" class="zhouqiBox">
												<el-select
													v-model="zhouqiVal.week"
													clearable
													placeholder="选择周几"
													class="timeBox"
												>
													<el-option
													v-for="item in weekForDay"
													:key="item.value"
													:label="item.label"
													:value="item.value"
													/>
												</el-select>
												<el-input
													v-model="zhouqiVal.hour"
													class="mx-4 timeBox"
													
												>
													<template #append>小时</template>
												</el-input>
												<el-input
													v-model="zhouqiVal.minute"
													class="mx-1 timeBox"
													
												>
													<template #append>分钟</template>
												</el-input>
											</el-col>
											<el-col v-if="tipForm.repetitionPeriod==7" :span="24" class="zhouqiBox">
												<el-input
													v-model="zhouqiVal.day"
													class="mx-4 timeBox"
													
												>
													<template #append>日</template>
												</el-input>
												<el-input
													v-model="zhouqiVal.hour"
													class="mx-4 timeBox"
													
												>
													<template #append>小时</template>
												</el-input>
												<el-input
													v-model="zhouqiVal.minute"
													class="mx-1 timeBox"
													
												>
													<template #append>分钟</template>
												</el-input>
											</el-col>
										</el-row>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item label="提醒语句" prop="name">
								<el-input v-model="tipForm.tipMsg" type="textarea" />
							</el-form-item>
							<el-form-item  prop="name">
								<el-button type="primary" @click="submitForm">
									提交
								</el-button>
								<el-button @click="resetForm(ruleFormRef)">重置</el-button>
							</el-form-item>
						</el-form>
					</el-scrollbar>
				</el-card>
				<employees-dialog 
					v-model:visible="isShow"
					:isdepartment="true"
					:data="powLookList"
					@change="surePromoter"
				/>

			</el-main>
		</el-container>
	</div>
</template>
<style  lang='scss' scoped>
.common-layout{
	height: calc(100vh - 40px);
	.el-main{
		height: calc(100vh - 40px);
		padding:0 10px 0 10px;
		.setUpPageMenue{
			height: calc(100vh - 60px);
			margin: 10px 0px 0 0 ;
			::v-deep .el-card__body{
				padding: 0;
			}
			.card-header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				i{
					font-size:15px;
					color:#ff0000;
					font-weight: 100;
					cursor: pointer;
				}
			}
		}
	}
	.asideBox{
		height: calc(100vh - 40px);
		width: 250px;
		text-align:center;
		.setUpPageMenue{
			width: 230px;
			height: calc(100vh - 60px);
			margin: 10px 0 0 10px;
			::v-deep .el-card__body{
				padding: 0;
			}
		}
	}
	.boxScroll{
		height: calc(100vh - 70px);
		margin-top: 5px;
		.el-menu-item{
			border-left: 5px solid #FFFFFF;
		}
		.el-menu-item:hover{
			background-color: #f1f1f1f1!important;
			border-left: 5px solid #f1f1f1f1;
		}
		.el-menu-item.is-active {
			color: var(--el-menu-active-color);
			background-color: #e4e4e4e4;
			border-left: 5px solid;
		}
	}
	.boxScroll_main{
		height: calc(100vh - 110px);
		margin-top: 5px;
		padding: 0 10px;
	}
}
.box_top{
	margin-top: 15px;
}
.zhouqiBox{
	display: flex;
	align-items: center;
	justify-content: left;
}
.timeBox{
	width: 150px;
}
</style>
