<template>
	<div class="full-body">
		<div class="head-search" ref="headSearch">
			<div class="left">
				<el-tabs v-model="activeName" @tab-click="handleTabsClick">
					<el-tab-pane v-for="item in conditions" :key="item.id" :name="item.value">
						<span slot="label" class="flex">
							<i v-if="item.color" class="icon-circle" :style="{backgroundColor: item.color}"></i>
							{{ item.title }}
						</span>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div class="center">
				<el-form ref="form" @submit.native.prevent :model="searchForm"
					:label-width="$i18n.locale === 'zh-CN' ? '90px' : '120px'">
					<el-form-item :label="$t('reportManagement.searchName')">
						<el-input v-model="searchForm.name" clearable :placeholder="this.$t('navigator.searchTip')"
							@keyup.enter.native="handleSearch"></el-input>
					</el-form-item>
				</el-form>
				<el-button icon="el-icon-search" type="primary" plain class="addBtn" @click="handleSearch">
					{{ this.$t('common.search') }}
				</el-button>
				<el-button class="addBtn" icon="el-icon-plus" type="primary" plain @click="handleReportAdd">
					{{ $t('common.add') }}
				</el-button>
			</div>
		</div>
		<div class="container" v-loading="loading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
			<template v-if="reportFormData.length !== 0">
				<div v-for="(i, index) in reportFormData" :key="index">
					<div class="item_title">
						<template v-if="$i18n.locale === 'zh-CN'">
							{{ getDictName('bblx', i.tyep) }}
						</template>
						<template v-else>
							{{ getDictName('bblx_en', i.tyep) }}
						</template>
					</div>
					<div class="card-container">
						<div class="item-card" v-for="(item, index) in i.child" :key="index">
							<div class="item-card-header">
								<div v-if="item.flag == 0" class="item_img">
									<i v-if="item.fillRate === 'dynamic'" class="cqlt-icon cqlt-icon-jibao"></i>
									<i v-else-if="item.fillRate === 'day'" class="cqlt-icon cqlt-icon-ribao1"></i>
									<i v-else-if="item.fillRate === 'week'" class="cqlt-icon cqlt-icon-zhoubao1"></i>
									<i v-else-if="item.fillRate === 'month'" class="cqlt-icon cqlt-icon-yuebao1"></i>
									<i v-else-if="item.fillRate === 'quarter'" class="cqlt-icon cqlt-icon-jidu"></i>
									<i v-else-if="item.fillRate === 'year'" class="cqlt-icon cqlt-icon-nian"></i>
								</div>
								<div v-else class="item_img bg">
									<i v-if="item.fillRate === 'dynamic'" class="cqlt-icon cqlt-icon-jibao"></i>
									<i v-else-if="item.fillRate === 'day'" class="cqlt-icon cqlt-icon-ribao1"></i>
									<i v-else-if="item.fillRate === 'week'" class="cqlt-icon cqlt-icon-zhoubao1"></i>
									<i v-else-if="item.fillRate === 'month'" class="cqlt-icon cqlt-icon-yuebao1"></i>
									<i v-else-if="item.fillRate === 'quarter'" class="cqlt-icon cqlt-icon-jidu"></i>
									<i v-else-if="item.fillRate === 'year'" class="cqlt-icon cqlt-icon-nian"></i>
								</div>
								<div class="info">
									<div class="operation-btn">
										<el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false"
											class="operation-btn-link" @click="handleReportDelete(item.id)">
											{{ $t('common.delete') }}
										</el-link>

										<el-link icon="el-icon-s-promotion" type="primary" :underline="false"
											class="operation-btn-link" style="margin-left: 10px"
											@click="handleReportRelease(item)">
											{{ $t('common.release') }}
										</el-link>
									</div>
									<div class="item_text" @click="handleReportEdit(item)">
										<el-link :underline="false" v-if="$i18n.locale === 'zh-CN'">{{ item.name }}
										</el-link>
										<el-link :underline="false" v-else>{{
                                            item.nameEn
                                        }}</el-link>
									</div>
								</div>
							</div>
							<div class="option-btn">
								<el-link icon="el-icon-document-copy" type="primary" :underline="false"
									class="cloumn-btn-link" @click.stop="handleFill('auth', item.id)">
									{{ $t('reportManagement.auth') }}
								</el-link>
								<el-link icon="el-icon-document-copy" type="primary" :underline="false" v-if="i.tyep==3"
									class="cloumn-btn-link" @click.stop="handleFill('rang', item.id)">
									{{ $t('reportManagement.rang') }}
								</el-link>
								<el-link icon="el-icon-document-copy" type="primary" :underline="false" v-if="i.tyep==3"
									class="cloumn-btn-link" @click.stop="handleFillSubject(item.id)">
									{{ $t('reportManagement.subject') }}
								</el-link>
							</div>
						</div>
					</div>
				</div>
			</template>
			<el-empty v-else :description="$t('common.empty')"></el-empty>
		</div>

		<!-- 弹层 -->
		<el-dialog :title="dialog.title" :visible.sync="dialog.visible" :before-close="handleDialogClose" width="50%"
			:close-on-click-modal="false">
			<div class="dialog-header">
				<!-- <el-form ref="form" :model="searchForm" label-width="60px">
          <el-form-item label="关键字">
            <el-input
              v-model="searchForm.name"
              clearable
              :placeholder="this.$t('navigator.searchTip')"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-divider direction="vertical" class="line"></el-divider> -->
				<div>
					<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
						{{ this.$t('common.add') }}
					</el-button>
					<el-button slot="reference" icon="el-icon-delete" type="danger" class="btn-delete"
						:disabled="!deleteIds" @click="handleDelete">
						{{ this.$t('common.delete') }}
					</el-button>
				</div>
			</div>

			<el-table :data="tableData" style="width: 100%" :max-height="450" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="code" width="100" align="center" v-if="btnKey !== 'auth'"
					:label="$t('reportManagement.code')">
				</el-table-column>
				<el-table-column v-if="$i18n.locale === 'zh-CN'" prop="name" align="center"
					:label="$t('reportManagement.name')">
				</el-table-column>
				<el-table-column v-else prop="nameEn" align="center" :label="$t('reportManagement.nameEn')">
				</el-table-column>
				<template v-if="btnKey == 'auth'">
					<el-table-column prop="authority" align="center" :label="$t('reportManagement.authority')">
						<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
							{{ formatAuth('bbqx', row.authority) }}
						</template>
						<template v-else v-slot="{row}">
							{{ formatAuth('bbqx_en', row.authority) }}
						</template>
					</el-table-column>
					<el-table-column prop="objectType" align="center" :label="$t('reportManagement.objectType')">
						<template v-if="$i18n.locale === 'zh-CN'" v-slot="{row}">
							{{ formatAuth('sqdxlx', row.objectType) }}
						</template>
						<template v-else v-slot="{row}">
							{{ formatAuth('sqdxlx_en', row.objectType) }}
						</template>
					</el-table-column>
				</template>
			</el-table>
			<pagination :pageResult="pageResult" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
			</span>


		</el-dialog>
		<!-- 报表弹层页面 -->
		<AuthDialog ref="auth" @upDataAuth="upDataAuth" />
		<!-- 范围弹层页面 -->
		<RangDialog ref="rang" @upDataRang="upDataRang" />
		<!-- 科目弹层页面 -->
		<SubjectDialog ref="subject" @upDataSubject="upDataSubject" />
		<!-- 添加报表弹层 -->
		<AddDialog ref="add" @updata="getReportForm(params)" />
	</div>
