<script setup lang="ts">
import {
	stockInSort,
	Storehouse_Depot_List,
	Storehouse_Product_Model_List,
	Storehouse_Product_Name_List,
	Storehouse_ProductClass_List,
	Storehouse_Stock_Detail_Excel,
	Storehouse_Stock_Detail_List,
	Storehouse_Stock_List
} from '@/api/storehouse/index'
import {onMounted, reactive, ref} from 'vue'
import {List} from '@element-plus/icons-vue'
import Drawer from '@/components/Drawer/index.vue'
import {GlobalStore} from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import type {ColumnProps} from '@/components/TableBase/interface/index'
import {dayJs} from '@/utils/common'
import ImageCom from '@/components/Image/index.vue'
import {useTablePublic} from '@/hooks/useTablePublic'
import {ElMessage, ElMessageBox} from 'element-plus'
import InventoryStatisticsshowModel from "./modules/InventoryStatisticsshowModel.vue";


const userInfo = ref({
	Id: '',
	T_name: ''
})
const loading = ref(false)
const globalStore = GlobalStore()
const DrawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const TableDetailRef = ref<InstanceType<typeof TableBase> | null>(null)
const {tableRowClassName} = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.Id, userInfo.value.Id)

const initParam = reactive({
	User_tokey: globalStore.GET_User_tokey,
	T_depot_id: '',
	T_product_class: '',
	T_product_name: '',
	T_product_model: ''
})
const detailInitParam = reactive({
	T_depot_id: '',
	T_product_id: '',
	T_start_date: '',
	T_end_date: ''
})
const columns: ColumnProps[] = [
	{type: 'index', label: '序号', width: 80},
	{prop: 'T_depot_name', label: '仓库名称'},
	{prop: 'T_sort', label: '排序(双击排序)', name: 'T_sort'},
	{prop: 'T_product_img', label: '产品图片', name: 'T_product_img'},
	{prop: 'T_product_name', label: '产品名称'},
	{prop: 'T_product_class_name', label: '产品分类'},
	{prop: 'T_product_model', label: '产品型号', ellipsis: true},
	{prop: 'T_product_spec', label: '产品规格'},
	{prop: 'T_total', label: '库存数量', name: 'T_total'},
	{prop: 'T_occupy', label: '占用库存', name: 'T_occupy'},
	{prop: 'operation', label: '操作', width: 80, fixed: 'right'}
]

const detailColumns: ColumnProps[] = [
	{type: 'index', label: '序号', width: 80},
	{prop: 'T_product_name', label: '产品名称'},
	{prop: 'T_product_model', label: '产品型号', ellipsis: true},
	{prop: 'T_product_spec', label: '产品规格'},
	{prop: 'T_month', label: '月份'},
	{prop: 'T_beginning', label: '期初库存'},
	{prop: 'T_in', label: '入库'},
	{prop: 'T_return', label: '退库'},
	{prop: 'T_out', label: '出库'},
	{prop: 'T_ending', label: '期末库存'},
	{prop: 'operation', label: '关联项目', width: 200, fixed: 'right'}
]

const searchHandle = () => {
	TableRef.value?.searchTable()
}
const dataCallback = (res: any) => {
	let arr = res.Data.Data || []
	return arr.map((item: any) => {
		if (item.T_depot_id === userInfo.value.Id) {
			item.T_depot_name = userInfo.value.T_name
		}
		return item
	})
}
const detailDataCallback = (res: any) => res.Data
/**
 * 导出表格
 */
const T_date = ref<string[]>([]) // 作为初始值
const T_date_detail = ref<string[]>([])
const visible = ref(false)
const exportExcel = () => (visible.value = true)
const confirmExpor = async (project_id?: string) => {

	const params = {
		User_tokey: globalStore.GET_User_tokey,
		T_depot_id: initParam.T_depot_id,
		T_start_date: T_date_detail.value[0],
		T_end_date: T_date_detail.value[1],
		T_product_id: ''
	}
	console.log('导出', T_date_detail.value, params)
	if (typeof project_id === 'number') {
		params['T_product_id'] = project_id
	}
	const res: any = await Storehouse_Stock_Detail_Excel(params)
	if (res.Code === 200) {
		window.open(res.Data)
	}
}
const NameOptions = ref<any[]>([])
const classOptions = ref<any[]>([])
const modelOptions = ref<any[]>([])
// 获取产品分类
const getProductClassList = async () => {
	const res: any = await Storehouse_ProductClass_List({page: 1, page_z: 999})
	classOptions.value = res.Data.Data
}
/**
 * 模糊搜索名称
 * @param str 名称字符串
 */
