<script setup lang="ts">
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from 'element-plus'
import OutStorageEditSn from './OutStorageEditSn.vue'
import {nextTick, reactive, ref} from 'vue'
import {GlobalStore} from '@/stores/index'
import Drawer from '@/components/Drawer/index.vue'
import {InStoreageFormTypes} from '@/hooks/useDepot'
import OutStorageProduct from './OutStorageProduct.vue'
import {CirclePlus, Delete} from '@element-plus/icons-vue'
import {
	Storehouse_StockOut_Get,
	Storehouse_StockOut_Warehouse
} from '@/api/storehouse/index'
import ImageCom from '@/components/Image/index.vue'
import {paymentMethodOptions} from "@/hooks/useTablePublic";


const tableData = ref<any[]>([])
const globalStore = GlobalStore()
const formLabelWidth = ref('120px')
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const drawerSnEditRef = ref<InstanceType<typeof OutStorageEditSn> | null>(null)
const drawerProductRef = ref<InstanceType<typeof OutStorageProduct> | null>(null)

const form = reactive<InStoreageFormTypes>({
	T_number: '',
	T_depot_id: '',
	T_product: '',//明细拼接
	T_project: '',//关联项目
	T_date: '',
	T_receive: '',
	T_receive_name: '',
	T_remark: '',
	T_company_name: '',
	T_payment_method: '',
});

const validate_T_product = (rule: any, value: any, callback: any) => {
	console.log("验证产品",value)
	if  (value.includes(undefined) || value === '') {
		callback(new Error('请填写产品数量'))
	} else if (value.includes(null)) {
		callback(new Error('请添加产品SN'))
	} else {
		callback()
	}
}

const rules = reactive<FormRules>({
	T_product: [{validator: validate_T_product, trigger: 'blur'}],
	T_depot_id: [{required: true, message: '请选择仓库', trigger: 'blur'}],
	T_date: [{required: true, message: '请选择出库日期', trigger: 'blur'}]
})

const columns = [
	{type: 'index', label: '序号', width: 80, align: 'center '},
	{label: '产品图片', prop: 'T_img', align: 'center ', name: 'T_img'},
	{label: '产品名称', prop: 'T_name', align: 'center '},
	{label: '产品分类', prop: 'T_class_name', align: 'center '},
	{label: '产品型号', prop: 'T_number', align: 'center ', ellipsis: true},
	{label: '产品规格', prop: 'T_spec', align: 'center '},
	{label: '是否关联SN', prop: 'T_relation_sn', align: 'center ', width: 120, name: 'T_relation_sn'},
	{label: '*数量', prop: 'count', align: 'center ', name: 'count'},
	{label: '*关联设备', prop: 'sn', align: 'center ', name: 'sn'},
	{prop: 'operation', label: '操作', width: 80, fixed: 'right'}
]

const countBlurHandle = () => {
	form.T_product = tableData.value.map(item => {
		if (!item.count && item.T_relation_sn !== 1) return undefined
		return `${item.T_product_id},${item.count}|`
	})
}
const getDeviceSnToProduct = () => {
	const DeviceSnData: any = drawerSnEditRef.value?.getDeviceSn()
	const isEmpty = determineSNorCount(DeviceSnData)
	if (isEmpty && isEmpty === 'count') return [undefined]
	if (isEmpty && isEmpty === 'sn') return [null]
	let arr = [...tableData.value]
	let mapArr: any = []
	let flag = false
	for (const item of arr) {
		if (item.count == 0) {
			flag = true
			break;
		}
		mapArr.push(item.T_product_id + '-' + item.count + '-' + (item.T_device_list ? item.T_device_list.join(',') : ''))
	}
	return flag ? undefined : mapArr.join('|') + '|'
}
/**
 * 判断sn or 数量是否为空
 */
const determineSNorCount = (DeviceSnData: any) => {
	for (const item of tableData.value) {
		if (item.count < 1 && item.T_relation_sn !== 1) return 'count'  //数量必大于0
		if (item.T_relation_sn === 1 && !DeviceSnData.get(item.Id) && !DeviceSnData.size) return 'sn'
	}
	return false
}

const AddInStorage = (formEl: FormInstance | undefined) => {

	form.T_product = getDeviceSnToProduct()
	if (!formEl) return
	formEl.validate(async valid => {
		if (valid) {
			const res: any = await Storehouse_StockOut_Warehouse({
				...form
			})
			if (res.Code === 200) {
				ElMessage.success('出库成功！')
				drawerProductRef.value?.clearSelection()
				nextTick(() => {
					emit('onUpdateList')
					resetForm(ruleFormRef.value)
					drawerRef.value?.closeDrawer()
				})
			}
		}
	})
}

