<template>
	<div class="page">
		<el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item label="采购名称" prop="purchaseSketch">
				<el-input v-model="searchForm.purchaseSketch" placeholder="请输入采购名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="经办人" prop="handledBy">
				<UserSelect :limit='1' :modelValue="searchForm.handledBy"
					@update:modelValue='(value, label) => { searchForm.handledBy = value }'></UserSelect>
			</el-form-item>
			<el-form-item v-if="showHideItem" prop="handledByOffice" label="经办人部门">
				<SelectTree ref="officeTree" :props="{
					value: 'id',             // ID字段名
					label: 'name',         // 显示名称
					children: 'children'    // 子级字段名
				}" :url="`/system-server/sys/office/treeData?type=1`" :value="searchForm.handledByOffice" size="default"
					:accordion="true" @getValue="(value) => { searchForm.handledByOffice = value }" />
			</el-form-item>
			<el-form-item v-if="showHideItem" label="状态" prop="status">
				<el-select v-model="searchForm.status" placeholder="请选择" style="width:100%;" clearable>
					<el-option v-for="item in $dictUtils.getDictList('cw_status')" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="采购金额（元）" prop="contractAmounts">
				<InputNumber :disabled="false" :precision="num" :value="searchForm.contractAmounts"
					@changefrom="(val) => { searchForm.contractAmounts[0] = val }"
					@changeto="(val) => { searchForm.contractAmounts[1] = val }"></InputNumber>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="申请时间" prop="contractDates">
				<el-date-picker placement="bottom-start" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
					v-model="searchForm.contractDates" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>

			<el-form-item v-if="showHideItem" label="供应商" prop="supplierName">
				<el-input v-model="searchForm.supplierName" :readonly="true" placeholder="请选择供应商"
					@focus="openSupplierChoose"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="default" @click="showHide" :icon="showHideIcon">{{ showHideName }}</el-button>
				<el-button type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="jp-table top" style="">
			<vxe-toolbar :refresh="{ query: refreshList }" custom>
				<template #buttons>
					<el-button v-if="hasPermission('psi:add')" type="primary" icon="el-icon-plus"
						@click="start()">新建</el-button>
					<el-button v-if="hasPermission('psi:list')" type="warning" icon="el-icon-download" plain
						@click="exportFile()">导出</el-button>
				</template>
				<template #tools>
					<vxe-button text type="primary" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
						class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
				</template>
			</vxe-toolbar>
			<div style="height: calc(100% - 90px)">
				<vxe-table :key="tableKey" border="inner" auto-resize resizable height="auto" :loading="loading"
					ref="clientTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
					@sort-change="sortChangeHandle" :sort-config="{ remote: true }" :data="dataList"
					:checkbox-config="{}">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column min-width="160" align="center" title="采购申请编号" field="purchaseNo"></vxe-column>
					<vxe-column min-width="160" align="center" title="采购名称" field="purchaseSketch">
						<template #default="scope">
							<el-link type="primary" :underline="false" v-if="hasPermission('psi:list')"
								@click="view(scope.row.id)">{{ scope.row.purchaseSketch }}</el-link>
							<el-link type="primary" :underline="false" v-else-if="hasPermission('psi:list')"
								@click="view(scope.row.id,)">{{ scope.row.purchaseSketch }}</el-link>
							<span v-else>{{ scope.row.purchaseSketch }}</span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="采购方式" field="purchaseMode"></vxe-column>
					<vxe-column min-width="160" align="center" title="采购金额（元）" field="tradeTotalPrice"></vxe-column>
					<vxe-column min-width="160" align="center" title="经办人" field="handledByName"></vxe-column>
					<vxe-column min-width="160" align="center" title="经办人部门" field="handledByOfficeName"></vxe-column>
					<vxe-column min-width="160" align="center" title="申请时间" field="createDate"></vxe-column>
					<vxe-column min-width="150px" align="center" fixed="right" title="状态" field="status">
						<template #default="scope">
							<el-button @click="detail(scope.row)" effect="dark"
								:type="$dictUtils.getDictLabel('cw_status_flag', scope.row.status, '-')">
								{{ $dictUtils.getDictLabel("cw_status", scope.row.status, '-') }}
							</el-button>
						</template>
					</vxe-column>

					<vxe-column title="操作" width="150px" fixed="right" align="center">
						<template #default="scope">
							<el-button
								v-if="hasPermission('psi:edit') && scope.row.createBy === $store.state.user.id && (scope.row.status === '1' || scope.row.status === '3')"
								text type="primary" size="small" @click="push(scope.row)">修改</el-button>
							<el-button
								v-else-if="hasPermission('psi:edit') && isAdmin && (scope.row.status === '1' || scope.row.status === '3' || scope.row.status === '4' || scope.row.status === '5')"
								text type="primary" size="small" @click="edit(scope.row.id)">修改</el-button>
							<el-button
								v-if="hasPermission('psi:edit') && scope.row.createBy === $store.state.user.id && scope.row.status === '2'"
								text type="primary" size="small" @click="reback(scope.row)">撤回</el-button>
							<el-button v-if="scope.row.status === '2' && checkIsAudit(scope.row)" text type="primary"
								size="small" @click="examine(scope.row)">审核</el-button>
							<el-button
								v-if="hasPermission('psi:edit') && scope.row.status === '4' && scope.row.createBy === $store.state.user.id"
								text type="primary" @click="adjust(scope.row)">驳回调整</el-button>
							<el-button
								v-if="hasPermission('psi:del') && scope.row.createBy === $store.state.user.id && (scope.row.status === '1' || scope.row.status === '3')"
								size="small" text type="primary" @click="del(scope.row.id)">删除</el-button>
							<el-button
								v-else-if="hasPermission('psi:del') && isAdmin && (scope.row.status === '1' || scope.row.status === '3' || scope.row.status === '4' || scope.row.status === '5')"
								size="small" text type="primary" @click="del(scope.row.id)">删除</el-button>
							<el-button
								v-if="hasPermission('psi:wareHouseRecord:list') && scope.row.status === '5' && scope.row.purchaseModeType === '1'"
								text type="primary" size="small" @click="seeWareHouse(scope.row.id)">入库记录</el-button>
							<el-button
								v-if="hasPermission('psi:wareHouse:add') && scope.row.status === '5' && scope.row.purchaseModeType === '1'"
								text type="primary" size="small" @click="wareHouse(scope.row.id)">入库</el-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
					:total="tablePage.total" :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
				<UpdateInfoForm ref="updateInfoForm" @refreshList="refreshList"></UpdateInfoForm>
				<SeeWareHouseList ref="seeWareHouseList"></SeeWareHouseList>
				<WareHouseAddForm ref="wareHouseAddForm"></WareHouseAddForm>
				<SupplierChooseForm ref="supplierChooseForm" @getSupplier="getSupplier"></SupplierChooseForm>

			</div>
		</div>
	</div>
