<!--零件切换模块信息管理页 pg-partSwitch-->
<template>
	<div class="cr-body-content">
		<div ref="box">
			<flexbox class="content-header">
				<el-form :model="listQuery" ref="queryForm" v-show="showSearch" :inline="true">
					<el-form-item label="源零件编码" prop="sourcePartCode" class="forimitem">
						<el-input v-model="listQuery.sourcePartCode" placeholder="请输入源零件编码" clearable size="small" style="width: 240px"
						 @keyup.enter.native="handleQuery" />
					</el-form-item>

					<el-form-item label="源零件名称" prop="sourcePartName" class="forimitem">
						<el-input v-model="listQuery.sourcePartName" placeholder="请输入源零件名称" clearable size="small" style="width: 240px"
						 @keyup.enter.native="handleQuery" />
					</el-form-item>

					<el-form-item label="目标零件编码" prop="targetPartCode" class="forimitem">
						<el-input v-model="listQuery.targetPartCode" placeholder="请输入目标零件编码" clearable size="small" style="width: 240px"
						 @keyup.enter.native="handleQuery" />
					</el-form-item>

					<el-form-item label="目标零件名称" prop="targetPartName" class="forimitem">
						<el-input v-model="listQuery.targetPartName" placeholder="请输入目标零件名称" clearable size="small" style="width: 240px"
						 @keyup.enter.native="handleQuery" />
					</el-form-item>

					<el-form-item class="formitem">
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleFilter">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
						<el-button type="warning" plain icon="el-icon-download" size="mini" style="margin-left: 15px" @click="handleDownload()">导出(Excel)
						</el-button>
					</el-form-item>
					
					<el-form-item style="margin-bottom: 0px; ">
						<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleCreate">新增
						</el-button>
						<el-button class="filter-item" size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate">修改
						</el-button>
						<el-button class="filter-item" size="mini" type="primary" icon="el-icon-delete" @click="handleDelete">删除
						</el-button>
					</el-form-item>
				</el-form>
			</flexbox>
		</div>
		<div class="l-table">
			<!--表格渲染-->
			<el-table ref="multipleTable" v-loading="listLoading" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading"
			 class="cr-table" :data="tableData" :height="tableHeight" :cell-style="cellStyle" :header-cell-style="headerRowStyle"
			 size="small" stripe border highlight-current-row style="width: 100%" @sort-change="sortChange" @selection-change="handleSelectionChange"
			 @row-click="handleRowClick">
				<el-table-column type="selection" width="44px"></el-table-column>
				<el-table-column v-for="(item, index) in getDefaultField" :key="index" :prop="item.prop" :label="item.label"
				 :min-width="item.width" :formatter="fieldFormatter" sortable="custom" show-overflow-tooltip :gutter="0">
					<template slot="header" slot-scope="scope">
						{{ scope.column.label }}
					</template>
				</el-table-column>
			</el-table>

			<!--表单渲染-->
			<el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" :title="formTitle" width="700px" @close="closeDialog">
				<el-form ref="form" :inline="true" :model="childFormModel" :rules="rules" size="small" label-width="120px">
					<el-row>
						<el-col :span="4">
							<el-form-item label="源零件编码：" required />
						</el-col>
						<el-col :span="20">
							<el-form-item prop="sourcePartCode">
								<el-input style="width: 400px" v-model="childFormModel.sourcePartCode" />
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="4">
							<el-form-item label="目标零件编码：" required />
						</el-col>
						<el-col :span="20">
							<el-form-item prop="targetPartCode">
								<el-input style="width: 400px" v-model="childFormModel.targetPartCode" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<!--表格渲染-->
				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="dialogFormVisible = false">取消</el-button>
					<el-button v-loading="formLoading" type="primary" @click="save()">确认</el-button>
				</div>
			</el-dialog>
		</div>

		<div class="table-footer">
			<!-- 分页控件 -->
			<pagination v-show="totalCount > 0" :total="totalCount" :page.sync="pageIndex" :limit.sync="listQuery.maxResultCount"
			 @pagination="getList" />
		</div>

	</div>
</template>

