<template>
	<div class="app-container">
		<page-search 
		:searchFormConfig="searchFormConfig"
		@resetBtnClick="handleNewResetClick"
		@queryBtnClick="handleQueryClick" 
		:initParams="initParams" />
		<page-content ref="pageContentRef" :initParams="initParams" :contentTableConfig="contentTableConfig"
			pageName="/order/workorder" :isExport="false" @newBtnClick="handleNewData" @editBtnClick="handleEditData">
			<template #workordercode="scope">
				<a style="color: blue" @click="openWorkHandle(scope.row)">{{ scope.row['workordercode'] }}</a>
			</template>
			<template #source="scope">
				<div>
					{{ `${scope.row['source']}（${scope.row['projectname']}）` }}
				</div>
			</template>
			<template #workorderstatename="scope">
				<el-tag v-if="scope.row.workorderstatename" effect="plain"
					:type="tagTypeFn(scope.row.workorderstatename)">{{ scope.row.workorderstatename }}</el-tag>
			</template>

			<template #handlerOther="scope">
				<el-button v-for="(item ,index) in orderBtnFilter(scope.row,initParams.listType)" :key="index" type="text"
					@click="btnClickEvents(item,scope.row)">
					{{ item.text }}
				</el-button>
			</template>
		</page-content>
		<page-modal :defaultInfo="defaultInfo" ref="pageModalRef" :pageName="pageNameUrl"
			:modalConfig="resultConfigData" @dataChange="getConsultData" @submit="submit"></page-modal>
		

		<!-- 添加 -->
		<el-dialog
        v-model="dialogAddWorkorder"
        :title="modalTitle"
		
        center
        width="70%"
        :modal="true"
        :show-close="true"
      >
      	<page-order :getDefaultInfo="postDefaultInfo" @refreshOrder="submitRefresh()"></page-order>
      </el-dialog>

	</div>
</template>