const deleteProduct = (row: any) => {
  tableData.value = tableData.value.filter(item => item.Id !== row.Id)

  // 设置产品的选中
  drawerProductRef.value?.selectTableChange(row)
  // 删除设备得sn
  drawerSnEditRef.value?.deleteDeviceSn(row.Id)
}

const callbackDrawer = (done: () => void) => {
	resetForm(ruleFormRef.value)
	done()
}
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	drawerProductRef.value?.clearSelection()
	drawerSnEditRef.value?.clearDeviceSn()
	tableData.value = []
	formEl.resetFields()
}

/**
 * 添加产品
 */
const AddProductionDetailed = () => {
	drawerProductRef.value?.openDrawer()
	drawerProductRef.value?.getProductList()
	// drawerProductRef.value?.getStockTotalList(form.T_depot_id)
}
/**
 * 单选
 */
const ProductselectionChange = (row: any) => {
	row.T_product_id = row.Id
  const index = tableData.value.findIndex((item: any) => item.T_product_id === row.T_product_id)
  if (index === -1) {
    row.count = 0
    tableData.value.push(row)
  } else {
    tableData.value.splice(index, 1)
  }
}
/**
 * 全选
 */
const ProductSelectionAllChange = (selection: any[]) => {
  console.log('全选',selection)
  let arr = [...selection]
  arr.forEach((item:any)=>{
    item.T_product_id = item.Id
  })
  tableData.value = selection
}


const getStorehouseContractGet = async (Id: any) => {
	const res: any = await Storehouse_StockOut_Get({User_tokey: globalStore.GET_User_tokey, T_number: Id})
	if (res.Code === 200) {
		let arr = res.Data.T_Product
		arr.forEach((item: any) => {
			tableData.value.push({
				Id: item.Id,
				T_class_name: item.T_product_class_name,
				T_img: item.T_product_img,
				T_model: item.T_number,
				T_name: item.T_product_name,
				count: item.T_num,
				T_relation_sn: item.T_product_relation_sn,
				T_spec: item.T_product_spec,
				T_device_list: item.T_device_list,
				T_product_id: item.T_product_id
			})
		})
	}
}

/**
 * 添加sn 号
 */

const addDeviceSn = (obj: any) => {
	if (!form.T_date) {
		ElMessage.warning('请先填写出库日期')
		return
	}
	drawerSnEditRef.value?.addDeviceSn(obj.Id, 1, obj.T_product_id, form.T_date)
	drawerSnEditRef.value!.drawerSnRef?.openDrawer()
	drawerSnEditRef.value!.snCount = obj.count
	if (obj.T_device_list) drawerSnEditRef.value!.tableSnData = [...obj.T_device_list].map(item => ({sn: item}));
}
/**
 * 自动计算 count
 */
const autoGetCount = (length: number, id: number, arr: any) => {
	tableData.value.forEach((item: any) => {
		if (item.Id === id && item.T_relation_sn === 1)  {
			// 判断出库数量与扫码数量是否一致
			if (item.count !== length) {
				ElMessage.error('出库数量与扫码数量不一致')
				return
			}
			item.T_device_list = arr
		}
	})
}
/**
 * 关闭 取消
 */
const closeInStorage = () => {
	resetForm(ruleFormRef.value)
	drawerRef.value?.closeDrawer()
}
// 注册事件
const emit = defineEmits<{ (event: 'onUpdateList'): void }>()

// 接受props
interface ItemType {
	T_name: string
	Id: number
}

interface PropsType {
	options?: ItemType[]
}

const props = defineProps<PropsType>()
/**
 * 出库调用
 */
const openDrawer = () => drawerRef.value?.openDrawer()

