<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-item :label="$t('common.quarter')">
                    <el-select v-model="querys[1].value" :placeholder="
                            $t('domestic.tips') + $t('common.quarter')
                        ">
                        <el-option v-for="item in quarters" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button icon="el-icon-search" type="primary" class="btn btn-plus" @click="getData(1)">
                    {{ $t('common.search') }}
                </el-button> -->
			</el-form>
		</div>
		<el-row :gutter="10" class="card-list flex">
			<el-col class="card-list-container" style="width: 100%" ref="contentPanel">
				<div class="bbsl-btn-content" ref="btnPanel"></div>
				<div :style="{
                        height: this.tableMaxHeight + 'px',
                        overflow: '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">
										<template v-if="compData.fillRate=='year'">
											{{ item.fillYear}}
											<span style="font-size: 16px;">
												{{ $t('common.year') }}
											</span>
										</template>
										<template v-if="compData.fillRate=='quarter'">
											{{ item.fillQuarter}}
											<span style="font-size: 16px;">
												{{ $t('common.quarter') }}
											</span>
										</template>
										<template v-if="compData.fillRate=='month'">
											{{ item.fillMonth}}
											<span style="font-size: 16px;">
												{{ $t('common.month') }}
											</span>
										</template>
										<template v-if="compData.fillRate=='week'">
											{{ item.fillWeek}}
											<span style="font-size: 16px;">
												{{ $t('report.week') }}
											</span>
										</template>
									</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'
                                            ? '年'
                                            : ''
                                            }}
										</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="warning" :underline="false" style="margin-right: 10px"
											@click="Edit(item)" v-if="statementData.authority.indexOf('edited')!==-1">
											<i class="el-icon-edit"></i>
											{{ $t('common.edit') }}
										</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 style="margin-top: 10px" 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>
			</el-col>
		</el-row>
		<!-- 弹层 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :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="24">
					<el-col :span="6">
						<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-col :span="6">
						<el-form-item :label="$t('common.quarter')">
							<el-select v-model="model.fillQuarter" :placeholder="
                                    $t('domestic.tips') + $t('common.quarter')
                                ">
								<el-option v-for="item in quarters" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item :label="$t('sasac.fillCompany')">
							<el-input v-model="model.fillCompany" :placeholder="
					                $t('domestic.tips') + $t('sasac.fillCompany')
					            "></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item :label="$t('sasac.tel')">
							<el-input v-model="model.tel" :placeholder="
					                $t('domestic.tips') + $t('sasac.tel')
					            "></el-input>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item :label="$t('sasac.lastYearAvgRate')">
							<el-input v-model="model.lastYearAvgRate" :placeholder="
                                    $t('domestic.tips') + $t('sasac.lastYearAvgRate')
                                "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('sasac.lastYearEndRate')">
							<el-input v-model="model.lastYearEndRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.lastYearEndRate')
					            "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('sasac.lastYearYtdAvgRate')">
							<el-input v-model="model.endRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.lastYearYtdAvgRate')
					            "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('sasac.lastYearYtdEndRate')">
							<el-input v-model="model.lastYearYtdEndRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.lastYearYtdEndRate')
					            "></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item :label="$t('sasac.yearAvgRate')">
							<el-input v-model="model.yearAvgRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.yearAvgRate')
					            "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('sasac.yearEndRate')">
							<el-input v-model="model.yearEndRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.yearEndRate')
					            "></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('sasac.yearYtdAvgRate')">
							<el-input v-model="model.yearYtdAvgRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.yearYtdAvgRate')
					            "></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item :label="$t('sasac.yearYtdEndRate')">
							<el-input v-model="model.yearYtdEndRate" :placeholder="
					                $t('domestic.tips') + $t('sasac.yearYtdEndRate')
					            "></el-input>
						</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 gzwzh from '@/api/configureInfo/gzwzh.js'

	export default {
		name: 'gzwzh',
		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: moment().format('YYYY'),
					},
					{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'fillQuarter',
						relation: 'AND',
						value: '',
					},
				],
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: 20,
					},
					sorter: [{
							direction: 'ASC',
							property: 'fillYear',
						},
						{
							direction: 'ASC',
							property: 'fillQuarter',
						},
					],
				},
				//季度
				quarters: [{
					label: '第一季度',
					value: 1
				}, {
					label: '第二季度',
					value: 2
				}, {
					label: '第三季度',
					value: 3
				}, {
					label: '第四季度',
					value: 4
				}, ],
				weekVal: '',
				total: 0,
				bbztList: [],
				dialogVisible: false,
				model: {
					fillYear: moment().format('YYYY'),
					fillQuarter: '',
					lastYearAvgRate: '',
					lastYearEndRate: '',

					lastYearYtdAvgRate: '',
					lastYearYtdEndRate: '',

					yearAvgRate: '',
					yearEndRate: '',

					yearYtdAvgRate: '',
					yearYtdEndRate: '',
					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: {
			setWeekNum() {
				var moment = require("moment");
				//注意，当返回值是中国标准时间的格式时使用moment.js的时候一定要加上.utcOffset(480)，用来转换时区
				this.model.fillWeek = moment(this.weekNum).utcOffset(480).format("WW")
				console.log(this.weekVal)
			},

			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])
				}
				gzwzh.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
					}
				})
			},
			//展示数量
			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(() => {
						gzwzh.delDate(val.id, (res) => {
							if (res.state) {
								this.$notify({
									type: 'success',
									message: this.$t('domestic.success'),
									duration: 2000,
								})
								this.getData()
							}
						})
					})
					.catch(() => {})
			},
			//编辑
			Edit(val) {
				this.title = this.$t('common.edit')
				this.dialogVisible = true
				gzwzh.detailId(val.id, res => {
					if (res) {
						this.model = res
					}
				})
			},
			//发布
			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(() => {
						gzwzh.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
				this.model = {
					fillYear: moment().format('YYYY'),
					fillQuarter: '',
					lastYearAvgRate: '',
					lastYearEndRate: '',

					lastYearYtdAvgRate: '',
					lastYearYtdEndRate: '',

					yearAvgRate: '',
					yearEndRate: '',

					yearYtdAvgRate: '',
					yearYtdEndRate: '',
					reportId: ''
				}
			},
			//保存
			saveData() {
				if (this.title == '添加' || this.title == 'Add') {
					gzwzh.addData(this.model, (res) => {
						if (res.state) {
							this.$notify({
								type: 'success',
								message: this.$t('domestic.success'),
								duration: 2000,
							})
							this.handleDialogClose()
							this.$router.push({
								path: 'gzwzh/gzwzhDetails',
								query: {
									fillYear: this.model.fillYear,
									fillMonth: this.model.fillMonth,
									fillWeek: this.model.fillWeek,
									name: '新增',
									id: res.value,
									reportId: this.compData.id,
									parentName: this.compData.name,
									parentNameEn: this.compData.nameEn,
								},
							})
						}
					})
				} else {
					gzwzh.edit(this.model, (res) => {
						if (res.state) {
							this.$notify({
								type: 'success',
								message: this.$t('domestic.success'),
								duration: 2000,
							})
							this.handleDialogClose()
							// this.$router.push({
							// 	path: 'gzwzh/gzwzhDetails',
							// 	query: {
							// 		fillYear: this.model.fillYear,
							// 		fillMonth: this.model.fillMonth,
							// 		fillWeek: this.model.fillWeek,
							// 		name: '新增',
							// 		id: res.value,
							// 		reportId: this.compData.id,
							// 		parentName: this.compData.name,
							// 		parentNameEn: this.compData.nameEn,
							// 	},
							// })
						}
					})
				}

			},
			//编辑
			toEdit(val) {
				val.reportId = this.compData.id
				this.$router.push({
					path: 'gzwzh/gzwzhDetails',
					query: {
						...val,
						parentName: this.compData.name,
						parentNameEn: this.compData.nameEn,
						fillRate: this.compData.fillRate
					},
				})
			},
			//返回上级
			goBlack() {
				this.$router.go(-1)
			},
		},
	}
</script>

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