<template>
	<div class="page">
		<el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item label="流水号" prop="archieveNo">
				<el-input v-model="searchForm.archieveNo" placeholder="请输入流水号" clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="部门" prop="officeName">
				<el-select v-model="searchForm.officeName" placeholder="请选择" style="width:100%;" clearable>
					<el-option
						v-for="item in officeNameList"
						:key="item.officeName"
						:label="item.officeName"
						:value="item.officeName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="业务类型" prop="businessType">
				<el-select v-model="searchForm.businessType" placeholder="请选择" style="width:100%;" clearable>
					<el-option
						v-for="item in $dictUtils.getDictList('business_type')"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="项目名称" prop="project">
				<el-input v-model="searchForm.project" placeholder="请输入项目名称" clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="报告文号" prop="reportNo">
				<el-input v-model="searchForm.reportNo" placeholder="请输入报告文号" clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="报告日期" prop="reportDates">
				<el-date-picker
					style=""
					placement="bottom-start"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					v-model="searchForm.reportDates"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="盖章日期" prop="stampDates">
				<el-date-picker
					style=""
					placement="bottom-start"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					v-model="searchForm.stampDates"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="归档日期" prop="archieveDates">
				<el-date-picker
					style=""
					placement="bottom-start"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					v-model="searchForm.archieveDates"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="档案盒号" prop="fileBoxNumber">
				<el-input v-model="searchForm.fileBoxNumber" placeholder="请输入档案盒号" clearable>
				</el-input>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="合同原件" prop="originalContract">
				<el-input v-model="searchForm.originalContract" placeholder="请输入合同原件" clearable>
				</el-input>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="归档接收人" prop="archieveResever">
				<!--			<UserSelect :limit='1' :modelValue="searchForm.reimBy" @update:modelValue='(value, label) => {searchForm.reimBy = value}'></UserSelect>-->
				<el-input  v-model="searchForm.archieveResever" placeholder="请选择归档接收人">
					<template #suffix>
						<el-button style="background-color: white;color: #1b1e25;border-color: white;" type="primary" slot="append" icon="el-icon-search" @click="openUserDia2">
						</el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item v-if="showHideItem" label="存放地区(区位码)" prop="storagePlace">
				<el-select v-model="searchForm.storagePlace" placeholder="请选择" style="width:100%;" clearable>
					<el-option
						v-for="item in $dictUtils.getDictList('storage_place')"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</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('report_archieve_status')"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button @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" style="">
			<vxe-toolbar ref="toolbarRef" :refresh="{query: refreshList}" export custom>
				<template #buttons>
					<el-button type="primary" @click="importReport()" plain>导入</el-button>
				</template>
			</vxe-toolbar>
			<div  class="jp-table-body">
				<vxe-table
					border="inner"
					auto-resize
					resizable
					height="auto"
					:loading="loading"
					size="small"
					ref="infoTable"
					show-header-overflow
					show-overflow
					highlight-hover-row
					:menu-config="{}"
					:sort-config="{remote:true}"
					:import-config="{
									importMethod: importMethod,
									types: ['csv', 'xls', 'xlsx'],
									remote: true,
								}"
					:export-config="{
                    remote: true,
                    filename: `报告归档数据${moment(new Date()).format('YYYY-MM-DD')}`,
                    sheetName: `报告归档数据${moment(new Date()).format('YYYY-MM-DD')}`,
                    exportMethod: exportMethod,
                    types: ['xlsx'],
                    modes: ['current', 'selected', 'all']
                  }"
					:data="dataList"
					:checkbox-config="{}">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column type="checkbox" width="40" ></vxe-column>
					<vxe-column width="130" title="流水号" field="archieveNo" align="center">
						<template #default="scope">
							<el-link  type="primary" :underline="false" @click="view(scope.row.id)">{{scope.row.archieveNo}}</el-link>
						</template>
					</vxe-column>
					<vxe-column width="130" title="业务类型" field="businessType" align="center">
						<template #default="scope">
							{{$dictUtils.getDictLabel('business_type', scope.row.businessType, '')}}
						</template>
					</vxe-column>
					<vxe-column width="130" title="项目名称" field="project" align="center">
					</vxe-column>
					<vxe-column width="130" title="部门" field="officeName" align="center">
					</vxe-column>
					<vxe-column width="130" title="报告文号" field="reportNo" align="center"></vxe-column>


					<vxe-column min-width="180" title="归档经办人" field="fillingManager" align="center"></vxe-column>

					<vxe-column width="100" title="项目负责人" field="projectMaster" align="center"></vxe-column>
					<vxe-column width="100" title="签字注册会计师" field="signatureCpa" align="center"></vxe-column>
					<vxe-column width="100" title="签字合伙人" field="signatureParter" align="center"></vxe-column>
					<vxe-column width="100" title="项目等级" field="projectLevel" align="center"></vxe-column>
					<vxe-column width="120" title="报告日期" field="reportDate"  align="center"></vxe-column>
					<vxe-column width="120" title="盖章日期" field="stampDate"  align="center"></vxe-column>
					<vxe-column width="120" title="归档日期" field="archieveDate"  align="center"></vxe-column>
					<vxe-column width="120" title="档案盒号" field="fileBoxNumber"  align="center"></vxe-column>
					<vxe-column width="120" title="合同原件" field="originalContract"  align="center"></vxe-column>
					<vxe-column width="120" title="归档接收人" field="archieveReseverName"  align="center"></vxe-column>
					<vxe-column width="120" title="存放地区(区位码)" field="storagePlace"  align="center"></vxe-column>
					<vxe-column width="100" title="状态" fixed="right" align="center" field="status">
						<template #default="scope">
							<el-button v-if="scope.row.status === '0'">{{$dictUtils.getDictLabel("report_archieve_status", scope.row.status, '未处理')}} </el-button>
							<el-button v-else  type="success">{{$dictUtils.getDictLabel("report_archieve_status", scope.row.status, '已处理')}} </el-button>
						</template>
					</vxe-column>
					<vxe-column title="操作" min-width="200px" fixed="right" align="center">
						<template  #default="scope">
							<!--				管理员修改-->
							<el-button v-if=" (isAdmin)" text type="primary" @click="editForm(scope.row)">修改</el-button>
							<el-button v-if=" (isAdmin)" text type="primary" @click="del(scope.row.id)">删除</el-button>

							<el-button  v-if=" isBggdgly && '业务三部' == scope.row.officeName && !isAdmin" text type="primary"  @click="editForm(scope.row)">修改</el-button>
							<el-button v-if=" !isBggdgly && '业务三部' != scope.row.officeName && !isAdmin" text type="primary"   @click="editForm(scope.row)">修改</el-button>
							<el-button v-if=" isBggdgly && '业务三部' == scope.row.officeName && !isAdmin" text type="primary" @click="del(scope.row.id)">删除</el-button>
							<el-button v-if=" !isBggdgly && '业务三部' != scope.row.officeName && !isAdmin" text type="primary" @click="del(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager
					background
					size="small"
					: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>
				<user-select2 ref="userSelect2" @doSubmit="selectUser2"></user-select2>
				<ReportArchieveForm ref="reportArchieveForm" @refreshList="refreshList"></ReportArchieveForm>
				<ReportArchieveImport ref="reportArchieveImport" @refreshList="refreshList"></ReportArchieveImport>
			</div>
		</div>
	</div>
