<!--
@ 作者: 秦东
@ 时间: 2023-10-11 11:05:45
@ 备注: 条件设置
-->
<script lang='ts' setup>
import $func from '@/utils/workflow/index'
import { useStore } from '@/store/workflow/index' 
import { optTypes, opt1s,flowFactor } from '@/utils/workflow/const'
import { flowFactorCont } from '@/api/workflowapi/types'
import { getConditions } from '@/api/workflowapi/index'

import { gainNodeFactor } from '@/api/displayboardapi/indexapi'

let props = defineProps({
	isFormFlow:{
		type:Boolean,
		default:true
	},
	customerFormKey:{
		type:String,
		default:""
	},
});


const flowFactorList = ref<any[]>([]);

let conditionVisible = ref(false)
let conditionsConfig = ref({
    conditionNodes: [],
})
let conditionConfig = ref({})
let PriorityLevel = ref('')
let conditions = ref([])
let conditionList = ref([])
let checkedList = ref([])
let conditionRoleVisible = ref(false)

let store = useStore()
let { setCondition, setConditionsConfig } = store
let tableId = computed(()=> store.tableId)
let conditionsConfig1 = computed(()=> store.conditionsConfig1)
let conditionDrawer = computed(()=> store.conditionDrawer)
let visible = computed({
    get() {
        return conditionDrawer.value
    },
    set() {
        closeDrawer()
    }
})
watch(conditionsConfig1, (val:any) => {
    conditionsConfig.value = val.value;
    PriorityLevel.value = val.priorityLevel
    conditionConfig.value = val.priorityLevel
        ? conditionsConfig.value.conditionNodes[val.priorityLevel - 1]
        : { nodeUserList: [], conditionList: [] }
})

watch(visible,(val:any)=>{
	if(val){
		if(flowFactor.length>0){
			flowFactor.forEach(ites=>{
				flowFactorList.value.push({
									id:ites.id,
									name:ites.name,
									keyid:ites.keyid,
									type:ites.type,
									isok:ites.isok,
									isCheckbox:ites.isCheckbox,
									options:ites.options
								})
			})
		}
		if(props.isFormFlow){
			let sendData ={
				id:props.customerFormKey,
				types:2
			}
			gainNodeFactor(sendData)
				.then(({data}) =>{
					console.log("......>",data)
					if(data.length > 0){
						data.forEach(item=>{
							flowFactorList.value.push({
								id:flowFactorList.value.length+1,
								name:item.name,
								keyid:item.id,
								type:3,
								isok:false,
								isCheckbox:item.isCheckbox,
								options:item.options
							})
						})
					}
				})
		}
		
	}else{
		flowFactorList.value = []
	}
})







const closeDrawer = (val?:any) => {
	initFactor()
    setCondition(false)
	
}

const isDelField = ref(false)
const tableList = ref<any[]>([])
const maxFactor = ref(false)

