<template>
	<div class="system-user-container layout-padding">
		<el-card class="layout-padding-auto" shadow="hover">
      <div class="selectBoxes">
        <div class="selectItem">
          <el-input v-model="state.formData.fBillNo" style="width: 12vw" placeholder="单据编号" size="default" />
        </div>
        <div class="selectItem">
          <el-select placeholder="业务状态" size="default" style="width: 12vw" v-model="state.formData.fmrpCloseStatus">
            <el-option v-for="item in state.option.column[2].dicData" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="selectItem">
          <el-date-picker
              v-model="state.elDatePicker"
              style="width: 25vw"
              type="daterange"
              range-separator="-"
              start-placeholder="开始采购日期"
              end-placeholder="采购结束日期"
              size="default"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="elDatePickerFun"
          />
        </div>
        <div class="selectItem" style="margin-right: 0">
          <el-button type="primary" size="default" @click="selectFun">搜索</el-button>
          <el-button size="default" @click="resetFun">重置</el-button>
        </div>
        <div class="selectItem" style="flex: 1;margin-right: 0">
          <div class="piliang">
            <el-button type="primary" size="small" @click="state.selectedDataShow = true">
              <span>已选中 {{ state.selectedData.length }} 条数据，去查看</span>
            </el-button>
            <el-date-picker
                v-model="state.chengNuoJiaoQiP"
                type="date"
                placeholder="批量修改选中承诺日期"
                size="small"
                style="width: 45%; margin-left: 12px"
                @change="chengNuoJiaoQiPFun('0')"
            />
            <el-date-picker
                v-model="state.newChengNuoJiaoQiP"
                type="date"
                placeholder="批量修改选中承诺最新交期"
                size="small"
                style="width: 45%; margin-left: 12px"
                @change="chengNuoJiaoQiPFun('1')"
            />
          </div>
        </div>
      </div>
			<avue-crud
				ref="crudRef"
				:data="state.data"
				:option="state.option"
				v-model:page="state.page"
				@on-load="onLoadFun"
				@selection-change="selectionChange"
				:table-loading="state.loading"
			>
				<template #fBillNo="{ row }">{{ row.ifHidden === 0 ? row.fBillNo : '' }}</template>
				<template #fDate="{ row }">{{ row.ifHidden === 0 ? row.fDate : '' }}</template>
				<template #fCancelStatus="{ row }">
					{{ row.ifHidden === 0 ? (row.fCancelStatus === 'A' ? '未关闭' : '已关闭') : '' }}
				</template>
				<template #materialName="{ row }">
					<el-tooltip :content="row.materialName" placement="top">
						<div class="multi-line-omit">{{ row.materialName }}</div>
					</el-tooltip>
				</template>
				<template #chengNuoJiaoQi="{ row }">
					<el-date-picker
						v-model="row.chengNuoJiaoQi"
						type="date"
						placeholder="日期"
						size="small"
						style="width: 220px"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						@change="batchSetChengNuoJiaoQiFun([{ id: row.id, newTime: row.chengNuoJiaoQi }])"
					/>
				</template>
				<template #newChengNuoJiaoQi="{ row }">
					<el-date-picker
						v-model="row.newChengNuoJiaoQi"
						type="date"
						placeholder="日期"
						size="small"
						style="width: 220px"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						@change="batchSetNewChengNuoJiaoQiFun([{ id: row.id, newTime: row.newChengNuoJiaoQi }])"
					/>
				</template>
				<template #menu-left>

				</template>
				<template #menu="{ row }">
					<el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails(row)">查看</el-button>
				</template>
			</avue-crud>
		</el-card>
		<selectedData
			ref="selectedDataRef"
			:showes="state.selectedDataShow"
			:listData="state.selectedData"
			@generateDocuments="generateDocumentsFun"
			@close="
				() => {
					state.selectedDataShow = false;
					getList();
				}
			"
		/>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
import { useRouter } from 'vue-router';
import { listApi } from '../../api/list/index';
// import { useI18n } from 'vue-i18n';
import SelectedData from '/@/views/mssPurchaseOrder/selectedData.vue';
import { ElMessage } from 'element-plus';