const getNameAsync = async (str: string): Promise<any> => {
	const res: any = await Storehouse_Product_Name_List({T_name: str, T_class: initParam.T_product_class})
	if (!res.Data) return
	return res.Data.map((item: any, index: number) => {
		return {
			value: item,
			index: index
		}
	})
}
/**
 * 模糊搜索名称
 * @param queryString 输入框的输入字符
 */
const querySearchAsync = async (queryString: string) => {
	if (queryString) {
		loading.value = true
		globalStore.SET_isloading(true)
		const results = await getNameAsync(queryString)
		NameOptions.value = results
		globalStore.SET_isloading(false)
		loading.value = false
	}
}
/**
 * 异步获取产品型号
 */
const getProductModelList = async () => {
	globalStore.SET_isloading(true)
	const res: any = await Storehouse_Product_Model_List({T_name: initParam.T_product_name})
	modelOptions.value = res.Data.map((item: any, index: number) => {
		return {
			value: item,
			index: index
		}
	})
	globalStore.SET_isloading(false)
}
const handleSelect = (item: any) => {
	initParam.T_product_name = item.value
	getProductModelList()
}

// 明细
const callbackDrawer = (done: () => void) => done()
const previewDetail = (id: string) => {
	DrawerRef.value?.openDrawer()
	T_date_detail.value = [...T_date.value]
	if (detailInitParam.T_product_id === id) return
	detailInitParam.T_depot_id = initParam.T_depot_id
	detailInitParam.T_product_id = id
	detailInitParam.T_start_date = T_date.value[0]
	detailInitParam.T_end_date = T_date.value[1]
	TableDetailRef.value?.searchTable()
}
const dateDetailChange = (str: string[]) => {
	if (!str) return
	detailInitParam.T_start_date = str[0]
	detailInitParam.T_end_date = str[1]
	TableDetailRef.value?.searchTable()
}
onMounted(() => {
	getProductClassList()
	T_date.value = [dayJs().startOf('year').format('YYYY-MM-DD'), dayJs().format('YYYY-MM-DD')]
	T_date_detail.value = [...T_date.value]
	console.log('初始化时间', T_date)
})

const getSalaryParams = (row: any) => {
	userInfo.value.Id = ''
	setTimeout(() => {
		userInfo.value = {...row}
		initParam.T_depot_id = userInfo.value.Id
	}, 100)
}

const handleHeaderClick = async (e: any) => {
	ElMessageBox.prompt('请输入排序号', '', {
		confirmButtonText: 'OK',
		cancelButtonText: 'Cancel',
		inputValue: `${e.T_sort}`
	}).then(async ({value}) => {
		const result: any = await stockInSort({T_id: e.Id, T_sort: value})
		console.log('提交', value, result)
		if (result.Code == 200) {
			ElMessage.success('编辑成功')
			TableRef.value?.getTableList()
		}

	}).catch(() => {
	})

}


</script>