const tiaoJianAry = ref<any>()
//选择变化
const pickFactor = (val:any) => {
	let tableKeyAry = new Array
	tableList.value.forEach(item=>{
		tableKeyAry.push(item.factorid)
	})
	let types = 0
	let options = new Array
	let isCheckbox = false
	flowFactorList.value.forEach(item=>{
		if(item.keyid == val){
			item.isok=true
			types = item.type
			options = item.options
			isCheckbox = item.isCheckbox
		}else{
			if(tableKeyAry.length>0){
				if(tableKeyAry.includes(item.keyid)){
					item.isok=true
				}else{
					item.isok=false
				}
			}
		}
	})
	tableList.value.forEach(item=>{
		if(item.factorid == val){
			item.type = types
			item.options = options
			item.isCheckbox = isCheckbox
		}
	})
	console.log("tableList--->",tableList.value,val,types);
}
//添加条件
const addFactorCondition = () => {
	let currLent = tableList.value.length
	if(currLent < flowFactorList.value.length){
		tableList.value.push({id:currLent+1,factorid:"",type:0})
		if(currLent+1 >= flowFactorList.value.length){
			maxFactor.value = true
		}else{
			maxFactor.value = false
		}
	}else{
		maxFactor.value = true
	}
	if(tableList.value.length > 1){
		isDelField.value = true
	}else{
		isDelField.value = false
	}
	
}
const initFactor = () => {
	maxFactor.value = false
	if(tableList.value.length>0){
		tableList.value = []
	}
	if(flowFactorList.value.length>0){
		flowFactorList.value = []
	}
}
//删除条件
const delTiaoJian = (val:any) => {
	let currLent = tableList.value.length
	if(currLent>0){
		let guoduTable = []
		tableList.value.forEach(item=>{
			if(item.factorid != val.factorid){
				guoduTable.push(item)
			}
		})
		tableList.value = guoduTable
	}
	flowFactorList.value.forEach(item=>{
			if(item.keyid == val.factorid){
				item.isok=false
			}
		})
	
	if(currLent < flowFactorList.value.length){
			maxFactor.value = false
	}
	if(tableList.value.length > 1){
		isDelField.value = true
	}else{
		isDelField.value = false
	}
}
const saveCondition = () => {
    
	conditionConfig.conditionList = tableList.value
	console.log("conditionConfig.conditionList--->",conditionConfig.conditionList,tableList);
    // var a = conditionsConfig.value.conditionNodes.splice(PriorityLevel.value - 1, 1)//截取旧下标
    // conditionsConfig.value.conditionNodes.splice(conditionConfig.value.priorityLevel - 1, 0, a[0])//填充新下标
    // conditionsConfig.value.conditionNodes.map((item, index) => {
    //     item.priorityLevel = index + 1
    // });
    // for (var i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
    //     conditionsConfig.value.conditionNodes[i].error = $func.conditionStr(conditionsConfig.value, i) == "请设置条件" && i != conditionsConfig.value.conditionNodes.length - 1
    // }
    // setConditionsConfig({
    //     value: conditionsConfig.value,
    //     flag: true,
    //     id: conditionsConfig1.value.id
    // })
	closeDrawer()
}
</script>
<template>
	<el-drawer v-model="visible" :append-to-body="true" title="条件设置" class="condition_copyer" :show-close="false" :size="550" :before-close="saveCondition"> 
		<template #header="{ titleId, titleClass }">
            <h3 :id="titleId" :class="titleClass">条件设置</h3>
            <select v-model="conditionConfig.priorityLevel" class="priority_level">
                <option v-for="item in conditionsConfig.conditionNodes.length" :key="item" :value="item">优先级{{item}}</option>
            </select>
        </template>
		<div class="demo-drawer__content">
			<div class="condition_content drawer_content">
				<p class="tip">当审批单同时满足以下条件时进入此流程</p>
				
				<el-row  v-for="itemw in tableList" :key="itemw.id" :gutter="10" class="condition_row">
					<el-col :span="7">
						<div class="left_right_cont">
							<el-select v-model="itemw.factorid" placeholder="请选择" class="selectInfo" @change="pickFactor">
								<el-option
									v-for="item in flowFactorList"
									:key="item.keyid"
									:label="item.name"
									:value="item.keyid"
									:disabled="item.isok"
									>
								</el-option>
							</el-select>
							<span>为</span>
						</div>
					</el-col>
					<el-col :span="16">
						<template v-if="itemw.type==1">
							<el-button type="primary" style="margin-bottom:0px" >添加/修改成员</el-button>
							<p  class="selected_list">
							<el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag><el-tag closable type="info" effect="plain" class="tag_us">演员1</el-tag>
							</p>
							
						</template>
						<template v-if="itemw.type==2">
							<el-row v-for="(itemCustomFields,index) in itemw" :key="index" :gutter="5">
								<el-col :span="6">
                                    <el-input v-model="itemCustomFields.wordfield" placeholder="判断关键字"></el-input>
                                </el-col>
								<el-col :span="itemCustomFields.optType != 6?7:16">
                                    <el-select v-model="itemCustomFields.optType"  class="selectInfo" @change="myoptChhange($event,itemCustomFields)">
										<el-option
											v-for="itemSel in optTypes"
											:key="itemSel.value"
											:label="itemSel.label"
											:value="itemSel.value"
											>
										</el-option>   
                                    </el-select>
                                </el-col>
								<el-col v-if="itemCustomFields.optType != 6" :span="9">
                                    <el-input v-model="itemCustomFields.leftval" placeholder="请输入值"></el-input>
                                </el-col>
							</el-row>
							<el-button type="warning" style="margin-top:10px" >添加条件</el-button>
						</template>
						<template v-if="itemw.type==3">
							<el-radio-group v-if="!itemw.isCheckbox" v-model="itemw.answers">
								<el-radio v-for="optVal in itemw.options" :key="optVal.value" :label="optVal.value">{{optVal.label}}</el-radio>
							</el-radio-group>
							<el-checkbox-group v-if="itemw.isCheckbox" v-model="itemw.answers">
								<el-checkbox v-for="optVal in itemw.options" :key="optVal.value" :label="optVal.value">{{ optVal.label }}</el-checkbox>
							</el-checkbox-group>
						</template>
					</el-col>
					<el-col :span="1"><el-icon v-if="isDelField" color="#FF0000" size="20px"  class="delIcon" @click="delTiaoJian(itemw)"><CircleClose /></el-icon></el-col>
				</el-row>
				

				<el-button :disabled="maxFactor" type="primary" @click="addFactorCondition" >添加条件</el-button>
			</div>
			
			<div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCondition">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
		</div>
	</el-drawer>