const selectedDataRef = ref();
// const { t } = useI18n();
const router = useRouter();
// 定义变量内容
const state = reactive({
	page: {
		total: 1000,
		currentPage: 1,
		pageSize: 30,
	},
	option: {
		height: computed(() => window.innerHeight - (window.innerHeight * 0.23) + ''),
		tip: false,
		index: true,
		menu: true,
		menuWidth: 85,
		border: true,
		delBtn: false,
		editBtn: false,
		align: 'center',
		// searchLabelWidth:100,
		selection: true,
		reserveSelection: true,
		searchMenuSpan: 3,
		addBtn: false,
		column: [
			{ label: '采购单号', prop: 'fBillNo', /*search: true,*/ searchSpan: 3, width: '125' },
			{ label: '采购日期', prop: 'fDate', /*search: true,*/ type: 'datetime', searchSpan: 6, searchRange: true },
			{
				label: '关闭状态',
				prop: 'fCancelStatus',
				dicData: [
					{ label: '未关闭', value: 'A' },
					{ label: '已关闭', value: 'B' },
				],
				width: '90',
			},
			{ label: '物料编码', prop: 'materialCode', width: '120' },
			{ label: '物料名称', prop: 'materialName', width: '240' },
			{ label: '采购单位', prop: 'unitName', width: '90' },
			{ label: '采购数量', prop: 'qty', width: '90' },
			{ label: '交货日期', prop: 'fDeliveryDate', width: '165' },
			{
				label: '业务状态',
				prop: 'fmrpCloseStatus' /*search: true,*/,
				searchSpan: 3,
				dicData: [
					{ label: '正常', value: 'A' },
					{ label: '业务关闭', value: 'B' },
				],
				width: '90',
			},
			{ label: '累计收料数量', prop: 'sendedQty', width: '110' },
			{ label: '剩余收料数量', prop: 'notSendQty', width: '110' },
			{ label: '供应商承诺交期', prop: 'chengNuoJiaoQi', width: '160' },
			{ label: '供应商承诺最新交期', prop: 'newChengNuoJiaoQi', width: '160' },
		],
	},
	data: [],
	elDatePicker: '',
	formData: {
		fBillNo: '',
		fDateBegin: '',
		fDateEmd: '',
		fmrpCloseStatus: '',
	},
	selectedData: [],
	chengNuoJiaoQiP: '',
	newChengNuoJiaoQiP: '',
	selectedDataShow: false,
	loading: false,
});
const selectionChange = (list: any) => {
	nextTick(() => {
		state.selectedData = JSON.parse(JSON.stringify(list));
	});
};
const chengNuoJiaoQiPFun = (e: string) => {
	if (state.selectedData.length != 0) {
		let arr: any = [];
		if (e === '0') {
			state.selectedData.forEach((item: any) => {
				arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
			});
			batchSetChengNuoJiaoQiFun(arr);
		}
		if (e === '1') {
			state.selectedData.forEach((item: any) => {
				arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
			});
			batchSetNewChengNuoJiaoQiFun(arr);
		}
	} else {
		ElMessage.warning('请先选中数据');
	}
};
const batchSetChengNuoJiaoQiFun = (arr: any) => {
	listApi()
		.batchSetChengNuoJiaoQi(arr)
		.then((res: any) => {
			if (res.resultCode === 0) {
				ElMessage.success('操作成功');
				getList();
				state.chengNuoJiaoQiP = '';
			}
			if (res.resultCode === -1) {
				ElMessage.success(res.errorMessage);
				state.newChengNuoJiaoQiP = '';
			}
		});
};
const batchSetNewChengNuoJiaoQiFun = (arr: any) => {
	listApi()
		.batchSetNewChengNuoJiaoQi(arr)
		.then((res: any) => {
			if (res.resultCode === 0) {
				ElMessage.success('操作成功');
				getList();
			}
			if (res.resultCode === -1) {
				ElMessage.success(res.errorMessage);
			}
		});
};
const generateDocumentsFun = () => {
	state.selectedDataShow = false;
	getList();
};
//跳转详情
const toPurchaseDetails = (item: any) => {
	router.push({
		path: '/purchaseDetails',
		query: {
      fBillNo: item.fBillNo ,
		},
	});
};
const elDatePickerFun = (val: any) => {
	state.formData.fDateBegin = val[0];
	state.formData.fDateEmd = val[1];
};
//接口数据处理
const selectFun = () => {
	state.page.currentPage = 1;
	state.page.pageSize = 30;
	getList();
};
const resetFun = () => {
	state.page.currentPage = 1;
	state.page.pageSize = 30;
	state.elDatePicker = '';
	state.formData = {
		fBillNo: '',
		fDateBegin: '',
		fDateEmd: '',
		fmrpCloseStatus: '',
	};
	getList();
};
const onLoadFun = (e: any) => {
	state.page.currentPage = e.currentPage;
	state.page.pageSize = e.pageSize;
	getList();
};
const getList = () => {
	state.loading = true;
	listApi()
		.getPageList({
			condition: state.formData,
			pageSize: state.page.pageSize,
			page: state.page.currentPage,
		})
		.then((res: any) => {
			state.loading = false;
			if (res.resultCode === 0) {
				state.data = res.data.dataList;
				state.page.total = res.data.total;

			}
		});
};
// 页面加载时
onMounted(() => {
  console.log(window.innerHeight - window.innerHeight * 0.25 + '')
});
</script>

<style lang="scss" scoped>
:deep(.avue-crud__header) {
	display: none;
}
:deep(.el-button--text){
  padding: 0 !important;
  height: auto !important;
}
:deep(.avue-crud__pagination) {
	padding: 0 12px !important;
}

:deep(.cell) {
	padding: 0 !important;
}

:deep(.avue-crud__left) {
	flex: 1;
}

:deep(.avue-crud__refreshBtn) {
	display: none;
}

:deep(.avue-crud__gridBtn) {
	display: none;
}

.piliang {
	margin-left: 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	flex: 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 4px;
}

.system-user-container {
	padding: 0 !important;
}

.multi-line-omit {
	word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
	text-overflow: ellipsis; // 溢出用省略号显示
	overflow: hidden; // 超出的文本隐藏
	display: -webkit-box; // 作为弹性伸缩盒子模型显示
	-webkit-line-clamp: 1; // 显示的行
	-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

.selectBoxes {
	display: flex;
  flex-wrap: wrap;
	.selectItem {
		margin-right: 16px;
		display: flex;
	}
}

:deep(.avue-crud) {
	height: 100%;
	width: 100%;
}

:deep(.avue-crud--card) {
	display: flex;
	flex-direction: column;
	flex: 1;
}

:deep(.avue-crud__body) {
	flex: 1;
}

:deep(.el-table__header) {
	height: 40px;
}

:deep(.el-card__body) {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	padding: 0 !important;
}

:deep(.el-table__cell) {
	padding: 0 !important;
	//height: 56px !important;
}

:deep(.el-card) {
	padding: 12px;
}

:deep(.el-form) {
	flex: 1;
}

.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}

:deep(.el-col) {
	margin-bottom: 16px;
}
</style>
