<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {fnMd5} from '@/utils/common'
import {ElMessage, ElMessageBox} from 'element-plus'
import TableBase from '@/components/TableBase/index.vue'
import {Check, Delete, Edit, View} from '@element-plus/icons-vue'
import type {ColumnProps} from '@/components/TableBase/interface/index'
import {
	percentage_Del,
	percentage_Submit_Audit,
	percentage_User_Excel,
	percentage_UserList
} from '@/api/mypercentage/index'
import {options2, useTablePublic} from '@/hooks/useTablePublic'

const {updateOnTableList} = useTablePublic()
const router = useRouter()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const {globalStore, searchOnTableList} = useTablePublic()

const columns: ColumnProps[] = [
	{type: 'index', label: '序号', width: 80},
	{prop: 'T_verifyCompany_name', label: '公司名称', name: 'T_verifyCompany_name'},
	{prop: 'T_verifyCompany_State', label: '回款状态', name: 'T_verifyCompany_State'},
	{prop: 'T_recoveries_time', label: '回款时间', name: 'T_recoveries_time',width: 115},
	{prop: 'T_task_id', label: '任务编号'},
	{prop: 'T_task_name', label: '任务名称'},
	{prop: 'T_reporting_pass_time', label: '统计日期',width: 115},
	{prop: 'T_type', label: '提成类型', name: 'T_type'},
	{prop: 'T_device_type', label: '设备类型'},
	{prop: 'T_verify_type', label: '验证类型'},
	{prop: 'T_uuid_name', label: '提成人员'},
	{prop: 'T_money', label: '提成金额'},
	{prop: 'T_State', label: '状态', name: 'T_State'},
	{prop: 'operation', label: '操作', width: 280, fixed: 'right'}
]

const processContract = (id: string, titles: string) => {
	router.push({name: 'PercentageDetail', params: {id, type: fnMd5('contract'), titles: titles}})
}


//函数
const SubmitReview = async (row: any) => {
	const reslut: any = await percentage_Submit_Audit({T_id: row.Id})
	console.log('审核', reslut, row)
	if (reslut.Code == 200 && reslut.Msg == 'ok!') {
		searchOnTableList(TableRef.value)
		ElMessage.success(reslut.Msg)
	}
}

// 搜索
const T_date = ref<string[]>([])
const T_reporting_date = ref<string[]>([])
const initParam = reactive({
	User_tokey: globalStore.GET_User_tokey,
	T_name: '',
	T_state: '',
	T_end_date: '',
	T_start_date: '',
	T_reporting_start_time: '',
	T_reporting_end_time: ''
})

const searchHandle = () => {
	initParam.T_end_date = T_date.value ? T_date.value[1] : ''
	initParam.T_start_date = T_date.value ? T_date.value[0] : ''
	initParam.T_reporting_start_time = T_reporting_date.value ? T_reporting_date.value[0] : ''
	initParam.T_reporting_end_time = T_reporting_date.value ? T_reporting_date.value[1] : ''
	TableRef.value?.searchTable()
}

// 导出
const exportMyPercentageExcel = async () => {
	initParam.T_end_date = T_date.value ? T_date.value[1] : ''
	initParam.T_start_date = T_date.value ? T_date.value[0] : ''
	initParam.T_reporting_start_time = T_reporting_date.value ? T_reporting_date.value[0] : ''
	initParam.T_reporting_end_time = T_reporting_date.value ? T_reporting_date.value[1] : ''
	TableRef.value?.searchTable()
	const res: any = await percentage_User_Excel(initParam)
	if (res.Code === 200) {
		window.open(res.Data)
	}
}

const MyPercentageFormRef = ref<InstanceType<typeof MyPercentageForm> | null>(null)
const openContractFormDrawer = (type: string, row?: any) => {
	console.log('编辑', type, type, row)
	// MyPercentageFormRef.value?.VerifyltemApi()
	MyPercentageFormRef.value?.openDrawer(type, row)
}
const MyPercentageForm = defineAsyncComponent({
	loader: () => import(/*webpackChunkName: 'ContractForm'*/ './MyPercentageForm.vue'),
	delay: 500,
	timeout: 3000,
	suspensible: true
})
//函数
const processdel = (id: any) => {
	ElMessageBox.confirm('删除操作，是否继续?', '删除', {
			confirmButtonText: '立即删除',
			cancelButtonText: 'Cancel',
			type: 'warning',
			center: true,
		}
	).then(async () => {
		const reslut: any = await percentage_Del({T_id: id})
		console.log('删除', reslut)
		if (reslut.Code == 200 && reslut.Msg == 'ok!') {
			searchOnTableList(TableRef.value)
			ElMessage.success('删除成功！')
		}
	}).catch(() => {
		ElMessage.info('取消删除')
	})
}
</script>