</template>

<script>
	import utils from '@/utils.js'
	import req from '@/request.js'
	const portal = window.context.portal
	import pagination from '@/components/pagination'
	import AuthDialog from './dialog/auth.vue' // 报表权限弹层页面
	import RangDialog from './dialog/rang.vue' // 报表范围弹层页面
	import SubjectDialog from './dialog/subject.vue' // 报表科目弹层页面
	import AddDialog from './dialog/add.vue' // 添加报表弹层页面
	export default {
		name: 'ReportManagement',
		components: {
			pagination,
			AuthDialog,
			RangDialog,
			SubjectDialog,
			AddDialog,
		},
		data() {
			return {
				loading: false,
				activeName: '',
				conditions: [],
				reportFormData: [],
				params: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
				},
				dialogParams: {
					pageBean: {
						page: 1,
						pageSize: 20,
					},
				},
				fillParams: {
					pageNum: 1,
					pageSize: 20,
					reportId: '',
				},
				pageResult: {
					page: 1,
					pageSize: 20,
					total: 0,
				},
				dialog: {
					title: '填报权限',
					visible: false,
				},
				searchForm: {},
				tableData: [],
				btnKey: '', // 判断点击卡片下面按钮key
				deleteIds: '',
			}
		},
		created() {
			this.getHeaderTabsData() // 获取头部tabs数据
			this.getReportForm(this.params) // 获取表报数据
		},
		methods: {
			formatAuth(dict, data) {
				let arr = []
				data &&
					data.split(',').forEach((item) => {
						arr.push(utils.getDictName(dict, item))
					})
				return arr.join(',')
			},
			getDictName(code, value) {
				return utils.getDictName(code, value)
			},
			handleSizeChange(pageSize) {
				if (this.btnKey == 'auth' || this.btnKey == 'rang') {
					this.fillParams = {
						...this.fillParams,
						pageSize
					}
					this.getDialogData(this.fillParams, this.btnKey)
				} else {
					this.dialogParams.pageBean = {
						...this.dialogParams.pageBean,
						pageSize,
					}
					this.getSubjectData(this.dialogParams)
				}
			},
			handleCurrentChange(page) {
				if (this.btnKey == 'auth' || this.btnKey == 'rang') {
					let pageNum = page
					this.fillParams = {
						...this.fillParams,
						pageNum
					}
					this.getDialogData(this.fillParams, this.btnKey)
				} else {
					this.dialogParams.pageBean = {
						...this.dialogParams.pageBean,
						page,
					}
					this.getSubjectData(this.dialogParams)
				}
			},
			handleDialogClose(done) {
				done()
			},
			// 获取头部tabs数据
			getHeaderTabsData() {
				let data = []
				if (this.$i18n.locale === 'zh-CN') {
					data.push({
							name: '全部',
							value: 'all',
						},
						...utils.getDictItemsFromCache('ssyw')
					)
				} else {
					data.push({
							name: 'All',
							value: 'all',
						},
						...utils.getDictItemsFromCache('ssyw_en')
					)
				}
				let colors = [
					'#0147eb',
					'#f04444',
					'#f7931a',
					'#8a3aed',
					'#0147eb',
					'#627eea',
				]
				data.forEach((item, index) => {
					item.color = colors[index]
					item.title = item.name
				})
				this.activeName = data[0].value
				this.conditions = data
			},
			// 获取报表数据
			getReportForm(params) {
				this.loading = true
				req.post(portal + '/qfReportInfo/v1/getList', params).then(
					(res) => {
						let data =
							(res &&
								res.data &&
								res.data.value &&
								res.data.value.rows) || []
						this.reportFormData = this.format(data)
						this.loading = false
					}
				)
			},
			// 格式化数组成需要的格式
			format(arr) {
				let dataInfo = {}
				arr.forEach((item) => {
					let {
						tyep
					} = item
					if (!dataInfo[tyep]) {
						dataInfo[tyep] = {
							tyep,
							child: [],
						}
					}
					dataInfo[tyep].child.push(item)
				})
				let list = Object.values(dataInfo) // list 转换成功的数据
				return list
			},
			// 填报数据弹出弹层
			handleFill(key, id) {
				this.fillParams.reportId = id
				console.log(key, id);
				if (key == 'auth') {
					this.$refs.auth.open(this.fillParams.reportId)
					// this.dialog.title = this.$t('reportManagement.auth')
				} else if(key=='rang'){
					this.$refs.rang.open(this.fillParams.reportId)
					// this.dialog.title = this.$t('reportManagement.rang')
				}
				// this.dialog.visible = true
				// this.btnKey = key
				// this.getDialogData(this.fillParams, key)
			},
			// 填报科目弹层
			handleFillSubject(id) {
				
				this.$refs.subject.open(this.fillParams.reportId)
				
				// this.dialogParams.querys = [{
				// 	group: 'main',
				// 	operation: 'EQUAL',
				// 	parentGroup: '',
				// 	property: 'reportId',
				// 	relation: 'AND',
				// 	value: id,
				// }, ]
				// this.btnKey = 'subject'
				// this.dialog.visible = true
				// this.dialog.title = this.$t('reportManagement.subject')
				// this.getSubjectData(this.dialogParams)
			},
			// 获取科目列表数据
			getSubjectData(params) {
				req.post(portal + '/qfReportSubject/v1/getList', params).then(
					(res) => {
						this.tableData =
							(res &&
								res.data &&
								res.data.value &&
								res.data.value.rows) || []
						this.tableData = this.tableData.map((item) => {
							return {
								code: item.subjectCode,
								name: item.subjectName,
								nameEn: item.subjectNameEn,
								...item,
							}
						})
						this.pageResult = {
							page: (res &&
									res.data &&
									res.data.value &&
									res.data.value.page) ||
								1,
							pageSize: (res &&
									res.data &&
									res.data.value &&
									res.data.value.pageSize) ||
								20,
							total: (res &&
									res.data &&
									res.data.value &&
									res.data.value.total) ||
								0,
						}
					}
				)
			},
			// 获取弹层列表数据
			getDialogData(params, key) {
				let api
				if (key === 'auth') {
					api = '/qfReportAuthority/v1/getList'
				} else if (key === 'rang') {
					api = '/qfReportRange/v1/getList'
				}
				req.get(
					portal +
					api +
					`?pageNum=${params.pageNum}&pageSize=${params.pageSize}&reportId=${params.reportId}`
				).then((res) => {
					this.tableData =
						(res &&
							res.data &&
							res.data.value &&
							res.data.value.rows) || []
					if (key === 'rang') {
						this.tableData = this.tableData.map((item) => {
							return {
								code: item.enterpriseCode,
								...item,
							}
						})
					}
					this.pageResult = {
						page: (res &&
								res.data &&
								res.data.value &&
								res.data.value.page) ||
							1,
						pageSize: (res &&
								res.data &&
								res.data.value &&
								res.data.value.pageSize) ||
							20,
						total: (res &&
								res.data &&
								res.data.value &&
								res.data.value.total) ||
							0,
					}
				})
			},
			handleSearch() {
				let obj = this.searchForm
				let querys = []
				for (let i in obj) {
					if (obj[i]) {
						querys.push({
							group: 'main',
							operation: 'LIKE',
							parentGroup: '',
							property: i,
							relation: 'AND',
							value: obj[i],
						})
					}
				}
				this.params.querys = querys
				this.getReportForm(this.params) // 获取表报数据
			},
			handleAdd() {
				console.log(this.tableData);
				if (this.btnKey == 'auth') {
					this.$refs.auth.open(this.fillParams.reportId, this.tableData)
				} else if (this.btnKey == 'rang') {
					this.$refs.rang.open(this.fillParams.reportId, this.tableData)
				} else {
					this.$refs.subject.open(this.fillParams.reportId, this.tableData)
				}
			},
			handleSelectionChange(currentData) {
				if (currentData.length === 0) return (this.deleteIds = '')
				let ids = []
				currentData.forEach((item) => {
					ids.push(item.id)
				})
				this.deleteIds = ids.join('&ids=')
			},
			handleDelete() {
				let api = '/qfReportAuthority/v1/deleteByIds'
				let method = 'get'
				if (this.btnKey == 'auth') {
					api = '/qfReportAuthority/v1/deleteByIds'
					method = 'remove'
				} else if (this.btnKey == 'rang') {
					api = '/qfReportRange/v1/deleteByIds'
					method = 'get'
				} else {
					api = '/qfReportSubject/v1/deleteByIds'
					method = 'get'
				}
				this.$confirm(
					this.$t('common.sureDelete'),
					this.$t('common.tips'), {
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning',
					}
				).then(() => {
					req[method](portal + api + '?ids=' + this.deleteIds).then(
						(res) => {
							if (this.btnKey == 'auth') {
								this.upDataAuth()
							} else if (this.btnKey == 'rang') {
								this.upDataRang()
							} else {
								this.upDataSubject()
							}
						}
					)
				})
			},
			handleTabsClick(tab) {
				let querys = [{
					group: 'main',
					operation: 'EQUAL',
					parentGroup: '',
					property: 'business',
					relation: 'AND',
					value: tab.name,
				}, ]

				if (tab.name == 'all') {
					this.params.querys = []
				} else {
					this.params.querys = querys
				}
				this.getReportForm(this.params) // 获取表报数据
			},
			// 添加报表
			handleReportAdd() {
				this.$refs.add.open()
			},
			// 删除报表
			handleReportDelete(id) {
				this.$confirm(
					this.$t('common.sureDelete'),
					this.$t('common.tips'), {
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning',
					}
				).then(() => {
					req.remove(portal + '/qfReportInfo/v1/?ids=' + id).then(
						(res) => {
							this.getReportForm(this.params) // 获取表报数据
						}
					)
				})
			},
			// 发布报表
			handleReportRelease(item) {
				if (item.flag !== 1) {
					this.$confirm(
						'【' + item.name + '】' + this.$t('common.sureRelease'),
						this.$t('common.tips'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'warning',
						}
					).then(() => {
						req.put(portal + '/qfReportInfo/v1/updateStatus', {
							id: item.id,
						}).then((res) => {
							this.getReportForm(this.params) // 获取表报数据
						})
					})
				} else {
					this.$confirm(
						'【' + item.name + '】' + this.$t('common.releasd'),
						this.$t('common.tips'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'warning',
						}
					)
				}
			},
			upDataAuth() {
				this.getDialogData(this.fillParams, 'auth')
			},
			upDataRang() {
				this.getDialogData(this.fillParams, 'rang')
			},
			upDataSubject() {
				this.getSubjectData(this.dialogParams)
			},
			handleReportEdit(row) {
				this.$refs.add.open(row)
			},
		},
	}