<script>
	import Pagination from "@/components/Pagination";
	import permission from "@/directive/permission/index.js";
	import CRMTableHead from "../../components/CRMTableHead";
	import importExcel from "@/components/ImportTxt";
	import Lockr from "lockr";
	import moment from "moment";
	//import Detail from "./detail.vue";
	import {
		downloadFile
	} from "@/utils/crmindex.js";

	export default {
		name: "PartSwitch",
		components: {
			Pagination,
			CRMTableHead,
			importExcel,
			//Detail
		},
		directives: {
			permission
		},
		// filters: {
		// 	IsCustomerSignFilter(status) {
		// 		//翻译是否签字
		// 		const statusMap = {
		// 			true: "是",
		// 			false: "否",
		// 		};
		// 		return statusMap[status];
		// 	},
		// },
		data() {

			return {
				rules: {
					sourcePartCode: [{
						required: true,
						message: "必须输入！",
						trigger: "blur"
					}],
					targetPartCode: [{
						required: true,
						message: "必须输入！",
						trigger: "blur"
					}],
				},

				tableData: null,
				totalCount: 0,
				listLoading: true,

				listQuery: {
					sourcePartCode: undefined,
					sourcePartName: undefined,
					targetPartCode: undefined,
					targetPartName: undefined,
					maxResultCount: 15,
					skipCount: 0
				},

				childFormModel: {
				},
				//当前页索引
				pageIndex: 1, 
				// 显示搜索条件
				showSearch: true,

				multipleSelection: [],
				dialogFormVisible: false,
				formTitle: "",
				isEdit: false,
				formLoading: false,
				tableHeight: document.documentElement.clientHeight - 280,
			};
		},
		mounted() {
			this.$nextTick(() => {
				var offsetHei = document.documentElement.clientHeight;
				//console.log(offsetHei);
				let boxH = this.$refs.box.offsetHeight;
				this.tableHeight = offsetHei - boxH - 57 - 79; //57为footer高度，79为页面上部标签高度

			});
		},
		created() {
			this.getList();
			
		},
		computed: {
			getDefaultField() {
				var tempsTabs = [];
				tempsTabs.push({
					label: "源零件编码",
					prop: "sourcePartCode",
					width: 150,
				});
				tempsTabs.push({
					label: "源零件名称",
					prop: "sourcePartName",
					width: 200,
				});
				tempsTabs.push({
					label: "目标零件编码",
					prop: "targetPartCode",
					width: 150,
				});
				tempsTabs.push({
					label: "目标零件名称",
					prop: "targetPartName",
					width: 200,
				});
				tempsTabs.push({
					label: "创建时间",
					prop: "creationTime",
					width: 180,
				});
				console.log("字段列表：" + JSON.stringify(tempsTabs));
				return tempsTabs;
			},
		},
		methods: {
			/**
			 * 子窗口保存按钮事件
			 */
			save() {
				
				let _this = this;
				this.$refs.form.validate((valid) => {
					if (valid) {
						console.log("保存参数:" + JSON.stringify(_this.childFormModel));
						_this.formLoading = true;
						if (_this.isEdit) {
							//修改
							_this.$axios
								.puts("/api/newjit/part-switch/" + _this.childFormModel.id, _this.childFormModel)
								.then((response) => {
									_this.formLoading = false;
									_this.$notify({
										title: "成功",
										message: "更新成功",
										type: "success",
										duration: 2000,
									});
									_this.dialogFormVisible = false;
									_this.getList();
								})
								.catch(() => {
									_this.formLoading = false;
								});
						} else {
							//insert添加
							console.log(JSON.stringify(_this.childFormModel));
							_this.$axios
								.posts("/api/newjit/part-switch", _this.childFormModel)
								.then((response) => {
									_this.formLoading = false;
									_this.$notify({
										title: "成功",
										message: "新增成功",
										type: "success",
										duration: 2000,
									});
									_this.dialogFormVisible = false;
									_this.getList();
								})
								.catch(() => {
									_this.formLoading = false;
								});
						}
					}
				});
			},

			/** 新增 */
			handleCreate() {
				if (this.$refs["form"] !== undefined) {
					this.$nextTick(() => {

						this.$refs["form"].resetFields();
					});
				}
				this.formTitle = "新增";
				this.isEdit = false;
				this.childFormModel = {};
				this.dialogFormVisible = true;
			},
			/** 修改 */
			handleUpdate(row) {
				this.formTitle = "修改";
				this.isEdit = true;
				if (this.multipleSelection.length != 1) {
					this.$message({
						message: "编辑必须选择单行",
						type: "warning",
					});
					return;
				} else {
					this.fetchData(this.multipleSelection[0].id);
					this.dialogFormVisible = true;
				}
			},
			/** 删除 */
			handleDelete(row) {
				if (this.multipleSelection.length != 1) {
					this.$message({
						message: "编辑必须选择单行",
						type: "warning",
					});
					return;
				}
				this.$confirm(
						"是否删除记录" + this.multipleSelection[0].sourcePartCode + "?",
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						}
					)
					.then(() => {
						this.$axios
							.deletes(
								"/api/newjit/part-switch/" + this.multipleSelection[0].id
							)
							.then((response) => {
								
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
									duration: 2000,
								});
								this.getList();
							});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			fetchData(id) {
				//循环动态
				this.$axios
					.gets("/api/newjit/part-switch/" + id)
					.then((response) => {
						this.childFormModel = response.item;
					});
			},
			/** 导出功能 */
			handleDownload() {
				this.listLoading = true;
				console.log(JSON.stringify(this.listQuery));
				this.$axios
					.posts("/api/newjit/part-switch/export", this.listQuery)
					.then((res) => {
          				this.handleFilter()
						let filename = res.item;
						this.$axios
							.BolbGets("/api/newjit/exclude-part-cfg/download/" + filename)
							.then((response) => {
								if (filename.indexOf("_") != -1) {
									let downName =
										filename.slice(0, filename.lastIndexOf("_")) +
										filename.slice(filename.lastIndexOf("."));
									downloadFile(response, downName);
									this.$notify({
										title: "成功",
										message: "数据-导出成功！",
										type: "success",
										duration: 2000,
									});
								} else {
									downloadFile(response, filename);
									this.$notify({
										title: "成功",
										message: "数据-导出成功！",
										type: "success",
										duration: 2000,
									});
								}
								this.listLoading = false;
							});
					})
					.catch(err=>{
						this.handleFilter()
					})
			},
			/** 重置按钮操作 */
			resetQuery(refName) {
				this.$refs[refName].resetFields();
				this.handleQuery();
				this.listQuery.TargetPartName = [];
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.listQuery.skipCount = 0;
				this.getList();
			},

			/** 格式化字段 */
			fieldFormatter(row, column) {
				return row[column.property];
			},

			getList() {
				let _this = this;
				this.listLoading = true;
				console.log("getList方法参数：" + JSON.stringify(this.listQuery));
				this.listQuery.skipCount = (this.pageIndex - 1) * this.listQuery.maxResultCount;

				this.$axios
					.gets("/api/newjit/part-switch/list", this.listQuery)
					.then((response) => {

						_this.tableData = response.items;
						console.log("getList方法结果：" + JSON.stringify(_this.tableData));
						_this.totalCount = response.totalCount;
						setTimeout(() => {
							//大数据量加载时
							_this.listLoading = false;
						}, 500);
					})
					.catch(() => {
						_this.listLoading = false;
					});

			},

			handleFilter() {
				this.pageIndex = 1;
				this.getList();
			},

			sortChange(data) {
				const {
					prop,
					order
				} = data;
				if (!prop || !order) {
					this.handleFilter();
					return;
				}
				this.listQuery.Sorting = prop + " " + order;
				this.handleFilter();
			},
			
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			/** 通过回调控制style */
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (column.property === "qty") {
					return {
						textAlign: "right"
					};
				} else {
					return {
						textAlign: "left"
					};
				}
			},
			/** 通过回调控制表头style */
			headerRowStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (column.property === "qty") {
					return {
						textAlign: "right",
						background: "#FAFAFA"
					};
				} else {
					return {
						textAlign: "left",
						background: "#FAFAFA"
					};
				}
			},
			
			handleRowClick(row, column, event) {
				this.$refs.multipleTable.clearSelection();
				this.$refs.multipleTable.toggleRowSelection(row);
			},

			closeDialog() {
				//this.multipleSelection = [];//清空数据
			},
		},
	};
</script>


<style lang="scss" scoped>
	@import "../../../pg-fis/styles/crmtable.scss";

	.divider1 {
		margin: 0;
		//width: 100%;
	}

	.formitem {
		margin-bottom: 0;
	}
</style>