</template>

<script>
	import ReportArchieveService from '@/api/zs/reportArchieve/ReportArchieveService'
	import userService from '@/api/sys/UserService'
	import UserSelect2 from '@/views/utils/UserTreeSelect'
	import ReportArchieveForm from "./ReportArchieveForm";
	import ReportArchieveImport from "./ReportArchieveImport";
	export default {
		data () {
			return {
				showHideItem: false,
				showHideIcon: 'el-icon-arrow-down',
				showHideName: '展示',
				num: 0,
				visable: false,
				gridData: [],
				searchForm: {
					archieveNo:'',
					project: '',
					officeName:'',
					businessType:'',
					reportNo:'',
					reportDates:[],
					stampDates:[],
					archieveDates:[],
					fileBoxNumber:'',
					originalContract:'',
					archieveResever:'',
					storagePlace:'',
					status:'',
				},
				dataList: [],
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				loading: false,
				officeNameList:[],
				isAdmin: false,
				isBggdgly: false,

			}
		},
		reportArchieveService: null,
		created () {
			this.reportArchieveService = new ReportArchieveService()
			this.getOfficeNameList()
		},
		components: {
			UserSelect2,
			ReportArchieveForm,
			ReportArchieveImport
		},
		mounted () {
			this.$nextTick(() => {
				// 将表格和工具栏进行关联
				const $table = this.$refs.infoTable;
				const $toolbar = this.$refs.toolbarRef;
				$table.connect($toolbar);
			});
			this.refreshList();
		},
		activated () {
			this.refreshList()
		},
		computed: {

		},
		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 = '展示'
				}
			},
			// 查看
			view (id) {
				this.$refs.reportArchieveForm.init('view', id)
			},
			//修改
			editForm(row) {
				this.$refs.reportArchieveForm.init('edit', row.id)
			},
			//获取部门
			getOfficeNameList(){
				this.reportArchieveService.getOfficeNameList().then((data) =>{
					this.officeNameList = data
				})
			},
			// 查询当前用户是否是管理员用户
			checkIsAdmin () {
				userService.is().then((data) => {
					this.isAdmin = data
				})
			},
			// 查询当前用户是否是中审报告归档管理员
			checkIsBggdgly () {
				userService.isBggdgly().then((data) => {
					this.isBggdgly = data
				})
			},
			openUserDia2(){
				this.$refs.userSelect2.init()
			},
			// 获取数据列表
			refreshList () {
				this.loading = true
				this.reportArchieveService.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.loading = false
				})
				this.checkIsAdmin()
				this.checkIsBggdgly()
				this.getOfficeNameList()
			},
			// 删除
			del (id) {
				let ids = id || this.$refs.infoTable.getCheckboxRecords().map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.reportArchieveService.remove(ids).then((data) => {
						this.$message.success(data)
						this.refreshList()
						this.loading = false
					})
					// this.reimbursementService.remove(ids).then(({data}) => {
					//   this.$message.success(data)
					//   this.refreshList()
					//   this.loading = false
					// })
				})
			},
			resetSearch () {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			},

			// 当前页
			currentChangeHandle ({ currentPage, pageSize }) {
				this.tablePage.currentPage = currentPage
				this.tablePage.pageSize = pageSize
				this.refreshList()
			},

			// 自定义服务端导出
			exportMethod ({ options }) {
				// 传给服务端的参数
				const params = {
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm,
					filename: options.filename,
					sheetName: options.sheetName,
					isHeader: options.isHeader,
					original: options.original,
					mode: options.mode,
					selectIds: options.mode === 'selected' ? options.data.map(item => item.id) : [],
					exportFields: options.columns.map(column => column.property)
				}
				return this.reportArchieveService.exportFile(params).then((res) => {
					// 将二进制流文件写入excel表，以下为重要步骤
					this.$utils.downloadExcel(res, options.filename)
				}).catch(function (err) {
					if (err.response) {
						console.log(err.response)
					}
				})
			},
			// 下载模板
			downloadTpl() {
				// this.$utils.downloadExcel('/sys/user/import/template')
				this.reportArchieveService
					.exportTemplate()
					.then((data) => {
						// 将二进制流文件写入excel表，以下为重要步骤
						this.$utils.downloadExcel(data, "报告归档导入模板");
					})
					.catch(function (err) {
						if (err.response) {
							console.log(err.response);
						}
					});
			},
			// 自定义服务端导入
			importMethod({ file }) {
				// 处理表单
				const formBody = new FormData();
				formBody.append("file", file);
				this.reportArchieveService.importExcel(formBody).then((result) => {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: result,
					});
					this.refreshList();
				});
			},
			//报告号替换
			importReport(){
				this.$refs.reportArchieveImport.init()
			}

		}
	}
</script>
