<template>
	<div class="content-main">
		<el-form inline class="search-content">
			<el-row>
				<el-form-item label="方案标题:">
					<el-input
						clearable
						autocomplete="off"
						placeholder="请输入"
						v-model="searchForm.xmfabtValue"
						style="width: 180px"
					></el-input>
				</el-form-item>
				<el-form-item label="年度:">
					<el-date-picker
						v-model="searchForm.xmndValue"
						type="year"
						clearable
						value-format="yyyy"
						placeholder="选择年"
						style="width: 180px"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<div class="search-button">
						<span class="search-line"></span>
						<el-button
							type="primary"
							size="small"
							class="iconfont iconchaxun"
							@click="getList"
							>&nbsp;查询</el-button
						>
						<el-button
							type="primary"
							size="small"
							class="iconfont iconzhongzhi"
							@click="chongzhi"
							>&nbsp;重置</el-button
						>
					</div>
				</el-form-item>
			</el-row>
		</el-form>
		<el-row class="solid"></el-row>
		<div class="addBtnBg">
			<el-button
				type="primary"
				class="iconfont iconxinzeng"
				@click="showDialog(null, 'add')"
				>新增</el-button
			>
		</div>
		<el-table border :data="tableData" style="margin-top: 20px">
			<el-table-column
				type="index"
				label="序号"
				width="60"
				align="center"
			>
				<template slot-scope="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				label="方案标题"
				prop="xmfabt"
			></el-table-column>
			<!-- <el-table-column align="center" show-overflow-tooltip label="项目申请单位" prop="xmsqdw"></el-table-column> -->
			<el-table-column
				align="center"
				show-overflow-tooltip
				label="年度"
				prop="xmnd"
			></el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				label="发布时间"
				prop="fbsj"
			></el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				label="状态"
				prop="xmzt"
			>
				<template slot-scope="scope">
					<span v-if="scope.row.fbzt == 0">待发布</span>
					<span v-if="scope.row.fbzt == 1">已发布</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-tooltip
						class="item"
						effect="light"
						content="查看"
						placement="top"
					>
						<el-button
							type="primary"
							size="small"
							class="operate_show_btn iconfont iconchakan2"
							@click="showDialog(scope.row, 'see')"
						></el-button>
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="light"
						content="修改"
						placement="top"
						v-if="
							buttonNameList.indexOf('修改') > -1 &&
							scope.row.fbzt == 0
						"
					>
						<el-button
							type="primary"
							size="small"
							class="operate_edit_btn iconfont iconxiugai"
							@click="showDialog(scope.row, 'edit')"
						></el-button>
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="light"
						content="删除"
						placement="top"
						v-if="
							buttonNameList.indexOf('删除') > -1 &&
							scope.row.fbzt == 0
						"
					>
						<el-button
							type="primary"
							size="small"
							class="operate_delete_btn iconfont iconshanchu"
							@click="deleteInfo(scope.row)"
						></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<el-row class="pagination-wrap">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="pageForm.pageNum"
				:page-sizes="[10, 20, 30, 40, 50]"
				:page-size="pageForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageForm.total"
			></el-pagination>
		</el-row>

		<el-dialog
			title="项目申请条件"
			:visible.sync="dialogVisible"
			width="80%"
			:close="handleClose"
			:close-on-click-modal="false"
		>
			<el-form
				label-width="140px"
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
			>
				<el-row>
					<el-form-item label="项目申请条件标题:" prop="xmfabt">
						<el-input
							placeholder="请输入"
							v-model="ruleForm.xmfabt"
							:disabled="editable"
						></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="年度:" prop="xmnd">
						<el-date-picker
							v-model="ruleForm.xmnd"
							type="year"
							:disabled="editable"
							value-format="yyyy"
							placeholder="选择年"
							:picker-options="pickerYearOptions"
						></el-date-picker>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item
						label="截止时间:"
						prop="xmjzsj"
						:rules="{
							message: '请选择项目截止时间',
							trigger: ['change', 'blur'],
							required: true,
						}"
					>
						<el-date-picker
							v-model="ruleForm.xmjzsj"
							type="date"
							:disabled="editable"
							value-format="yyyy-MM-dd"
							placeholder="选择截至日期"
							:picker-options="pickerOptions"
						></el-date-picker>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="方案详情:" prop="xmfaxq">
						<el-input
							type="textarea"
							:rows="3"
							placeholder="请输入内容"
							:disabled="editable"
							v-model="ruleForm.xmfaxq"
						></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item
						label="项目申请条件附件:"
						prop="isfirstFile"
						:rules="{
							required: true,
							validator: checkFiles,
						}"
					>
						<!-- :rules="{
							required: true,
							validator: checkFiles
						}" -->
						<div class="fileTable">
							<table>
								<thead>
									<tr>
										<th width="10%">序号</th>
										<th width="25%">附件名称</th>
										<th width="25%">上传时间</th>
										<th width="30%">附件</th>
										<th width="10%" v-if="!editable">
											操作
										</th>
									</tr>
								</thead>
								<tbody>
									<tr
										v-for="(
											item, index
										) in ruleForm.xmsqtjList"
										:key="index"
										v-show="item.status == 1"
									>
										<td>{{ index + 1 }}</td>
										<td>
											<el-form-item>
												<el-input
													placeholder="请输入附件名称"
													v-model="item.xmclmc"
													:disabled="editable"
												></el-input>
											</el-form-item>
										</td>
										<td>
											<el-form-item>
												<!-- :prop="'xmsqtjList['+ scope.$index +'].xmclsbsj'"
												:rules="rules.xmclsbsj" -->
												<el-input
													placeholder="请输入上传时间"
													v-model="item.xmclsbsj"
													disabled
												></el-input>
											</el-form-item>
										</td>
										<td>
											<el-upload
												:before-upload="beforeUpload"
												class="upload-demo"
												:action="actionUrl"
												:on-preview="handlePreview"
												:on-remove="
													(file) =>
														handleRemove(
															file,
															index
														)
												"
												:before-remove="beforeRemove"
												:limit="1"
												:on-exceed="handleExceed"
												:on-success="handleSuccess"
												:file-list="item.xmclFileList"
												v-if="
													xmsqtjList.length &&
													!editable
												"
											>
												<div @click="getIndex(index)">
													<el-button
														type="primary"
														size="small"
														:disabled="editable"
														>点击上传</el-button
													>
												</div>
											</el-upload>
											<div
												class="fileList"
												v-for="(
													item2, index2
												) in item.xmclFileList"
												:key="index2"
												v-show="editable"
											>
												<!-- <i class="close" @click="deleteFile(index, index2)" v-if="editable"></i> -->
												<span
													class="name"
													@click="
														downLoadFile(
															item2.fileId
														)
													"
												>
													{{ item2.fileName }}
												</span>
											</div>
										</td>
										<td align="center" v-if="!editable">
											<el-tooltip
												class="item"
												effect="light"
												content="删除"
												placement="top"
											>
												<el-button
													@click="
														removeList(item, index)
													"
													type="primary"
													class="
														operate_delete_btn
														iconfont
														iconshanchu
														ifile
													"
													size="small"
												></el-button>
											</el-tooltip>
										</td>
									</tr>
									<tr
										v-if="
											!xmsqtjList.length ||
											!ruleForm.xmsqtjList.filter(
												(d) => d.status
											).length
										"
									>
										<td
											colspan="5"
											style="
												padding: 0;
												color: #909399;
												line-height: 60px;
											"
										>
											暂无数据
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="check-icon-box" v-if="!editable">
							<!-- <span class="el-icon-remove check-icon" @click="removeList"></span> -->
							<span
								class="el-icon-circle-plus check-icon"
								@click="addList"
							></span>
						</div>
					</el-form-item>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					type="primary"
					class="iconfont iconchucun iconbaocun"
					v-if="!editable"
					@click="saveInfo('ruleForm', 0)"
					>保存</el-button
				>
				<el-button
					type="primary"
					class="iconfont iconfabu"
					v-if="!editable && xmId"
					@click="fabu()"
					>发布</el-button
				>
				<el-button
					type="primary"
					class="iconfont iconfabu"
					v-if="!editable && !xmId"
					@click="saveInfo('ruleForm', 1)"
					>发布</el-button
				>
				<el-button
					type="primary"
					class="iconfont iconfanhui"
					@click="dialogVisible = false"
					>返回</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { authorityControl } from '@/api/login/login'