</template>
<style lang="less">
.condition_copyer {
    .priority_level {
        position: absolute;
        top: 11px;
        right: 30px;
        width: 100px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        font-size: 12px;
    }

    .condition_content {
        padding: 20px 20px 0;
		.condition_row{
			margin-bottom:15px;
			.left_right_cont{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.selectInfo{
					margin-right:5px;
				}
			}
		}
        p.tip {
            margin: 20px 0;
            width: 510px;
            text-indent: 17px;
            line-height: 45px;
            background: rgba(241, 249, 255, 1);
            border: 1px solid rgba(64, 163, 247, 1);
            color: #46a6fe;
            font-size: 14px;
        }

        ul {
            max-height: 500px;
            overflow-y: scroll;
            margin-bottom: 20px;

            li {
                &>span {
                    float: left;
                    margin-right: 8px;
                    width: 70px;
                    line-height: 32px;
                    text-align: right;
                }

                &>div {
                    display: inline-block;
                    width: 370px;

                    &>p:not(:last-child) {
                        margin-bottom: 10px;
                    }
                }

                &:not(:last-child)>div>p {
                    margin-bottom: 20px;
                }

                &>a {
                    float: right;
                    margin-right: 10px;
                    margin-top: 7px;
                }

                select,
                input {
                    width: 100%;
                    height: 32px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    border: 1px solid rgba(217, 217, 217, 1);
                }

                select+input {
                    width: 260px;
                }

                select {
                    margin-right: 10px;
                    width: 100px;
                }

                p.selected_list {
                    padding-left: 10px;
                    border-radius: 4px;
                    min-height: 32px;
                    border: 1px solid rgba(217, 217, 217, 1);
                    word-break: break-word;
                }

                p.check_box {
                    line-height: 32px;
                }
            }
        }

        .el-button {
            margin-bottom: 20px;
        }
    }
}

.condition_list {
    .el-dialog__body {
        padding: 16px 26px;
    }

    p {
        color: #666666;
        margin-bottom: 10px;

        &>.check_box {
            margin-bottom: 0;
            line-height: 36px;
        }
    }
}
.delIcon{
	margin-top:6px;
}
.selected_list{
	margin: 0;

	span{
		margin:5px 5px 4px 0px;
	}
}
</style>
