<template>
	<div>
		<SearchBox ref="SearchBoxRef" formName="query" :formData="query" @PopupNo="PopupNo" @reset="reset">
		</SearchBox>

		<ButtonBar @search="handleSearch"></ButtonBar>

		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange"
				height="63vh">
				<el-table-column type="selection" fixed></el-table-column>
				<el-table-column type="index" label="序号" align="center" width="60" fixed>
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="contrNo" label="合同编号" width="150" header-align="center"
					align="center" show-overflow-tooltip fixed>
				</el-table-column>
				<el-table-column v-if="true" prop="contrNm" label="合同名称" width="180" header-align="center"
					align="center" show-overflow-tooltip fixed>
				</el-table-column>
				<el-table-column v-if="true" prop="supplierNm" label="交易方名称" width="250" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="contrTy" label="合同类型" width="100" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="conSts" label="合同状态" width="120" header-align="center" align="center"
					show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="khContrNo" label="对方合同编号" width="150" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="approveDt" label="审批结束时间" width="150" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="delvDate" label="预计交货日期" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="invMth" label="结算方式" width="100" header-align="center" align="center"
					show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="analyDataAccord" label="化验结算依据" width="120" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="weightDataAccord" label="计量结算依据" width="120" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="priceDcnMth" label="定价方式" width="100" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="delvMth" label="交货方式" width="100" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="delvPlace" label="交货地点" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="ifAnnual" label="是否长协" width="100" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="ifBid" label="是否招投标" width="100" header-align="center" align="center"
					show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="false" prop="salMth" label="销售方式" width="100" header-align="center" align="center"
					show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="signReqNo" label="签约请示" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="totalAmt" label="合同金额" width="100" header-align="center"
					align="right" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="qty" label="重量" width="120" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="contrReq" label="合同要求" width="100" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="contrDt" label="合同日期" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="checkYn" label="争议所在地法院" width="150" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="riskInfo" label="风险提示" width="100" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="tempNm" label="合同模板名称" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="addTime" label="录入日期" width="120" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="addName" label="录入人" width="100" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="200px" fixed="right">
					<template #default="scope">
						<el-button plain type="warning" @click="handleEdit(scope.row)">填入合同时间</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
				background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</el-card>


		<el-dialog :close-on-click-modal="false" draggable title="填入合同时间" v-model="dialogVisible" width="800px"
			top="5vh" @open="openDialog">
			<el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
				<el-form-item label="合同日期" prop="contrDt">
					<el-date-picker v-model="form.contrDt" type="date" style="width: 200px;" value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>

			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button plain type="success" @click="handleSave(ruleFormRef)">保存</el-button>
					<el-button plain type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>
		</el-dialog>


	</div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'

import {
	ref,
	reactive,
	onMounted,
	getCurrentInstance
} from 'vue'

const {
	proxy
} = getCurrentInstance()

import tools from '@/tools'
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)


import Attachment from '@/components/Attachment.vue'

onMounted(() => {
	// getMenuTable()
	getDictList()
	handleSearch()
})


/**
 * 查询公司代码
 */
const userId = window.localStorage.getItem('userId')
const userCode = window.localStorage.getItem('userCode')
const userName = window.localStorage.getItem('userDesc')
const dept = JSON.parse(window.localStorage.getItem('dept'))
const deptTree = JSON.parse(window.localStorage.getItem('deptTree'))
/**
 * 查询公司代码
 */


/**
 * 查询表格字段
 */
// const column = ref([])
// const getMenuTable = () => {
// 	var url = 'framework/MenuTable/queryMenuTable'
// 	var param = {
// 		menuId: localStorage.getItem('menuId'),
// 		tName: 'tableDate'
// 	}
// 	proxy.$axios.post(url, param).then(response => {
// 		if (response.data.code == '0') {
// 			column.value = response.data.data
// 		} else {
// 			ElMessage({
// 				type: 'error',
// 				message: '操作失败' + response.data.msg,
// 			});
// 		}
// 	});
// }
/**
 * 查询表格
 */

/**
 *  查询字典
 */