import { fileApi } from '@/api'
import {
	projectPage,
	saveProject,
	getProject,
	xiafaProject,
	updataProject,
	deleteProject,
} from '@/api/projectManagement/index'
import { getNowDate } from '@/utils/utils'
export default {
	name: 'projectApply',
	data() {
		return {
			buttonNameList: [],
			pickerYearOptions: {
				disabledDate(time) {
					let y = new Date().getFullYear() + ''
					return time.getTime() < new Date(y).getTime()
				},
			},
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now()
				},
			},
			searchForm: {
				xmfabtValue: '',
				xmndValue: '',
			},
			xmfabtValue: '',
			// 下拉框
			xmndValue: '',
			xmndOptions: [],
			// 分页
			pageForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			// 表格数据
			tableData: [],
			// 弹窗控制
			dialogVisible: false,
			// 提交form
			ruleForm: {
				isfirstFile: '',
				xmId: '',
				sjId: '',
				xmfabt: '',
				xmnd: '',
				xmfaxq: '',
				xmjzsj: '',
				xmsqtjList: [
					{
						sjId: '',
						xmsqId: '',
						xmcllx: '',
						xmclmc: '',
						xmclsbsj: '',
						xmclFileList: [],
					},
				],
			},
			// 表单验证
			rules: {
				xmfabt: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'blur',
					},
				],
				xmnd: [
					{
						required: true,
						message: '请选择年度',
						trigger: 'change',
					},
				],
				xmfaxq: [
					{
						required: true,
						message: '请输入方案详情',
						trigger: 'blur',
					},
				],
				xmclmc: [
					{
						validator: checkFileName,
						trigger: 'blur',
					},
				],
				xmclsbsj: [
					{
						validator: checkFileTime,
						trigger: 'blur',
					},
				],
				// xmsqtjList: [
				// 	{
				// 		required: true,
				// 		message: '请上传项目申请条件附件',
				// 		trigger: 'change'
				// 	}
				// ]
			},
			// 文件上传路径
			actionUrl: fileApi + '/file/upload',
			// 项目申请条件附件
			xmsqtjList: [],
			// 上传附件list
			xmclFileList: [],
			// 附件数组长度
			xmsqtjLength: '',
			editable: false,
			// 项目id
			xmId: '',
			// 系统当前时间
			nowTime: getNowDate(),
			// 按钮的索引
			buttonIndex: '',
			// 删除的文件
			removeFile: [],
		}
		let checkFileName = (rule, value, callback) => {
			if (!value) {
				return callback(new error('请输入文件名称!'))
			} else {
				callback()
			}
		}
		let checkFileTime = (rule, value, callback) => {
			if (!value) {
				return callback(new error('请输入上传时间!'))
			} else {
				callback()
			}
		}
	},
	methods: {
		getButtonList(menuCode, userCode) {
			let codeData = {
				resourceCode: menuCode,
				userId: userCode,
			}
			authorityControl(codeData).then((res) => {
				let buttonNameList = []
				res.data.forEach((item) => {
					this.buttonNameList.push(item.resourceName)
				})
			})
		},
		beforeUpload(file) {
			const isLt200M = file.size / 1024 / 1024 < 200
			if (!isLt200M) {
				this.$message.error('上传文件大小不能超过 200MB!')
			}
			return isLt200M
		},
		changeFileStaus() {
			let _hasFile = this.attachFiles.some(
				(d) => d.status == 1 && d.xmclFileList && d.xmclFileList.length
			)
			this.ruleForm.isfirstFile = _hasFile ? true : ''
			this.$refs.ruleForm.validateField('isfirstFile')
		},
		checkFiles(rule, value, callback) {
			if (this.ruleForm.isfirstFile || value) {
				callback()
			} else {
				callback(new Error('请上传项目招标情况附件'))
			}
		},
		// 文件删除的方法
		handleRemove(file, index) {
			if (!file.fileId) {
				return
			}
			if (file.sjId) {
				this.ruleForm.xmsqtjList[index].xmclFileList[0].status = 0
				this.ruleForm.xmsqtjList[index].fileList = [
					...this.ruleForm.xmsqtjList[index].xmclFileList,
				]
			}
			this.ruleForm.xmsqtjList[index].xmclFileList.length = 0

			this.changeFileStaus()
			this.$refs.ruleForm.validateField('isfirstFile')
		},
		handlePreview(file) {
			this.downLoadFile(file.fileId)
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${
					files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			)
		},
		beforeRemove(file, fileList) {
			if (!file.fileId) {
				return
			}
			return this.$confirm(`确定移除 ${file.name}？`, '提示')
		},
		// 获取上传返回信息
		handleSuccess(res, file) {
			let obj = {
				fileId: res.data.id,
				fileName: res.data.name,
				name: res.data.name,
				status: 1,
			}
			this.ruleForm.xmsqtjList.forEach((item, index) => {
				if (this.buttonIndex == index) {
					item.xmclFileList.push(obj)
				}
			})

			this.ruleForm.isfirstFile = true
			this.$refs.ruleForm.validateField('isfirstFile')
		},
		// 文件下载
		downLoadFile(id) {
			window.open(`${fileApi}/file/download?id=${id}`)
		},
		// 删除文件
		deleteFile(index, index2) {
			this.ruleForm.xmsqtjList[index].xmclFileList[index2].status = 0
		},
		// 分页页数
		handleSizeChange(val) {
			this.pageForm.pageSize = val
			this.getList()
		},
		//分页每页显示几个
		handleCurrentChange(val) {
			this.pageForm.pageNum = val
			this.getList()
		},
		handleClose() {
			this.$refs.ruleForm.resetFields()
			this.dialogVisible = false
			// this.$nextTick(() => {
			//   this.$refs.ruleForm.resetFields();
			// });
			this.getList()
		},
		query() {
			this.pageForm.pageNum = 1
			this.getList()
		},
		saveInfo(formName, type) {
			// this.$nextTick(this.$refs[formName].validate());
			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.xmId) {
						this.ruleForm.xmId = this.xmId
					}
					this.ruleForm.ordid = sessionStorage.getItem('orgCode')
					// this.ruleForm.xmsqtjList = this.xmsqtjList;
					this.ruleForm.xmsqtjList.forEach((d) => {
						if (d.fileList) {
							d.xmclFileList = d.xmclFileList.concat(d.fileList)
						}
					})
					let data = this.ruleForm
					saveProject(data, type).then((res) => {
						if (res.infoCode === 200) {
							let msg = ''
							type == 0
								? (msg = '保存成功!')
								: (msg = '发布成功!')
							this.$message({
								type: 'success',
								message: msg,
							})
							this.dialogVisible = false
							this.getList()
						} else {
							this.$message({
								type: 'error',
								message: res.msg,
							})
						}
					})
				} else {
					this.$message.warning('请先完成必填项')
					return false
				}
			})
		},
		fabu() {
			if (this.xmId) {
				xiafaProject(this.xmId).then((res) => {
					if (res.infoCode === 200) {
						this.$message({
							type: 'success',
							message: '发布成功!',
						})
						this.dialogVisible = false
						this.getList()
					} else {
						this.$message({
							type: 'error',
							message: res.msg,
						})
					}
				})
			} else {
			}
		},

		// 列表查询
		getList(type) {
			if (type != 'start') {
				//非初始化调用：查询、分页
				sessionStorage.setItem(
					'searchData',
					JSON.stringify(this.searchForm)
				)
				sessionStorage.setItem(
					'pageData',
					JSON.stringify(this.pageForm)
				)
			} else {
				//初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
				if (JSON.parse(sessionStorage.getItem('searchData'))) {
					//详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
					this.searchForm = JSON.parse(
						sessionStorage.getItem('searchData')
					)
					this.pageForm = JSON.parse(
						sessionStorage.getItem('pageData')
					)
				} else {
					//第一次进去此菜单时，保存上方默认的data
					sessionStorage.setItem(
						'searchData',
						JSON.stringify(this.searchForm)
					)
					sessionStorage.setItem(
						'pageData',
						JSON.stringify(this.pageForm)
					)
				}
			}
			let data = {
				pageNum: this.pageForm.pageNum,
				pageSize: this.pageForm.pageSize,
				xmfabt: this.searchForm.xmfabtValue,
				xmnd: this.searchForm.xmndValue,
			}
			projectPage(data).then((res) => {
				if (res.infoCode === 200) {
					this.tableData = res.data.list
					this.pageForm.total = res.data.total
					// 列表fbsj字段截取
					this.tableData.forEach((item, index) => {
						if (item.fbsj) {
							item.fbsj = item.fbsj.slice(0, 10)
						}
					})
				} else {
					this.$message({
						type: res.status,
						message: res.msg,
					})
				}
			})
		},
		// dialog
		showDialog(row, type) {
			this.dialogVisible = true
			this.$nextTick(() => {
				this.$refs.ruleForm.resetFields()
			})
			if (type == 'edit') {
				// 修改
				this.editable = false
				this.xmId = row.xmId
				getProject(row.xmId).then((res) => {
					if (res.infoCode === 200) {
						this.ruleForm = res.data
						this.ruleForm.xmsqtjList.forEach((d) => {
							let file = d.xmclFileList[0]
							if (file && file.fileName) {
								file.name = file.fileName
								this.ruleForm.isfirstFile = 'true'
							}
						})
						this.xmsqtjList = res.data.xmsqtjList
						this.xmsqtjLength = res.data.xmsqtjList.length
					} else {
						this.$message({
							type: 'error',
							message: res.msg,
						})
					}
				})
			} else if (type == 'see') {
				// 查看
				this.editable = true
				this.xmId = row.xmId
				getProject(row.xmId).then((res) => {
					if (res.infoCode === 200) {
						this.ruleForm = res.data
						this.xmsqtjList = res.data.xmsqtjList
						this.xmsqtjLength = res.data.xmsqtjList.length
					} else {
						this.$message({
							type: 'error',
							message: res.msg,
						})
					}
				})
			} else if (type == 'add') {
				// 新增
				this.editable = false
				this.xmId = ''
				this.ruleForm = {
					xmId: '',
					sjId: '',
					xmfabt: '',
					xmnd: '',
					xmfaxq: '',
					xmjzsj: '',
					xmsqtjList: [],
				}
				this.xmsqtjList = [
					{
						sjId: '',
						xmsqId: '',
						xmcllx: 1,
						xmclmc: '',
						xmclsbsj: this.nowTime,
						xmclFileList: [],
						status: 1,
					},
				]
				this.addList()
			}
		},
		// 重置
		chongzhi() {
			this.pageForm.pageNum = 1
			this.searchForm.xmfabtValue = ''
			this.searchForm.xmndValue = ''
			this.getList()
		},
		addList() {
			let obj = {
				sjId: '',
				xmsqId: '',
				xmcllx: 1,
				xmclmc: '',
				xmclsbsj: this.nowTime,
				xmclFileList: [],
				status: 1,
			}
			obj.xmclsbsj = this.nowTime
			// this.xmsqtjList.push(obj);
			// this.xmsqtjLength = this.xmsqtjList;
			this.ruleForm.xmsqtjList.push(obj)
		},
		removeList(item, index) {
			if (item.sjId) {
				item.status = 0
			} else {
				this.ruleForm.xmsqtjList.splice(index, 1)
			}

			this.xmsqtjLength = this.ruleForm.xmsqtjList
			this.changeFileStaus()
			this.$refs.ruleForm.validateField('isfirstFile')
		},
		// 获取上传按钮在表格中的索引
		getIndex(index) {
			this.buttonIndex = index
		},
		async deleteInfo(row) {
			let isOk = await this.$confirm(
				'此操作将删除当前信息,是否继续',
				'提示'
			)
			if (!isOk) return
			let data = {
				xmId: row.xmId,
			}
			deleteProject(data).then((res) => {
				if (res.infoCode === 200) {
					this.$message({
						type: 'success',
						message: '删除成功!',
					})
					this.getList()
				} else {
					this.$message({
						type: 'error',
						message: '删除失败!',
					})
				}
			})
		},
	},
	created() {
		this.getButtonList(
			sessionStorage.getItem('resourceCode'),
			sessionStorage.getItem('userCode')
		)
		this.$route.meta.title = '项目申请条件'
		this.getList('start')
		this.addList()
	},
}
</script>

