<template>
  <el-dialog v-model="dialogVisible" title="交办" width="25%" :before-close="closeModal">
	<!-- 交办 -->

    <span>
      <el-form :model="formData" label-width="80px">

		<el-form-item required label="部门"> 
			<el-cascader @change="selece" style="width:100%" v-model="formData.dealdept" :options="deptList" :show-all-levels="false" placeholder="请选择部门" filterable />
        </el-form-item>

        <el-form-item label="人员">
          <el-select style="width:100%" v-model="formData.dealuser" class="m-2" placeholder="请选择人员" :filterable="true">
            <el-option
              v-for="( item , index ) in userList"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

		<el-form-item  label="办理时限">
			   <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" style="width:100%"  v-model="formData.deadline" type="datetime" placeholder="请选择办理时限"/>
        </el-form-item>

		<el-form-item  label="备注">
			<el-input type="textarea" v-model="formData.reason" />
        </el-form-item>

      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeModal">关 闭</el-button>
        <el-button type="primary" @click="transferFn">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, toRefs, ref} from 'vue'
import store from '@/store/commonSelect/common' 

import {
	getPageListData,
	deletePageData,
	createPageData,
	editPageData
} from '@/api/main/system/system'

export default defineComponent({
	props : ['dialogVisible'],
	setup(props , { emit } ) {
		// const userList = store().workorderUserList;
		const userList = ref([]);

	    const deptList = store().deptListData;


  		const { proxy } = getCurrentInstance()

		  
		const _data = reactive({ 
			formData: {
				dealdept : '',
				dealuser : '',
				deadline : '',
				reason : '',
			}
		})

		// 弹出框关闭
		function closeModal() {
			_data.formData = {
				dealdept : '',
				dealuser : '',
				deadline : '',
				reason : '',
			}

			emit('update:dialogVisible',false);
		}

		// 工单转派
		function transferFn(rowData){
			if(! _data.formData.dealdept){
				proxy.$modal.msgError('部门不能为空');
				return;
			}

			emit('submit' , _data.formData);
			closeModal(); 
		}

		// 下拉框联动
		function selece(data){
			userList.value = [];

			let params = {
				pageNum : 1,
				pageSize : 10,
				deptId : data[data.length - 1]
			}
			getPageListData('/system/user' , params).then(({data})=>{
				userList.value = data?.map((val)=>{
					return {
						title : `${val.nickName}-${val.userName}`,
						value : val.userName
					}
				})
			})
		}

		return {
			...toRefs(_data), 
			...toRefs(props), 
			closeModal,
			userList,
			transferFn,
			deptList,
			selece
		}
	}
})
</script>