const dicList = ref({
	CONTRACT_TYPE: [],
	contrSts: [],
	SAL_INV_MTH: [],
	PRICE_DCN_MTH: [],
	DELV_MTH: [],
	WEIGHT_DATA_ACCORD: [],
	ANALY_DATA_ACCORD: [],
	SAL_SAL_MTH: [],
	COM_YN: [],
	CHECK_YN: []
})
const getDictList = () => {
	var url = 'framework/Common/querySelectorList'
	var param = {
		type: JSON.stringify(['CONTRACT_TYPE', 'contrSts', 'SAL_INV_MTH', 'PRICE_DCN_MTH', 'DELV_MTH', 'WEIGHT_DATA_ACCORD', 'ANALY_DATA_ACCORD', 'SAL_SAL_MTH', 'COM_YN', 'CHECK_YN'])
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			dicList.value = response.data.data
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}
const formatter = (row, column, cellValue, index) => {
	if (!cellValue || cellValue == null || cellValue == '') {
		return cellValue
	}
	switch (column.property) {
		case 'contrTy':
			cellValue = dicList.value.CONTRACT_TYPE.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'conSts':
			cellValue = dicList.value.contrSts.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'invMth':
			cellValue = dicList.value.SAL_INV_MTH.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'priceDcnMth':
			cellValue = dicList.value.PRICE_DCN_MTH.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'delvMth':
			cellValue = dicList.value.DELV_MTH.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'weightDataAccord':
			cellValue = dicList.value.WEIGHT_DATA_ACCORD.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'analyDataAccord':
			cellValue = dicList.value.ANALY_DATA_ACCORD.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'salMth':
			cellValue = dicList.value.SAL_SAL_MTH.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'ifAnnual':
			cellValue = dicList.value.COM_YN.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'ifBid':
			cellValue = dicList.value.COM_YN.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'checkYn':
			cellValue = dicList.value.CHECK_YN.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'addTime':
			cellValue = cellValue.split(' ')[0]
			break
	}

	return cellValue
}
/**
 *  查询字典
 */


/**
 *   查询
 */
const query = ref({
	contrTy: '',
	contrNo: '',
	contrNm: '',
	khContrNo: '',
	supplierNm: '',
	contrDt: '',
	conSts: ['B']
})
const tableData = ref([])
const handleSearch = () => {
	currentPage.value = 1
	getTableData()
}

const getTableData = () => {
	var url = 'cot/Head/query'
	var param = {
		page: currentPage.value,
		rows: pageSize.value,
		params: JSON.stringify(query.value)
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			tableData.value = response.data.data.records
			totalRows.value = response.data.data.total
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}
/**
 *   查询
 */

/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const handleSizeChange = (val) => {
	pageSize.value = val
	getTableData()
}
const handleCurrentChange = (val) => {
	currentPage.value = val
	getTableData()
}
/**
 * 分页
 */



const dialogVisible = ref(false)
const form = ref({
	contrNo: '',
	dataAccord: '',
	approveDt: '',
	checkYn: '',
	riskInfo: '',
	conSts: '',
	signReqNo: '',
	delvDays: '',
	delvDate: '',
	priceDcnMth: '',
	signReqId: '',
	ifAnnual: '',
	delvMth: '',
	contrForm: '',
	processInstanceStatus: '',
	processInstanceId: '',
	ifBid: '',
	tempNm: '',
	invMth: '',
	toPlace: '',
	fromPlace: '',
	tempId: '',
	totalAmt: '',
	qty: '',
	contrSts: '',
	remark: '',
	contrReq: '',
	delvPlace: '',
	trsMth: '',
	salMth: '',
	contrDt: '',
	deptNm: '',
	deptCd: '',
	supplierNm: '',
	supplierCd: '',
	supplierId: '',
	contrNm: '',
	khContrNo: '',
	addTime: ''
})
const ruleFormRef = ref()
const rules = reactive({
	contrDt: [{
		required: true,
		message: '请输入合同日期',
		trigger: 'change' | 'blur'
	}],
})

const openDialog = () => {
}
const handleSave = (ruleFormRef) => {
	ruleFormRef.validate((valid, fields) => {
		if (valid) {
			var url = 'cot/Head/save'
			var param = {
				json: JSON.stringify(form.value),
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					form.value = response.data.data
					ElMessage({
						message: '保存成功',
						type: 'success',
					})
					getTableData()
					dialogVisible.value = false
				} else {
					ElMessage({
						message: '操作失败' + response.data.msg,
						type: 'error'
					})
				}
			})

		} else {
			console.log('error submit!', fields)
		}
	})
}
const handleCancelSave = () => {
	dialogVisible.value = false
}
const handleEdit = (row) => {
	if (ruleFormRef.value) {
		ruleFormRef.value.resetFields()
	}
	form.value = { ...row }
	dialogVisible.value = true
}
</script>


<style></style>