<template>
	<div class="bbsl-common-page"  v-loading="loading">
		<div class="bbsl-table-search">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/platLayout/reportFilling'}">{{
                    $t('report.rootNode')
                }}</el-breadcrumb-item>
				<el-breadcrumb-item :to="{
                        path:
                            '/platLayout/reportFillingComp?id=' +
                            this.$route.query.reportId,
                    }">
					{{
                        $i18n.locale === 'zh-CN'
                            ? this.$route.query.parentName
                            : this.$route.query.parentNameEn
                    }}
				</el-breadcrumb-item>
				<el-breadcrumb-item>{{ this.$route.query.fillYear }}-<span v-if="this.$route.query.fillRate=='quarter'">{{this.$route.query.fillQuarter}}{{ $t('common.quarter') }}</span>
				<span v-if="this.$route.query.fillRate=='year'">{{this.$route.query.fillYear}}{{ $t('common.year') }}</span>
				<span v-if="this.$route.query.fillRate=='month'">{{this.$route.query.fillMonth}}{{ $t('common.month') }}</span>
				<span v-if="this.$route.query.fillRate=='week'">{{this.$route.query.fillWeek}}{{ $t('common.week') }}</span>
				<!-- {{
                        this.$route.query.fillMonth < 10 ? '0' : ''
                    }}{{ this.$route.query.fillMonth }} -->
					{{ $t('report.detailNode') }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-row :gutter="10" class="card-table flex">
			<el-col class="card-table-container" style="width: 100%" ref="contentPanel">
				<div class="bbsl-btn-content" ref="btnPanel">
					<el-button icon="el-icon-plus" type="primary" class="btn btn-plus" @click="handleSave" v-if="statementData.authority.indexOf('edited')!==-1"
						:disabled="!hasData">
						{{ $t('common.save') }}
					</el-button>
					<el-button type="success" icon="el-icon-upload" @click="importKPL" v-if="statementData.authority.indexOf('edited')!==-1">{{ $t('common.import') }}
					</el-button>
					<el-button type="warning" icon="el-icon-download" @click="exportKPL">
						{{ $t('common.export') }}
						<!-- <a :href="actionUrl+'/qf/operation/kpi/export'" target="_blank">导出</a> -->
					</el-button>
					<el-button type="info" icon="el-icon-download">
						<a :href="actionUrl + '/qf/finance/liquidity/downModel'"
							target="_blank">{{ $t('report.downLoad') }}</a>
					</el-button>
				</div>

				<el-table border size="mini" v-if="hasData" :data="tableData" v-loading="loading"
					ref="multipleSelection" :style="{width: '100%'}" :max-height="tableMaxHeight"
					:header-cell-style="{'text-align': 'center'}">

					<el-table-column v-for="(value, key) in tableHearder" :key="key" :prop="key" :label="key"
						min-width="80" align="center">
						<!-- <template v-slot="{row}">
                            <el-input
                                v-model.trim="row[key]"
                                @change="
                                    (val) =>
                                        changeData(val, row.subjectCode, key)
                                "
                            />
                        </template> -->
					</el-table-column>
				</el-table>
				<el-empty v-if="!loading && !hasData" :description="$t('report.importTemp')">
					<el-button type="success" icon="el-icon-upload" @click="importKPL">{{ $t('common.import') }}
					</el-button>
				</el-empty>
				<el-col ref="paginationPanel"></el-col>
			</el-col>
		</el-row>
		<!-- 导入弹框 -->
		<el-dialog :title="$t('common.import')" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" v-loading="dialogloading" element-loading-text="拼命导入中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-upload class="upload-demo" drag :show-file-list="false"
				:action="actionUrl + '/qf/finance/liquidity/importExcel'" :data="uploadData"
				:on-success="handleAvatarSuccess"  :on-progress="handleProgress"
				:on-error="handleAvatarError"  :headers="header">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">
					{{ $t('report.importTips')
                    }}<em>{{ $t('report.importTipsLoad') }}</em>
				</div>
			</el-upload>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import weeklyFundsPlan from '@/api/configureInfo/weeklyFundsPlan.js'
	export default {
		name: 'weeklyFundsPlanDetails',
		components: {},
		mixins: [TableMixin],
		data() {
			return {
				hasData: false,
				loading: false,
				dialogloading: false,
				tableData: [],
				tableHearder: {}, // 表头
				multipleSelection: [],
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
				},
				total: 0,
				jbList: [],
				parentId: 0,
				sortList: {},
				title: '',
				id: '',
				dialogVisible: false,
				actionUrl: '',
				uploadData: {
					mainId: '',
				},
				modifyData: {},
			}
		},
		watch: {},

		created() {
			this.statementData=JSON.parse(window.localStorage.getItem("statementData"))
			if (this.$i18n.locale === 'zh-CN') {
				this.jbList = dictUtils.getDictItemsFromCache('jb')
			} else {
				this.jbList = dictUtils.getDictItemsFromCache('jb_en')
			}
			this.actionUrl = window.context.portal
			console.log(this.$route.query)
			this.title = this.$route.query.name ? this.$route.query.name : '编辑'
			this.id = this.$route.query.id
			this.uploadData.mainId = this.$route.query.id
			this.title == '编辑' ? this.getData() : ''
		},
		computed: mapState({
			header: (state) => {
				return {
					Authorization: `Bearer ${state.login.currentUser.token}`,
				}
			},
		}),
		mounted() {},
		methods: {
			changeData(value, code, column) {
				if (this.modifyData[code]) {
					this.modifyData[code][column] = value
				} else {
					this.modifyData[code] = {
						[column]: value,
					}
				}
			},
			//获取数据
			getData() {
				this.loading = true
				this.queryParam.querys = [{
					group: 'main',
					operation: 'EQUAL',
					parentGroup: '',
					property: 'mainId',
					relation: 'AND',
					value: this.id,
				}, ]

				weeklyFundsPlan.headerDetailQuery(this.queryParam, (res) => {
					console.log(res)
					if (res.state) {
						console.log(res)
						let length = res.value.length
						if (length) {
							this.hasData = true
							this.tableHearder = res.value[0]
							delete this.tableHearder.subjectName
							delete this.tableHearder.subjectCode
							delete this.tableHearder.subjectUnit
							delete this.tableHearder.subjectLevel
							res.value.splice(0, 1)
							this.tableData = res.value
							let tempData = res.value
							tempData.forEach((item) => {
								let space = ''
								let level = parseInt(item.subjectLevel)
								if (level) {
									for (let i = 1; i <= level; i++) {
										space += '\xa0'
									}
								}
								item.subjectName = space + item.subjectName
							})
							this.$set(this.tableData)
						} else {
							this.hasData = false
						}
					}
					this.loading = false
				})
			},

			//保存
			handleSave() {
				let keys = Object.keys(this.modifyData)
				if (!keys.length) {
					this.$message({
						message: this.$t('report.unchanged'),
						type: 'warning',
					})
				} else {
					let dataUpload = []
					for (let key in this.modifyData) {
						for (let valKey in this.modifyData[key]) {
							let obj = {}
							obj.subjectCode = key
							obj.enterpriseCode = valKey
							obj.actualYtd = this.modifyData[key][valKey]
							dataUpload.push(obj)
						}
					}
					weeklyFundsPlan.batchUpdateData({
							id: this.id,
							list: dataUpload,
						},
						(res) => {
							if (res.state) {
								this.$notify({
									type: 'success',
									message: this.$t('domestic.success'),
									duration: 2000,
								})
								this.getData()
								// this.$router.go(-1)
							}
						}
					)
				}
			},
			handleClose() {
				this.dialogVisible = false
			},
			//导出
			exportKPL() {
				weeklyFundsPlan.export(this.queryParam, (res) => {})
			},
			//导入运营kpl数据
			importKPL() {
				if (!this.tableData.length) {
					this.dialogVisible = true
				} else {
					this.$confirm(
							this.$t('report.importCoverTips'),
							this.$t('common.tips'), {
								confirmButtonText: this.$t('common.confirm'),
								cancelButtonText: this.$t('common.cancel'),
								type: 'warning',
							}
						)
						.then(() => {
							this.dialogVisible = true
						})
						.catch(() => {})
				}
			},
			//上传成功
			handleAvatarSuccess(res, file) {
				this.dialogVisible = false
				this.dialogloading = false
				this.$notify({
					type: 'success',
					message: this.$t('domestic.success'),
					duration: 2000,
				})
				this.getData()
			},
			handleAvatarError(err, file, fileList) {
				this.dialogVisible = false
				this.dialogloading = false
				this.$notify({
					type: 'error',
					message: this.$t('domestic.failure'),
					duration: 2000,
				})
			},
			handleProgress(event, file, fileList) {
				this.dialogloading = true
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/fillDetail.scss";
</style>