<style lang="scss" scoped>
// .content-main {
// 	margin: 10px 10px 0 10px;
// 	padding: 10px;
// 	// height: calc(100vh - 251px);
// 	border: 1px #f4f5f8 solid;
// 	background-color: #fff;
// }
.pagination-wrap {
	margin: 20px;
	text-align: right;
}
.operate_delete_btn.ifile {
	float: none !important;
}
.solid {
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px #75b5fa dashed;
}

.search-content {
	padding: 10px 0;
	.el-form-item {
		margin-bottom: 0;
	}
}

.applyList-action {
	padding: 10px;
	text-align: left;
	background: #edf5fd;
	margin-top: 10px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
	width: 100%;
}

.check-icon-box {
	width: 100%;
	text-align: right;
	margin-right: 25px;
	.check-icon {
		display: inline-block;
		width: 10%;
		text-align: center;
		line-height: 1.5em;
		margin: 0 auto 10px;
		vertical-align: top;
		color: #006bd5;
		font-size: 32px;
		cursor: pointer;
	}
}
.fileTable {
	width: 100%;
	table,
	th,
	td {
		border: 1px #eaeaea solid;
		border-collapse: collapse;
	}
	th,
	td {
		text-align: center;
		color: #333;
		font-size: 14px;
		height: 35px;
	}
	th,
	tr:hover td {
		background-color: #f6f7f9;
	}
	table {
		width: 100%;
	}
	th {
		font-weight: bold;
	}
	td {
		padding: 20px 10px;
		transition: background-color 0.25s ease;
	}
}

.upload-demo {
	padding: 0 0 10px;
	height: auto;
	line-height: initial;
}

.fileList {
	position: relative;
	margin-top: 7px;
	height: 25px;
	line-height: 25px;
	&:hover .name {
		color: #409eff;
	}
	.name {
		cursor: pointer;
		color: #606266;
		transition: color 0.3s;
	}
	.close {
		position: absolute;
		top: 50%;
		right: 7px;
		margin-top: -7px;
		width: 14px;
		height: 14px;
		cursor: pointer;
		z-index: 1;
		&:after,
		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -5px;
			content: '';
			width: 1px;
			height: 10px;
			background-color: #606266;
		}
		&:after {
			transform: rotate(45deg);
		}
		&:before {
			transform: rotate(-45deg);
		}
	}
}
</style>