</script>

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

	.full-body {
		//   background: #fff;
	}

	.cqlt-icon {
		color: #fff;
		font-size: 48px;
	}

	.cqlt-icon-jidu {
		font-size: 38px;
	}

	/deep/ .el-pagination {
		margin-top: 10px;
		display: flex;
		justify-content: flex-end;
	}

	/deep/ .el-progress.is-success .el-progress-bar__inner {
		background: repeating-linear-gradient(120deg,
				#71b945,
				#71b945 0.26042vw,
				#8dc76a 0.26042vw,
				#8dc76a 0.625vw);
	}

	/deep/ .el-progress-bar__outer {
		height: 4px !important;
	}

	/deep/ .el-link {
		display: block;
	}

	/deep/ .el-tabs__nav-wrap::after {
		display: none;
	}

	/deep/ .el-tabs,
	/deep/ .el-tabs__header,
	/deep/ .el-tabs__nav-wrap,
	/deep/ .el-tabs__nav-scroll,
	/deep/ .el-tabs__nav {
		height: 100%;
	}

	/deep/ .el-tabs__nav {
		padding-top: 20px;
		box-sizing: border-box;
	}

	/deep/ .el-input__inner {
		// border: none;
	}

	.text-style {
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 17px;
		letter-spacing: 0px;
		color: #0147eb;
	}

	.icon {
		width: 40px;
		height: 40px;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.mar-left-10 {
		margin-left: 10px;
	}

	.link-btn {
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			margin-top: 5px;
		}
	}

	.head-search {
		width: 100%;
		height: 78px;
		background-color: #fff;
		// box-shadow: 0px 12px 23px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20px;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 0 25px;
		box-sizing: border-box;

		.el-tabs {
			width: inherit;
		}

		.left {
			flex: 3;
			height: 100%;
			display: flex;
			align-items: center;

			.icon-circle {
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10px;
			}

			.more-btn {
				margin-left: 32px;

				&:hover {
					cursor: pointer;

					i {
						color: #0147eb;
					}
				}

				span {
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: normal;
					font-stretch: normal;
					line-height: 19px;
					letter-spacing: 0px;
					color: #545454;
				}

				i {
					color: #545454;
				}
			}
		}

		.center {

			// width: 500px;
			/deep/ .el-form-item--small.el-form-item {
				margin-bottom: 0;
			}

			.addBtn {
				margin-left: 10px;
				//   height: 32PX;
			}
		}
	}

	.text-common-style {
		font-family: Microsoft YaHei;
		font-size: 12px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 17px;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.center {
		display: flex;
		justify-content: center;
		align-content: center;

		/deep/ .el-form {
			height: 40px;
		}
	}

	.container {
		height: calc(100% - 86px);
		border-radius: 20px;
		padding-left: 30px;
		overflow: auto;
		background-color: #fff;
		margin-top: 10px;

		.item_title {
			height: 19px;
			font-size: 16px;
			font-weight: normal;
			font-stretch: normal;
			line-height: 19px;
			letter-spacing: 0px;
			color: #409eff;
			margin-top: 16px;
			margin-bottom: 10px;
			font-weight: 700;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -10px;
				display: inline-block;
				width: 4px;
				height: 14px;
				line-height: 14px;
				background: #409eff;
			}
		}
	}

	/deep/ .el-loading-mask {
		border-radius: 20px;
	}

	/deep/ .el-empty {
		height: 100%;
		background: #fff;
		//   margin-top: 10px;
		border-radius: 20px;
	}

	.card-container {
		margin-top: 16px 0 8px 0;
		display: flex;
		flex-wrap: wrap;
		padding-right: 20px;

		.item-card {
			padding: 20px;
			padding-bottom: 10px;
			box-sizing: border-box;
			background-color: #f5f6fa;
			border-radius: 20px;
			// box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
			box-sizing: border-box;
			margin-right: 10px;
			margin-bottom: 10px;
			border: 1px solid #fff;

			&:hover {
				cursor: pointer;
				border: 1px dashed #409eff;
			}

			.item-card-header {
				display: flex;
				align-items: center;
				margin-bottom: 20px;

				.item_img {
					width: 80px;
					height: 80px;
					background: #909399;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.bg {
					background-color: #409eff;
				}
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 16px;
				height: 80px;

				.operation-btn {
					display: flex;
					justify-content: flex-end;

					.operation-btn-link /deep/ i::before {
						font-size: 14px;
					}

					/deep/ .el-link [class*='el-icon-']+span {
						margin-left: 0;
						font-size: 14px;
					}
				}

				.item_text {
					flex: 1;
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0px;
					color: #545454;
					display: flex;
					align-items: center;

					/deep/ .el-link--inner {
						font-size: 16px;
					}

					div:nth-child(2) {
						display: flex;
						// justify-content: space-between;
					}

					.tag {
						margin-right: 5px;
					}
				}
			}

			.option-btn {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: center;
				}

				.cloumn-btn-link {
					// margin-right: 16px;
					font-size: 12px;
					color: #409eff;
				}
			}
		}
	}

	.dialog-header {
		display: flex;
		height: 50px;
		align-items: center;
		margin-bottom: 10px;

		.line {
			margin: 0 30px;
		}

		.btn-plus {
			margin-right: 10px;
		}

		/deep/ .el-form-item--small.el-form-item {
			margin-bottom: 0;
		}
	}

	@media screen and (max-width: 680px) {
		.item-card {
			width: 100%;
			margin-right: 0;
		}
	}

	@media screen and (min-width: 681px) {
		.item-card {
			width: calc(50% - 4px);
		}

		.item-card:nth-child(2n) {
			margin-right: 0px;
		}
	}

	@media screen and (min-width: 1040px) {
		.item-card {
			width: calc(33% - 4px);
		}

		.item-card:nth-child(2n) {
			margin-right: 10px;
		}

		.item-card:nth-child(2n + 1) {
			margin-right: 10px;
		}

		.item-card:nth-child(3n) {
			margin-right: 0;
		}

		.item-card:nth-child(3n + 1) {
			margin-right: 10px;
		}
	}

	@media screen and (min-width: 1350px) {
		.item-card {
			width: calc(25% - 8px);
		}

		.item-card:nth-child(2n) {
			margin-right: 10px;
		}

		.item-card:nth-child(2n + 1) {
			margin-right: 10px;
		}

		.item-card:nth-child(3n + 1) {
			margin-right: 10px;
		}

		.item-card:nth-child(3n) {
			margin-right: 10px;
		}

		.item-card:nth-child(4n + 1) {
			margin-right: 10px;
		}

		.item-card:nth-child(4n) {
			margin-right: 0px;
		}
	}

	@media screen and (min-width: 1710px) {
		.item-card {
			width: calc(20% - 8px);
		}

		.item-card:nth-child(2n) {
			margin-right: 10px;
		}

		.item-card:nth-child(3n) {
			margin-right: 10px;
		}

		.item-card:nth-child(4n) {
			margin-right: 10px;
		}

		.item-card:nth-child(5n) {
			margin-right: 0;
		}
	}
</style>

<style lang="scss" scoped>
	/* 弹层样式修改 */
	.el-dialog__wrapper {
		/deep/ .el-dialog {
			.el-dialog__body {
				padding: 10px;
			}
		}
	}
</style>
