<template>
	<view>
		<view class="filter-bar">
			<view :class="`inspection left-btn ${activedIndex==0? 'active':''}`" @tap="switchTab(0)">
				安全管理日志
			</view>
			<view :class="`rectification left-btn ${activedIndex==1? 'active':''}`" @tap="switchTab(1)">
				安全检查记录
			</view>
			<u-button class='filter-btn' icon="map" text="筛选"></u-button>
		</view>
		<view class="quality-issues">
			<IssueItems
				:fields="{issuesName:'质量问题',person:'填报人员',submitDate:'填报日期',content:'整改内容',assignDate:'指派日期',feedback:'整改反馈',rectificationDate:'整改日期'}"
				:data="{
				issuesName:'采购电缆发现存在残次品',person:'离散多',submitDate:'2022/07/03',content:'发现800捆电缆中66捆存在残次品，需联系供应商进行全面更换',assignDate:'2022/07/03',
				feedback:'已联系供应商进行全面更换，等待更换',rectificationDate:'2022/07/03',assignDate:'2020/11/32'
			}">
			</IssueItems>
		</view>
	</view>
</template>

<script>
	import IssueItems from '../issue-item/issue-item.vue'
	// import Inspection from './inspection/inspection.vue'
	export default {
		components: {
			IssueItems,
			// Inspection
		},
		data() {
			return {
				activedIndex: 0
			}
		},
		methods: {
			switchTab(index) {
				this.activedIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quality-issues {
		// margin-top: 88rpx;
		padding: 20rpx;
	}

	.filter-bar {
		width: 750rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		background-color: #fff;

		.left-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 187rpx;
			height: 88rpx;
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #8F959E;
			letter-spacing: 0;
			line-height: 24rpx;
			font-weight: 400;
		}

		.active {
			color: #466DF6;
		}

		.inspection {}

		.rectification {}

		.filter-btn {
			width: 122rpx;
			height: 56rpx;
			margin-right: 32rpx;
		}
	}
</style>
