<template>
	<!-- 收费查询-账单查询 -->
	<div class="white_bg burt-container custom-info">
		<!-- form -->
		<a-form-model ref="form" layout="vertical" :model="form">
			<a-row :gutter="30">
				<a-col :xl="4" :lg="6" :sm="12">
					<a-form-model-item label="保险公司">
						<a-select v-model="form.payorCode" placeholder="请选择" show-search allowClear
							:filterOption="filterCode">
							<a-select-option v-for="item in companyOptions" :key="item.payorCode" :value="item.payorCode">
								{{ item.longName }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="4" :lg="6" :sm="12">
					<a-form-model-item label="病案号">
						<a-input v-model="form.mrnNo" placeholder="请输入" allow-clear />
					</a-form-model-item>
				</a-col>
				<a-col :xl="4" :lg="6" :sm="12">
					<a-form-model-item label="客户名称">
						<a-input v-model="form.patientName" placeholder="请输入" allow-clear />
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="账单起止日期">
						<a-range-picker format="YYYY-MM-DD" format-value="YYYY-MM-DD" v-model="billRange"
							:placeholder="['开始时间', '结束时间']" @change="onSelectBillTime" />
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="回款起止日期">
						<a-range-picker format="YYYY-MM-DD" format-value="YYYY-MM-DD" v-model="returnRange"
							:placeholder="['开始时间', '结束时间']" @change="onSelectReturnTime" />
					</a-form-model-item>
				</a-col>
				<a-col :span="24" class="none-label">
					<a-form-model-item label="button">
						<a-button class="mar-left10" type="primary" @click="handlerReset">
							<Icon name="ssireset" :size="14" />重置
						</a-button>
						<a-button class="mar-left10" type="primary" @click="handlerSearch">
							<Icon name="ssisearch_active" :size="14" />查询
						</a-button>
						<a-button class="mar-left10" type="primary" @click="exportExcel">
							<Icon name="ssidaochu" :size="14" />导出
						</a-button>
					</a-form-model-item>
				</a-col>
			</a-row>
			<div class="total">
				<div class="mr40">
					共计 <span class="blue-text">{{ ciReceiptTotalVo.totalNum || 0 }}</span> 条
					<!-- <span v-if="ciReceiptTotalVo.invalidNum">，其中：无效 <span style="color: red;">{{ ciReceiptTotalVo.invalidNum || 0 }}</span> 条</span>	 -->
				</div>
				<div class="mr40">账单金额合计：<span class="blue-text">￥{{ ciReceiptTotalVo.actualAmountTotal || 0 }}</span></div>
				<div class="mr40">回款金额合计：<span class="blue-text">￥{{ ciReceiptTotalVo.paidAmountEobTotal || 0 }}</span></div>
				<div class="mr40">个人欠费合计：<span class="red-text">￥{{ ciReceiptTotalVo.arrearsAmountTotal || 0 }}</span></div>
			</div>
		</a-form-model>

		<!-- table -->
		<a-table :columns="columns" :data-source="dataList" :scroll="{ x: true }" :pagination="false" :rowKey="(record) => {
				record.id + record.backMoneyNo;
			}
			">
			<template slot="index" slot-scope="text, record, index">
				{{ index + 1 }}
			</template>
		</a-table>
		<!--分页-->
		<BurtPagination :pagination="pagination" @pageChange="getList" />
	</div>
</template>

<script>
import BurtPagination from '@/components/Customers/pagation';
import { exportFile } from '@/utils/index';