</template>

<script>
import WareHouseAddForm from '../wareHouse/WareHouseAddForm'
import SeeWareHouseList from './SeeWareHouseList'
import UserSelect from '@/components/userSelect'
import UpdateInfoForm from '../info/UpdateInfoForm'
import InputNumber from '@/views/cw/workContract/InputNumber.vue'
import SelectTree from '@/components/treeSelect/treeSelect.vue'
import MaterialManagementService from '@/api/psi/MaterialManagementService'
import taskService from '@/api/flowable/taskService'
import processService from '@/api/flowable/processService'
import pick from 'lodash.pick'
import userService from '@/api/sys/userService'
import SupplierChooseForm from '@/views/psiManagement/supplier/SupplierChooseForm'
export default {
	data() {
		return {
			searchVisible: true,
			showHideItem: false,
			showHideIcon: 'el-icon-arrow-down',
			showHideName: '展示',
			num: 0,
			searchForm: {
				contractAmounts: [],
				purchaseSketch: '',
				handledBy: '',
				handledByOffice: '',
				status: '',
				contractDates: [],
				procurementType: '',
				createBy: '',
				supplierId: '',
				supplierName: ''
			},
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			tableKey: '',
			loading: false,
			processDefinitionAuditId: '',
			procDefAuditKey: '',
			isAdmin: false,
			createName: '',
			create: ''
		}
	},
	materialManagementService: null,
	created() {
		this.materialManagementService = new MaterialManagementService()
	},
	components: {
		InputNumber,
		SelectTree,
		UpdateInfoForm,
		SeeWareHouseList,
		WareHouseAddForm,
		UserSelect,
		SupplierChooseForm
	},
	computed: {
		userName() {
			return this.$store.state.user.name
		},
		user() {
			this.createName = this.$store.state.user.name
			return this.$store.state.user
		}
	},
	mounted() {
		this.refreshList()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		showHide() {
			if (this.showHideItem === false) {
				this.showHideItem = true
				this.showHideIcon = 'el-icon-arrow-up'
				this.showHideName = '隐藏'
			} else {
				this.showHideItem = false
				this.showHideIcon = 'el-icon-arrow-down'
				this.showHideName = '展示'
			}
		},
		// 入库
		wareHouse(id) {
			// this.$refs.reportManagementForm.init('add', '')
			this.$refs.wareHouseAddForm.init('purchaseAdd', id)
		},
		seeWareHouse(id) {
			this.$refs.seeWareHouseList.init(id)
		},
		// 新增
		add() {
			// this.$refs.reportManagementForm.init('add', '')
		},
		// 修改
		edit(id) {
			id = id || this.$refs.clientTable.getCheckboxRecords().map(item => {
				return item.id
			})[0]
			this.$refs.updateInfoForm.init('edit', id)
		},
		// 查看
		view(id) {
			this.$refs.updateInfoForm.init('view', id)
		},
		// 查询当前用户是否是管理员用户
		checkIsAdmin() {
			userService.is().then((data) => {
				this.isAdmin = data
			})
		},
		// 获取数据列表
		refreshList() {
			this.loading = true
			this.materialManagementService.list({
				'current': this.tablePage.currentPage,
				'size': this.tablePage.pageSize,
				'orders': this.tablePage.orders,
				...this.searchForm
			}).then((data) => {
				this.dataList = data.records
				this.tablePage.total = data.total
				this.tableKey = Math.random()
				this.loading = false
			})
			this.checkIsAdmin()
			processService.getByName('进销存-采购申请').then((data) => {
				if (!this.commonJS.isEmpty(data.id)) {
					this.processDefinitionAuditId = data.id
					this.procDefAuditKey = data.key
				}
			})
		},
		// 当前页
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		// 排序
		sortChangeHandle(column) {
			this.tablePage.orders = []
			if (column.order != null) {
				this.tablePage.orders.push({ column: this.$utils.toLine(column.property), asc: column.order === 'asc' })
			}
			this.refreshList()
		},
		// 删除
		del(id) {
			let ids = id || this.$refs.clientTable.getCheckboxRecords().map(item => {
				return item.id
			}).join(',')
			this.$confirm(`确定删除所选项吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.materialManagementService.remove(ids).then((data) => {
					this.$message.success(data)
					this.refreshList()
					this.loading = false
				})
			})
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.searchForm.supplierId = '' // 重置时清空供应商筛选
			this.refreshList()
		},
		start() {
			// 读取流程表单
			let tabTitle = `发起流程【采购申请】`
			let processTitle = `${this.userName} 在 ${this.moment(new Date()).format('YYYY-MM-DD HH:mm')} 发起了 [采购申请]`
			taskService.getTaskDef({
				procDefId: this.processDefinitionAuditId,
				status: 'startAndHold'
			}).then((data) => {
				this.$router.push({
					path: '/flowable/task/TaskForm',
					query: {
						...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title'),
						procDefId: this.processDefinitionAuditId,
						procDefKey: this.procDefAuditKey,
						status: 'startAndHold',
						title: tabTitle,
						formType: data.formType,
						formUrl: data.formUrl,
						formTitle: processTitle,
						businessId: 'false',
						isShow: false,
						routePath: '/psiManagement/purchase/PurchaseList'
					}
				})
			})
		},
		// 发起采购申请
		push(row) {
			// 读取流程表单
			let title = `发起流程【采购申请】`
			let processTitle = `${this.userName} 在 ${this.moment(new Date()).format('YYYY-MM-DD HH:mm')} 发起了[采购申请]`
			let status = 'startAndHold'
			if (row.status === '3') {
				status = 'startAndClose'
			} else if (row.status === '4') {
				status = 'reapplyFlag'
			}
			taskService.getTaskDef({
				procDefId: this.processDefinitionAuditId,
				businessId: row.id,
				businessTable: 'psi_management_pruchase_request_basics'
			}).then((data) => {
				this.$router.push({
					path: '/flowable/task/TaskForm',
					query: {
						...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title'),
						procDefId: this.processDefinitionAuditId,
						procDefKey: this.procDefAuditKey,
						title: title,
						formType: data.formType,
						formUrl: data.formUrl,
						formTitle: processTitle,
						businessTable: 'psi_management_pruchase_request_basics',
						businessId: row.id,
						isShow: 'false',
						status: status,
						routePath: '/psiManagement/purchase/PurchaseList'
					}
				})
			})
		},
		// 查看客户登记流程结果
		detail(row) {
			if (row.status !== '0' && row.status !== '1') {
				// eslint-disable-next-line eqeqeq
				taskService.getTaskDef({
					procInsId: row.procInsId,
					procDefId: this.processDefinitionAuditId
				}).then((data) => {
					this.$router.push({
						path: '/flowable/task/TaskFormDetail',
						query: {
							...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title'),
							isShow: 'false',
							readOnly: true,
							title: '质控管理' + '流程详情',
							formTitle: '质控管理' + '流程详情',
							businessId: row.id,
							status: 'reback'
						}
					})
				})
			}
		},
		// 撤回报告流程
		reback(row) {
			this.$confirm(`确定要撤回该申请吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				await this.materialManagementService.findById(row.id).then((data) => {
					if (data.status !== '2') { // status的值不等于“审核中”，就弹出提示
						this.$message.error('数据已发生改变或不存在，请刷新数据')
						this.refreshList()
					} else {
						processService.revokeProcIns(row.procInsId).then((data) => {
							let form = { status: '3', id: row.id }
							this.materialManagementService.updateStatusById(form)
							this.$message.success(data)
							this.refreshList()
						})
					}
				})
			})
		},
		// 驳回后调整
		adjust(row) {
			this.materialManagementService.findById(row.id).then((data) => {
				if (data.status !== '4') { // status的值不等于“驳回”，就弹出提示
					this.$message.error('数据已发生改变或不存在，请刷新数据')
					this.refreshList()
				} else {
					this.todo(row)
				}
			})
		},
		// 审核
		examine(row) {
			this.materialManagementService.findById(row.id).then((data) => {
				if (data.status !== '2') { // status的值不等于“审核中”，就弹出提示
					this.$message.error('数据已发生改变或不存在，请刷新数据')
					this.refreshList()
				} else {
					this.todo(row)
				}
			})
		},
		// 审核或重新调整跳转
		todo(row) {
			let cUser = false
			taskService.getTaskDefInfo({
				taskId: row.taskId
			}).then((data) => {
				this.$router.push({
					path: '/flowable/task/TaskForm',
					query: {
						...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId'),
						isShow: false,
						formReadOnly: true,
						formTitle: `${data.taskName}`,
						cUser: cUser,
						title: `审批【${data.taskName || ''}】`,
						routePath: '/psiManagement/purchase/PurchaseList'   // 数据处理后需要跳转的页面路径
					}
				})
			})
		},
		// 查询当前登录人是否是数据的审核人
		checkIsAudit(row) {
			let loginUserId = this.$store.state.user.id  // 获取当前登录用户id
			if (this.commonJS.isNotEmpty(row.auditUserIds)) {
				for (const userId of row.auditUserIds) {
					if (userId === loginUserId) {  // 当数据的审核人中包含当前登录人id时，返回true
						return true
					}
				}
			}
			return false
		},
		exportFile() {
			const options = {
				filename: `${this.moment(new Date()).format('YYYY-MM-DD')}采购申请数据导出`,
				sheetName: '采购申请数据导出',
				mode: 'all'
			}
			this.loading = true
			this.materialManagementService.exportFile({
				current: this.tablePage.currentPage,
				size: this.tablePage.pageSize,
				orders: this.tablePage.orders,
				...options,
				...this.searchForm
			}).then((res) => {
				this.$utils.downloadExcel(res, options.filename)
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		getSupplier(row) {
			this.searchForm.supplierId = row.id
			this.searchForm.supplierName = row.name
		},
		// 打开供应商选择组件
		openSupplierChoose() {
			this.$refs.supplierChooseForm.init()
		}
	}
}
</script>