defineExpose({
	openDrawer, getStorehouseContractGet, form
})
</script>
<template>
	<div class="inStorage-form">
		<Drawer ref="drawerRef" :handleClose="callbackDrawer" size="80%">
			<template #header="{ params }">
				<h4 :id="params.titleId" :class="params.titleClass">出库</h4>
			</template>
			<el-form ref="ruleFormRef" :model="form" :rules="rules">
				<el-form-item label="出库单号：" :label-width="formLabelWidth" prop="T_number">
					<el-input v-model="form.T_number" type="text" :disabled="true" placeholder="系统自动生成"
							  class="w-50"/>
				</el-form-item>
				<el-form-item label="出库仓库：" :label-width="formLabelWidth" prop="T_depot_id">
					<el-select v-model="form.T_depot_id" class="w-50" :disabled="true" clearable
							   placeholder="请选择出库仓库~">
						<el-option v-for="item in props.options" :key="item.Id" :label="item.T_name" :value="item.Id"/>
					</el-select>
				</el-form-item>
				<el-form-item label="公司名称：" :label-width="formLabelWidth" prop="T_company_name">
					<el-input v-model="form.T_company_name" placeholder="请输入公司名称" class="w-50"/>
				</el-form-item>
				<el-form-item label="付款方式：" class="m-b-6" :label-width="formLabelWidth" prop="T_payment_method">
					<el-select v-model="form.T_payment_method" class="w-50 m-2" clearable placeholder="请选择付款方式~">
						<el-option v-for="item in paymentMethodOptions" :key="item.id" :label="item.name" :value="item.id"/>
					</el-select>
				</el-form-item>
				<el-form-item label="出库日期：" :label-width="formLabelWidth" prop="T_date">
					<el-date-picker
						class="my-date-picker"
						style="width: 21.5rem"
						v-model="form.T_date"
						type="date"
						placeholder="选择日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item label="关联项目：" :label-width="formLabelWidth" prop="T_project">
					<el-input v-model="form.T_project" type="text" placeholder="关联项目" class="w-50"/>
				</el-form-item>

				<el-form-item label="申请人：" :label-width="formLabelWidth" prop="T_number">
					<el-input v-model="form.T_receive_name" placeholder="请选择经办人" class="w-50"/>
				</el-form-item>

				<el-form-item label="出库明细：" :label-width="formLabelWidth" prop="T_product">
					<el-table
						:data="tableData"
						style="width: 100%"
						border
						stripe
						:header-cell-style="{
              background: '#dedfe0',
              height: '50px'
            }"
					>
						<template v-for="item in columns" :key="item.prop">
							<el-table-column show-overflow-tooltip v-bind="item"
											 v-if="item.fixed !== 'right' && !item.ellipsis">
								<template #header v-if="item.prop === 'count' || item.prop === 'sn'">
									<span style="color: red">{{ item.label }}</span>
								</template>

								<template #default="{ row }" v-if="item.prop === item.name">
									<el-input
										v-if="item.prop === 'count' && row.T_product_relation_sn !== 1"
										disabled="true"
										v-model.number="row.count"
										type="text"
										autocomplete="off"
										@blur="countBlurHandle"
									/>
									<div v-if="item.prop === 'sn'">
										<el-button
											v-if="row.T_relation_sn === 1"
											link
											type="primary"
											size="small"
											:icon="CirclePlus"
											@click="addDeviceSn(row)"
										>添加
										</el-button
										>
										<span v-else>-</span>
									</div>

									<span v-if="item.prop === 'T_relation_sn'">
                    <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                    <el-tag v-else type="success" effect="dark">否</el-tag>
                  </span>
									<ImageCom v-if="item.prop == 'T_img'" :src="row.T_img"/>
								</template>
							</el-table-column>
							<el-table-column show-overflow-tooltip v-if="item.ellipsis && item.prop === 'T_model'"
											 v-bind="item">
								<template #default="{ row }">
									<el-tooltip effect="dark" :content="row.T_model" placement="bottom">
										{{ row.T_model }}
									</el-tooltip>
								</template>
							</el-table-column>
						</template>
					</el-table>
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
					<el-input
						v-model="form.T_remark"
						:autosize="{ minRows: 4, maxRows: 6 }"
						type="textarea"
						placeholder="请输入备注信息"
					/>
				</el-form-item>
				<div class="btn">
					<el-divider>
						<el-button @click="closeInStorage">取消</el-button>
						<el-button color="#626aef" @click="AddInStorage(ruleFormRef)">提交</el-button>
					</el-divider>
				</div>
				<OutStorageEditSn ref="drawerSnEditRef" @onCount="autoGetCount"/>

			</el-form>
		</Drawer>
		<OutStorageProduct
			ref="drawerProductRef"
			:depotId="form.T_depot_id"
			:selectProductData="tableData"
			@ontableData="ProductselectionChange"
			@ontableDataAll="ProductSelectionAllChange"
		/>

	</div>
</template>
<style scoped lang="scss">
</style>