export default {
	data() {
		const columns = [
			{
				title: '序号',
				dataIndex: 'index',
				key: 'index',
				align: 'center',
				width: 80,
				scopedSlots: { customRender: 'index' }
			},
			{ title: '病历号', dataIndex: 'mrnNo', width: 120 },
			{ title: '客户姓名', dataIndex: 'patientName', width: 120 },
			{ title: '保险公司', dataIndex: 'payorName', width: 120 },
			{ title: '客户生日', dataIndex: 'birthday', width: 120 },
			{ title: '保险卡号', dataIndex: 'cardNo', width: 120 },
			{ title: '账单编号', dataIndex: 'receiptNo', width: 120 },
			{ title: '账单日期', dataIndex: 'receiptDate', width: 120 },
			{ title: '收银', dataIndex: 'receiptTellerName', width: 120 },
			{ 
				title: '账单金额', dataIndex: 'actualAmount', width: 120, 
				// customRender: val => <span class="blue-text">{val}</span> 
			},
			{ title: '回款金额', dataIndex: 'paidAmountEob', width: 120 },
			{
				title: '个人欠费',
				dataIndex: 'arrearsAmount',
				width: 120,
				customRender: (val) => {
					return <span style="color: red;">{val}</span>;
				}
			},
			{
				title: '备注',
				dataIndex: 'remark',
				width: 180,
				customRender: (val) => {
					return <span style="color: red;">{val}</span>;
				}
			},
			{ title: '回款日期', dataIndex: 'eobBackDate', width: 120 },
			{ title: '回款编号', dataIndex: 'backMoneyNo', width: 120 },
			{ title: 'EOB号', dataIndex: 'eobNo', width: 120 },
			{ title: 'EOB备注', dataIndex: 'eobName', width: 120 },
			{ title: '账龄', dataIndex: 'diffDay', width: 120 }
		];
		return {
			columns,
			billRange: null,
			returnRange: null,
			ciReceiptTotalVo:{},
			form: {
				payorCode: '',
				mrnNo: '',
				patientName: '',
				receiptDateStart: '',
				receiptDateEnd: '',
				eobBackDateStart: '',
				eobBackDateEnd: ''
			},
			pageForm: {}, // 搜索form

			companyOptions: [], //保险公司
			dataList: [],
			pagination: {
				pageNum: 1,
				pageSize: 10,
				total: 0
			}
		};
	},
	components: {
		BurtPagination
	},
	created() {
		this.getList();
		this._getCompanyOptions();
	},
	methods: {
		// 选择框筛选
		filterCode(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		// 获取未清余额合计
		getBackMoneyReportCount() {
			this.$apis.backMoneyReportCount({
				...this.pageForm,
				...this.pagination
			}).then((res) => {
				if (res.returnCode == '0000') {
					console.log(res.content)
					this.ciReceiptTotalVo = res.content
				}
			});
		},
		// 获取列表数据
		getList() {
			const data = {
				...this.pageForm,
				...this.pagination
			};
			this.$apis.backMoneyReport(data).then((res) => {
				let content = res.content || {};
				this.dataList = content.list || [];
				this.getBackMoneyReportCount()
				this.pagination.total = content.total || 0;
			});
		},
		// 获取保险公司下拉选项
		_getCompanyOptions() {
			this.$apis.getCompanyOptions().then((res) => {
				this.companyOptions = res.content || [];
			});
		},

		onSelectBillTime(date, dateString) {
			this.form.receiptDateStart = dateString[0] ? dateString[0] + ' 00:00:00' : '';
			this.form.receiptDateEnd = dateString[1] ? dateString[1] + ' 23:59:59' : '';
		},
		onSelectReturnTime(date, dateString) {
			this.form.eobBackDateStart = dateString[0] ? dateString[0] + ' 00:00:00' : '';
			this.form.eobBackDateEnd = dateString[1] ? dateString[1] + ' 23:59:59' : '';
		},

		// 重置
		handlerReset() {
			this.form = {};
			this.returnRange = null;
			this.billRange = null;
		},

		// 搜索
		handlerSearch() {
			this.$refs.form.validate((valid) => {
				if (!valid) {
					return false;
				}
				this.pagination.pageNum = 1;
				this.pageForm = this.$lodash.cloneDeep(this.form);
				this.getList();
			});
		},

		//导出报表
		exportExcel() {
			let filter = {
				...this.form
			};
			this.$apis.exportBackMoneyReport(filter).then((res) => {
				exportFile(res, '账单回款报表.xls');
			});
		}
	}
};
</script>
<style lang="less" scoped>
.none-label {
	text-align: left;

	.ant-form-item-label {
		opacity: 0;
	}
}
.total{
	font-size: 14px;
	display: flex;
	margin-bottom: 14px;
}

.mr40{
	margin-right: 40px;
}

.ant-btn .icon-class {
	.mg-r(10);
}
</style>