<!--
 * @Description: 投资类 集团产能报表填报
 * @Author: @liulin
 * @Date: 2023-02-28 15:30:53
 * @LastEditors: Do not edit
 * @LastEditTime: 2023-02-28 16:44:09
-->
<template>
	<div class="bbsl-common-page">
		<div class="bbsl-table-search 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>{{
				    $i18n.locale === 'zh-CN' ? compData.name : compData.nameEn
				}}</el-breadcrumb-item>
			</el-breadcrumb>
			<el-form ref="form" :inline="true" style="text-align: right;">
				<el-form-item :label="$t('common.year')">
					<el-date-picker v-model="querys[0].value" type="year" value-format="yyyy" @change="getData(1)"
						:placeholder="$t('domestic.tips') + $t('common.year')">
					</el-date-picker>
				</el-form-item>
			</el-form>
		</div>

		<div class="bbsl-table-content table-content" ref="contentPanel">
			<div class="bbsl-btn-content" ref="btnPanel"></div>
			<div :style="{height: '100%', maxHeight: this.tableMaxHeight + 'px','overflow-y': 'auto'}">
				<el-row class="indexListBoxRow">
					<el-col class="indexList_Add" @click.native="openAdd" v-if="statementData.authority.indexOf('edited')!==-1">
						<div class="table-add">
							<i class="el-icon-plus"> {{ $t('common.add') }}</i>
						</div>
					</el-col>

					<el-col class="indexList_box" v-for="(item, index) in tableData" :key="item.id"
						@dblclick.native="toEdit(item)" :class="{lastLine: (index + 2) % 5 == 0}">
						<!-- //若div盒子下标+1跟5取余为0，则代表这是最后一列，即第5列，则展示lastLine这个类名下的样式> -->
						<div class="card">
							<div class="card-cont">
								<div class="cont-left" style="font-size: 14px;">
									{{ item.fillYear
						            }}{{ $t('report.year') }}
								</div>
								<div class="cont-right">
									<div style="
						                    display: flex;
						                    justify-content: space-between;
						                ">
										<div class="right-text">
											{{ item.fillUser }}
										</div>
										<div class="card-state" :class="{
						                        active: item.status == 0,
						                    }">
											<span class="state-text">{{
						                        item.statusName
						                    }}</span>
										</div>
									</div>
									<div class="right-text info-weight">
										{{ item.fillYear }}
										{{
						                    $i18n.locale === 'zh-CN'
						                        ? '年'
						                        : 'Year'
						                }}
									</div>
								</div>
							</div>

							<div class="card-footer flex-between">
								<div class="info-sub">
									{{ item.fillDate }}
								</div>
								<div>
									<el-link type="danger" :underline="false" style="margin-right: 10px"
										@click="Delete(item)" v-if="statementData.authority.indexOf('del')!==-1">
										<i class="el-icon-delete-solid"></i>
										{{ $t('common.delete') }}
									</el-link>
									<el-link type="primary" :underline="false" @click="Release(item)" v-if="statementData.authority.indexOf('edited')!==-1">
										<i class="el-icon-s-promotion"></i>
										{{
						                    item.status == 0
						                        ? $t(
						                              'operationalKPI.release'
						                          )
						                        : $t(
						                              'operationalKPI.unpublish'
						                          )
						                }}
									</el-link>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>

			<el-pagination align="right" background class="bbsl-pagination" ref="paginationPanel"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryParam.pageBean.page" :page-sizes="[20, 30, 40, 50]"
				:page-size="queryParam.pageBean.pageSize" layout="total, prev, pager, next,sizes,jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 弹层 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleDialogClose"
			:close-on-click-modal="false">
			<el-form ref="form" :model="model" :rules="dialogRules" label-width="80px" label-position="top">
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item :label="$t('common.year')">
							<el-date-picker v-model="model.fillYear" type="year" value-format="yyyy"
								:placeholder="$t('domestic.tips') + $t('common.year')">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveData">
					{{ $t('common.save') }}
				</el-button>
				<el-button @click="handleDialogClose">
					{{ $t('common.cancel') }}
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import groupCapacity from '@/api/configureInfo/groupCapacity.js'
	export default {
		name: 'annualDecline',
		components: {},
		mixins: [TableMixin],
		props: {
			compData: {
				required: true,
				type: Object,
				default: () => {
					return null
				}
			}
		},
		data() {
			return {
				loading: false,
				tableData: [],
				multipleSelection: [],
				querys: [{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'fillYear',
						relation: 'AND',
						value: ''
					},
					{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'fillMonth',
						relation: 'AND',
						value: ''
					}
				],
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: 20
					}
				},
				total: 0,
				bbztList: [],
				dialogVisible: false,
				model: {
					fillYear: moment().format('YYYY'),
					// fillMonth: moment().format('M'),
					reportId: ''
				},
				title: '',
				dialogRules: {
					name: {
						required: true,
						message: this.$t('overseasEnterpriseInfo.input') +
							this.$t('overseasEnterpriseInfo.name'),
						trigger: 'blur'
					}
				}
			}
		},
		watch: {},

		created() {
			this.statementData=JSON.parse(window.localStorage.getItem("statementData"))
			if(window.localStorage.getItem('year')){
				this.querys[0].value=window.localStorage.getItem('year')
			}
			this.model.reportId = this.compData.id
			if (this.$i18n.locale === 'zh-CN') {
				this.bbztList = dictUtils.getDictItemsFromCache('bbzt')
			} else {
				this.bbztList = dictUtils.getDictItemsFromCache('bbzt_en')
			}
			this.getData()
		},
		mounted() {},
		methods: {
			//获取数据
			getData(page) {
				window.localStorage.setItem("year", this.querys[0].value);
				if (page) {
					this.queryParam.pageBean.page = page
				}
				this.loading = true
				this.tableData = []
				this.queryParam.querys = []
				if (this.querys[0].value) {
					this.queryParam.querys.push(this.querys[0])
				}
				if (this.querys[1].value) {
					this.queryParam.querys.push(this.querys[1])
				}
				groupCapacity.pageQuery(this.queryParam, res => {
					if (res.rows) {
						this.tableData = res.rows
						this.tableData.forEach(e => {
							this.bbztList.forEach(s => {
								if (e.status == s.value) {
									e.statusName = s.name
								}
							})
						})
						this.total = res.total
						this.$set(this.tableData)
						this.loading = false
					}
				})
			},

			//添加
			handleAdd() {
				this.$refs.kplDialog.add()
			},
			//修改
			handleDbClick(data) {
				this.$refs.kplDialog.edit(data.id)
			},
			//展示数量
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val
				this.getData()
			},
			//表格页数
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val
				this.getData()
			},
			callData() {
				this.getTree()
				this.getData()
			},
			Delete(val) {
				this.$confirm(
						this.$t('operationalKPI.deldata'),
						this.$t('common.delete'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'warning'
						}
					)
					.then(() => {
						groupCapacity.delDate(val.id, res => {
							if (res.state) {
								this.$notify({
									type: 'success',
									message: this.$t('domestic.success'),
									duration: 2000
								})
								this.getData()
							}
						})
					})
					.catch(() => {})
			},
			//发布
			Release(val) {
				this.$confirm(
						this.$t('operationalKPI.deldata'),
						this.$t('operationalKPI.release'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'warning'
						}
					)
					.then(() => {
						groupCapacity.editStatus({
								id: val.id
							},
							res => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: this.$t('domestic.success'),
										duration: 2000
									})
									this.getData()
								}
							}
						)
					})
					.catch(() => {})
			},
			openAdd() {
				this.dialogVisible = true
				this.title = this.$t('common.add')
			},
			handleDialogClose() {
				this.dialogVisible = false
			},
			//保存
			saveData() {
				groupCapacity.addData(this.model, res => {
					if (res.state) {
						this.$notify({
							type: 'success',
							message: this.$t('domestic.success'),
							duration: 2000
						})
						this.$router.push({
							path: 'groupCapacity/groupCapacityDetails',
							query:  {
								fillYear: this.model.fillYear,
								// fillMonth: this.model.fillMonth,
								name: '新增',
								id: res.value,
								reportId: this.compData.id,
								parentName: this.compData.name,
								parentNameEn: this.compData.nameEn,
							}
						})
					}
				})
			},
			//编辑
			toEdit(val) {
				this.$router.push({
					path: 'groupCapacity/groupCapacityDetails',
					query: {
						...val,
						parentName: this.compData.name,
						parentNameEn: this.compData.nameEn,
						reportId: this.compData.id
					},
				})
			},
			//返回上级
			goBlack() {
				this.$router.go(-1)
			}
		}
	}
</script>

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