<template>
	<div class="inventory-statistics">
		<div style="width: 290px" class="inventory-table">
			<TableBase ref="TableRef" :columns="[{ prop: 'T_name', label: '仓库名称' }]"
					   :requestApi="Storehouse_Depot_List"
					   :initParam="{ User_tokey: globalStore.GET_User_tokey }" layout="prev, pager, next"
					   :rowClick="getSalaryParams" :tableRowClassName="tableRowClassNameHandle">
				<template #table-header>
					<h3 class="title">仓库列表</h3>
				</template>
			</TableBase>
		</div>
		<transition leave-active-class="animate__animated animate__fadeOutRight"
					enter-active-class="animate__animated animate__fadeInLeft">
			<div class="project-container" v-if="userInfo.Id">
				<TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Stock_List" :initParam="initParam"
						   :dataCallback="dataCallback">
					<template #table-header>
						<div class="head-search active">
							<el-form :model="initParam" class="result-form" label-width="100px">
								<el-row>
									<el-col :span="12">
										<el-form-item label="产品分类" :inline-message="true">
											<el-select v-model="initParam.T_product_class" clearable
													   placeholder="请选择分类~" class="w-50">
												<el-option v-for="item in classOptions" :key="item.Id"
														   :label="item.T_name" :value="item.Id"/>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="产品名称">
											<el-input v-model="initParam.T_product_name" placeholder="请输入产品名称"/>
											<!-- <el-select v-model="initParam.T_product_name" filterable clearable remote
												reserve-keyword placeholder="按产品名称搜索" remote-show-suffix
												:remote-method="querySearchAsync" :loading="loading"
												@change="handleSelect">
												<el-option v-for="item in NameOptions" :key="item.value"
													:label="item.value" :value="item.value" />
											</el-select>  -->
										</el-form-item>
									</el-col>
								</el-row>
								<el-row class="search-bottom">
									<el-col :span="12">
										<el-form-item label="产品型号">
											<el-input v-model="initParam.T_product_model" placeholder="请输入产品型号"/>
											<!-- <el-select v-model="initParam.T_product_model" clearable
												placeholder="请选择型号~" class="w-50">
												<el-option v-for="item in modelOptions" :key="item.index"
													:label="item.value" :value="item.value" />
											</el-select> -->
										</el-form-item>
									</el-col>
									<el-col :span="6" :offset="6">
										<el-button type="primary" @click="searchHandle">搜索</el-button>
										<el-popover :visible="visible" placement="bottom" :width="400" trigger="click">
											<template #reference>
												<el-button type="success" @click="exportExcel">导出</el-button>
											</template>
											<el-date-picker v-model="T_date_detail" type="daterange" range-separator="~"
															start-placeholder="开始时间" end-placeholder="结束时间"
															format="YYYY-MM-DD"
															value-format="YYYY-MM-DD"/>
											<div class="export-popover">
												<el-button size="small" @click="visible = false">取消</el-button>
												<el-button size="small" type="primary"
														   @click="confirmExpor">确认
												</el-button>
											</div>
										</el-popover>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</template>
					<template #T_sort="{ row }">
						<div @dblclick="handleHeaderClick(row)" style="cursor: pointer;">
							{{ row.T_sort }}
						</div>
					</template>
					<template #T_product_img="{ row }">
						<ImageCom :src="row.T_product_img"/>
					</template>
					<template #T_total="{ row }">
						<el-text :type="row.T_total >= row.T_product_early_warning?'info':'danger'"> {{ row.T_total }}
						</el-text>
					</template>
					<template #T_occupy="{ row }">
						<el-text :type="row.T_occupy == 0?'info':'danger'"> {{ row.T_occupy }}
						</el-text>
					</template>
					<template #right="{ row }">
						<el-button link type="primary" size="small" :icon="List"
								   @click="previewDetail(row.T_product_id)">明细
						</el-button>
					</template>
				</TableBase>
			</div>
		</transition>

		<Drawer ref="DrawerRef" :handleClose="callbackDrawer" size="80%">
			<template #header="{ params }">
				<h4 :id="params.titleId" :class="params.titleClass">库存明细</h4>
			</template>
			<TableBase border ref="TableDetailRef" :pagination="false" :columns="detailColumns"
					   :requestApi="Storehouse_Stock_Detail_List" :initParam="detailInitParam"
					   :dataCallback="detailDataCallback">
				<template #table-header>
					<el-row class="head-search">
						<el-col :span="12">
							<el-form-item label="日期范围">

								<el-date-picker v-model="T_date_detail" type="daterange" range-separator="~"
												start-placeholder="开始时间" end-placeholder="结束时间"
												format="YYYY-MM-DD"
												value-format="YYYY-MM-DD" @change="dateDetailChange"/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-button type="success" @click="confirmExpor(detailInitParam.T_product_id)">导出
							</el-button>
						</el-col>
					</el-row>
				</template>
				<template #right="{ row }">
					<InventoryStatisticsshowModel :rows="row"/>
				</template>
			</TableBase>
		</Drawer>
	</div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.export-popover {
	padding: 5px;
	display: flex;
	justify-content: center;
}

:deep(.drawer__content) {
	@include f-direction;
}

:deep(.el-drawer__header) {
	margin-bottom: 0;
}

.inventory-statistics {
	height: 100%;
	display: flex;
	overflow: hidden;

	.title {
		width: 100%;
		text-align: center;
		line-height: 1.7em;
		font-size: 20px;
		color: #707b84;
	}

	:deep(.table-header),
	:deep(.card) {
		margin: 0;
		border-radius: 8px;
	}

	.inventory-table {
		@include f-direction;
		z-index: 1;
	}

	.project-container {
		@include f-direction;
		z-index: 0;
		margin-left: 12px;
		width: calc(100% - 290px);
	}

	.head-search {
		width: 100%;
		height: 33px;
		overflow: hidden;
		transition: all 0.5s ease-in-out;

		.result-form.el-form .el-form-item {
			margin-bottom: 0 !important;
		}

		.search-bottom {
			margin-top: 18px;
		}
	}

	.head-search.active {
		height: 85px;
	}

	.w-50 {
		flex: 0 0 50%;
	}
}
</style>
