<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from 'vue'
import {GlobalStore} from '@/stores/index'
import {useRoute, useRouter} from 'vue-router'
import {stockoutexcel, Storehouse_StockOut_Audit, Storehouse_StockOut_Get} from '@/api/storehouse/index'
import {InfoType, OutStockAuditFormType} from '@/hooks/useDepot'
import ImageCom from '@/components/Image/index.vue'
import {paymentMethodOptions} from '@/hooks/useTablePublic'
import {ElMessage, type FormInstance} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
import Upload from "@/views/workAttendance/Upload/index.vue";

const ruleFormRef = ref<FormInstance>()
const info = ref<InfoType | undefined>()
const globalStore = GlobalStore()
const route = useRoute()
const router = useRouter()
const dialogVisible = ref(false)
const auditType = ref('')
let showWatch = ref(true)
const disabled = ref(false)
const formLabelWidth = ref('100px')
const fileListImg: any = ref([])

const columns = [
	{type: 'index', label: '序号', width: 80, align: 'center '},
	{label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img'},
	{label: '产品名称', prop: 'T_product_name', align: 'center '},
	{label: '产品分类', prop: 'T_product_class_name', align: 'center '},
	{label: '产品型号', prop: 'T_product_model', align: 'center ', name: 'T_product_model'},
	{label: '产品规格', prop: 'T_product_spec', align: 'center '},
	{label: '是否关联SN', prop: 'T_product_relation_sn', align: 'center ', width: 120, name: 'T_product_relation_sn'},
	{label: '数量', prop: 'T_num', align: 'center '},
	{prop: 'operation', label: '关联设备', width: 100, fixed: 'right', align: 'center '}
]

const initParam = reactive<OutStockAuditFormType>({
	T_number: '',
	T_audit: 0,
	T_approval_opinion: '',
	T_type: '',
	T_approval_img: ''
})

const stockOutExcelFun = async (data: any) => {
	console.log(data, info.value);
	const result: any = await stockoutexcel({T_number: info.value!.T_number})
	if (result.Code === 200) {
		window.open(result.Data)
	}
}


const getStorehouseContractGet = async () => {
	const res: any = await Storehouse_StockOut_Get({
		User_tokey: globalStore.GET_User_tokey,
		T_number: route.params.number
	})
	if (res.Code === 200) {
		info.value = res.Data
		tableData.value = res.Data.T_Product
	}
}

const tableData = ref<any[]>([])


const openDrawer = (audit: string) => {
	dialogVisible.value = true
	auditType.value = audit
}

// 2财务通过 3财务驳回 4总经理通过 5总经理驳回
const StockOutAudit = async () => {
	const type = route.params.type as string
	console.log("type---------", type, auditType.value)
	initParam.T_approval_img = fileListImg.value && fileListImg.value.length > 0 ? fileListImg.value[0] : ''
	if (type === 'Finance') {
		// 财务审核分支
		if (auditType.value === '通过') {
			initParam.T_audit = 2 // 财务通过
		} else if (auditType.value === '驳回') {
			initParam.T_audit = 3 // 财务不通过
		}
	} else {
		// 总经理审核分支
		if (auditType.value === '通过') {
			initParam.T_audit = 4 // 总经理通过
		} else if (auditType.value === '驳回') {
			initParam.T_audit = 5 // 总经理不通过
		}
	}


	initParam.T_number = route.params.number as string
	initParam.T_type = type
	const result: any = await Storehouse_StockOut_Audit({
		User_tokey: globalStore.GET_User_tokey,
		...initParam,
	})
	console.log('财务提交', result)
	if (result.Code === 200) {
		ElMessage.success('提交成功！')
		nextTick(() => {
			if (ruleFormRef.value) {
				ruleFormRef.value.resetFields()
			}
			dialogVisible.value = false
			router.back()
		})
	}
}


onMounted(() => {
	getStorehouseContractGet()
})
</script>
<template>
	<div class="contract-detail">
		<div class="info">
			<div style="display: flex;justify-content: space-between">
				<h1>出库详情
					<el-tag v-if="info?.T_state_str === '待审批'" type="warning" size="small" effect="dark"> 待审批
					</el-tag>
					<el-tag v-if="info?.T_state_str === '财务通过'" type="primary" size="small" effect="dark">
						财务通过
					</el-tag>
					<el-tag v-if="info?.T_state_str === '财务驳回'" type="danger" size="small" effect="dark"> 财务驳回
					</el-tag>
					<el-tag v-if="info?.T_state_str === '总经理通过'" type="primary" size="small" effect="dark">
						总经理通过
					</el-tag>
					<el-tag v-if="info?.T_state_str === '总经理驳回'" type="danger" size="small" effect="dark">
						总经理驳回
					</el-tag>
					<el-tag v-if="info?.T_state_str === '已出库'" type="success" size="small" effect="dark"> 已出库
					</el-tag>
				</h1>
				<el-button type="primary" icon="Download" @click="stockOutExcelFun">导出excel</el-button>
			</div>

			<el-divider/>
			<div class="content">
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>出库单号：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_number! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>申请日期：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_application_date! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>出库明细：</span></el-col>
					<el-col :span="21">
						<el-table
							:data="tableData"
							style="width: 100%"
							border
							stripe
							:header-cell-style="{
                background: '#909399',
                height: '50px',
                color: '#fff'
              }"
						>
							<template v-for="item in columns" :key="item.prop">
								<el-table-column v-bind="item" v-if="item.fixed !== 'right'" show-overflow-tooltip>
									<template #default="{ row }" v-if="item.prop === item.name">
                    <span v-if="item.prop === 'T_product_relation_sn'">
                      <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                      <el-tag v-else type="success" effect="dark">否</el-tag>
                    </span>
										<ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img"/>
										<el-tooltip
											v-if="item.prop === 'T_product_model'"
											effect="dark"
											:content="row.T_product_model"
											placement="bottom"
										>
											{{ row.T_product_model }}
										</el-tooltip>
									</template>
								</el-table-column>
							</template>
						</el-table>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>出库仓库：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_depot_name! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>出库日期：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_date! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>领取人：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_receive_name! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>公司名称：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_company_name! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>付款方式：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
						<span>{{
								paymentMethodOptions.find((option: any) => option.id === info?.T_payment_method!)?.name || ''
							}}</span>
					</el-col>
				</el-row>

				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>关联项目：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_project! }}</span></el-col
					>
				</el-row>
				<el-row>
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>备注：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_remark! }}</span></el-col
					>
				</el-row>
				<el-row v-if="info?.T_payment_method === 'A' || info?.T_payment_method === 'B'">
					<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>财务审批意见：</span></el-col>
					<el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
					><span>{{ info?.T_finance_approval_opinion! }}</span></el-col
					>
				</el-row>

			</div>

			<el-divider/>

			<div class="submit">
				<el-button type="danger" round @click="openDrawer('驳回')">驳回</el-button>
				<el-button type="success" round @click="openDrawer('通过')">通过</el-button>
			</div>
		</div>
		<el-dialog title="审批意见"  :label-width="formLabelWidth" v-model="dialogVisible" width="30%" draggable>
			<el-form :model="initParam" ref="approvalFormRef">
				<el-form-item label="审批意见：" :label-width="formLabelWidth" prop="T_approval_opinion">
					<el-input v-model="initParam.T_approval_opinion" :rows="3" type="textarea"
							  placeholder="请输入审批意见(非必填)"></el-input>
				</el-form-item>
				<el-form-item label="审批图片：" :label-width="formLabelWidth" >
					<Upload ref="uploadRef" :showWatch="showWatch" :limit="1" v-model="fileListImg" :disabled="disabled"
							accept="image/*">
						<el-icon>
							<Plus />
						</el-icon>
					</Upload>
				</el-form-item>
			</el-form>
			<div class="submit">
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="StockOutAudit">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

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

.contract-detail {
	height: 100%;
	font-weight: bold;
	color: var(--el-text-color-secondary);

	.info {
		height: 100%;
		padding: 20px;

		& .content {
			height: calc(100% - 72px - 25px - 40px);
			overflow-y: scroll;

			.el-row {
				margin-bottom: 16px;
			}
		}

		.submit {
			display: flex;
			justify-content: center;
		}
	}
	.submit {
		display: flex;
		justify-content: right;
	}
}
</style>