<script>
	import { defineComponent, onMounted,onActivated,inject  } from 'vue'

	import PageSearch from '@/components/page-search'
	import PageContent from '@/components/page-content'
	import PageModal from '@/components/page-modal'
	import PageOrder from '@/components/page-order';

	import { searchFormConfig } from './config/search.config'
	import { contentTableConfig } from './config/content.config'

	import { usePageSearch } from '@/hooks/use-page-search'
	import { usePageModal } from '@/hooks/use-page-modal'

	import { tagTypeFn } from '@/utils/index'

	import { getToken } from '@/utils/auth'
	import { orderBtnFilter, getModalData } from '@/utils/operationBtn'
	import { useRoute,  useRouter} from 'vue-router'
	import useSelectStore from '@/store/commonSelect/common'

	import {
		getPageListData,
		deletePageData,
		createPageData,
		editPageData
	} from '@/api/main/system/system'
	
	export default defineComponent({
		name: 'WorkOrderList',
		components: {
			PageSearch,
			PageContent,
			PageModal,
			PageOrder
		},
		setup() {
			let [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
			const { proxy } = getCurrentInstance();
			const templateForm = ref({})
			const pageNameUrl = ref('')
			const workordercode = ref('')
			const route = useRoute();
			const router = useRouter();
			const postDefaultInfo = ref({})
			const initParams = ref({
				listType:route.query.listType
			})
			const dialogAddWorkorder = ref(false)
			const modalTitle = ref('添加工单')
			function submitRefresh() {
				dialogAddWorkorder.value = false
				init()
			}
			watch(
				() => route.query,
				(newValue) => {
					initParams.value.listType = route.query.listType
					if (route.query.listType) {
						init()
					}
				}
			)
			const dealDeptId = ref()
			const resultConfigData = ref({})
			onMounted(() => {
				init()
			})  
			onActivated(() => {})
			const init = () => {
				const params = {
					listType: route.query.listType
				}
				pageContentRef.value.getPageData(params)
			}
			function submit() {
				init()
			}
			function getConsultData(item) {
				if (selectCascade(item.dealdept, dealDeptId.value)) {
					useSelectStore().getSelectCascade(item.dealdept).then((res) => {
						const evaluateUserItem = resultConfigData.value.formItems.find(
							(item) => item.field === 'dealuser'
						)
						evaluateUserItem.options = res
					})
				}
				dealDeptId.value = item.dealdept
			}
			// 处理弹出框
			function openWorkHandle(rowData) { 
				let type
				if (route.query.listType*1 === 1) {
					type = 'wddcl'
				} else if (route.query.listType*1 === 4) {
					type = 'ybdhf'
				} else if (route.query.listType*1 === 0) {
					type = 'djb'
				}
				let query = {
					workordercode : rowData.workordercode,
					type
				}
				sessionStorage.setItem('workQuery', JSON.stringify(query))
				router.push({ path : '/workHandle' }) 
			}
			function btnClickEvents(item, data) {
				workordercode.value = data.workordercode
				if (item.eventName === 'editCommonBtn') {
					modalTitle.value = item.text
					postDefaultInfo.value = data
					dialogAddWorkorder.value =true
				} 
				
				if (item.popoutType === 'newTab') {
					openWorkHandle(data)
				} else if (item.popoutType === 'model') {
					modalTitle.value = item.text
					resultConfigData.value = getModalData(item).config
					defaultInfo.value = data
					defaultInfo.value.code = data.workordercode
					pageModalRef.value.dialogVisible = true
					pageNameUrl.value = getModalData(item).pageNameUrl
				} else if (item.popoutType === 'confirm') {
					confirmHandle(item, workordercode.value, getModalData(item).pageNameUrl,data)
				} else if (item.popoutType === 'prompt') {
					promptHandle(item, workordercode.value, getModalData(item).pageNameUrl,data)
				}
			}
			function promptHandle(item, code, apiUrl,data) {
				proxy.$modal.prompt('确定' + item.text + '吗?').then((e) => {
					const params = {
						code:code,
						reason: e.value
					}
					if (item.eventName === 'refuseCommonBtn') {
						params.agree = 0
						editPageData(apiUrl, params).then((data) => {
							proxy.$modal.msgSuccess('操作成功');
							init()
						});
					} else {
						editPageData(apiUrl, params).then((data) => {
							proxy.$modal.msgSuccess('操作成功');
							init()
						});
					}
					
				});
			}
			function confirmHandle(item, code, apiUrl,data) {
				const params = { code }
				if (item.eventName ===  'withdrawCommonBtn') {
					params.agree = 1
				}
				proxy.$modal.confirm('确定' + item.text + '吗?').then((e) => {
					editPageData(apiUrl, params).then((data) => {
						proxy.$modal.msgSuccess('操作成功');
						init()
					});
				});
			}
			const selectCascade = (value, oldValue) => {
				let returnState = false
				if (value) {
					if (!(oldValue && (value.toString() === oldValue.toString()))) {
						oldValue = value
						returnState = true
					}
				}
				return returnState
			}

			// 1.处理逻辑
			const handleNewResetClick = ()=>{
				init()
			}
			const newCallback = () => {}
			const handleNewData = () => {
				postDefaultInfo.value = {}
				dialogAddWorkorder.value =true
			}
			const editCallback = () => {
				console.log(defaultInfo.value)
			}

			// 3.调用hook获取公共变量和函数
			const [pageModalRef, defaultInfo, handleEditData] =
				usePageModal(newCallback, editCallback)
			return {
				handleNewResetClick,
				postDefaultInfo,
				pageNameUrl,
				openWorkHandle,
				dialogAddWorkorder,
				modalTitle,
				submitRefresh,
				confirmHandle,
				resultConfigData,
				submit,
				workordercode,
				selectCascade,
				dealDeptId,
				getConsultData,
				btnClickEvents,
				orderBtnFilter,
				initParams,
				proxy,
				searchFormConfig,
				contentTableConfig,
				pageContentRef,
				handleResetClick,
				handleQueryClick,
				pageModalRef,
				defaultInfo,
				handleNewData,
				handleEditData
			}
		}
	})
</script>