<template>
	<div class="contract">
		<TableBase ref="TableRef" :columns="columns" :requestApi="percentage_UserList" :initParam="initParam">
			<template #table-header>
				<div class="input-suffix">
					<el-row :gutter="20" style="margin-bottom: 0">
						<el-col :xl="5" :lg="5" :md="5" style="display: flex">
							<span class="inline-flex items-center">回款日期：</span>
							<el-date-picker
								v-model="T_date"
								type="daterange"
								range-separator="~"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
							/>
						</el-col>
						<el-col :xl="5" :lg="5" :md="5" style="display: flex">
							<span class="inline-flex items-center">统计日期：</span>
							<el-date-picker
								v-model="T_reporting_date"
								type="daterange"
								range-separator="~"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
							/>
						</el-col>
						<el-col :xl="5" :md="5">
							<span class="inline-flex items-center">关键字：</span>
							<el-input v-model="initParam.T_name" type="text" class="w-50 m-2"
									  placeholder="按任务编号、公司名称搜索" clearable
									  @change="searchHandle"/>
						</el-col>
						<el-col :xl="6" :md="6">
							<span class="inline-flex items-center">状态：</span>
							<el-select v-model="initParam.T_state" class="w-50" clearable placeholder="请选择状态~">
								<el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"/>
							</el-select>
							<el-button type="primary" @click="searchHandle">搜索</el-button>
						</el-col>
						<el-col :xl="15" :lg="15" :md="15" style="margin-top: 10px">
							<el-button type="primary" @click="exportMyPercentageExcel">导出表格</el-button>
							<el-button type="success" @click="openContractFormDrawer('new')">申请提成</el-button>
						</el-col>
					</el-row>
				</div>
			</template>
			<template #T_type="{ row }">
				<el-tag v-if="row.T_type === 1" type="success" effect="dark"> 验证实施</el-tag>
				<el-tag v-if="row.T_type === 2" type="" effect="dark"> 报告编写</el-tag>
			</template>
			<template #T_State="{ row }">
				<el-tag v-if="row.T_State === 1" type="info" effect="dark"> 待审核</el-tag>
				<el-tag v-if="row.T_State === 2" type="success" effect="dark"> 审核通过</el-tag>
				<el-tag v-if="row.T_State === 3" type="danger" effect="dark"> 审核不通过</el-tag>
				<el-tag v-if="row.T_State === 4" type="info" effect="dark"> 部分打款</el-tag>
				<el-tag v-if="row.T_State === 5" type="" effect="dark"> 全部打款</el-tag>
				<el-tag v-if="row.T_State === 6" type="danger" effect="dark"> 未提交审核</el-tag>
			</template>
			<template #T_out="{ row }">
				<el-tag v-if="row.T_out === 2 || row.T_out === 3" type="success" effect="dark">
					{{ row.T_out === 2 ? '部分出库' : '已出库' }}
				</el-tag>
				<el-tag v-else-if="row.T_out === 1" type="warning" effect="dark"> 未出库</el-tag>
				<el-tag v-else type="danger" effect="dark"> ---</el-tag>
			</template>
			<template #T_verifyCompany_name="{ row }">
				{{ row.T_verifyCompany.T_name }}
			</template>
			<template #T_verifyCompany_State="{ row }">
				<el-tag v-if="row.T_verifyCompany.T_State === 1" type="info" effect="dark"> 未回款</el-tag>
				<el-tag v-if="row.T_verifyCompany.T_State === 2" type="success" effect="dark"> 已回款</el-tag>
			</template>
			<template #T_recoveries_time="{ row }">
				{{ row.T_verifyCompany.T_recoveries_time }}
			</template>
			<template #right="{ row }">
				<el-button link type="primary" size="small" :disabled="![3,6].includes(row.T_State)" :icon="Check"
						   @click="SubmitReview(row)">提交审核
				</el-button>
				<el-button link type="primary" size="small" :disabled="![1,3,6].includes(row.T_State)" :icon="Edit"

						   @click="openContractFormDrawer('edit', row)">编辑
				</el-button>
				<el-button link type="success" size="small" :icon="View" @click="processContract(row.Id,'详情')">详情
				</el-button>
				<el-button link type="danger" size="small" :disabled="![1,3,6].includes(row.T_State)" :icon="Delete"
						   @click="processdel(row.Id)">删除
				</el-button>
			</template>
		</TableBase>
		<MyPercentageForm ref="MyPercentageFormRef" @onTableList="updateOnTableList(TableRef)"/>
	</div>
</template>

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

.contract {
	@include f-direction;

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

	.input-suffix {
		width: 100%;

		.inline-flex {
			white-space: nowrap;
		}

		.btn {
			display: flex;
			justify-content: end;
		}

		.w-50 {
			width: 12.5rem;
		}

	}
}
</style>
