<template>
	<view class="todo-page">
		<view class="card">
			<view class="background"></view>
			<view>
				<u--form labelPosition="left" labelWidth="auto" labelAlign="center" :model="model" class="demo-ruleForm">
					<u-form-item required label="筛选" @click="handleShowSheet({title: '筛选', name: 'Nav_JoinDepartment'})" borderBottom>
						<u--input disabledColor="#fff" v-model="type" disabled placeholder="请选择筛选条件" suffixIcon="arrow-down" suffixIconStyle="font-size:12px" fontSize="14px" border="none"
							customStyle="margin:0px;display:flex;padding:3px 0px" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="调查名称：" prop="NAME" borderBottom>
						<u--input v-model="model.NAME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="发起时间：" prop="LAUNCH_TIME" borderBottom>
						<u--input v-model="model.LAUNCH_TIME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="发起部门：" prop="Nav_LaunchDepartment.NAME" borderBottom>
						<u--input v-if="model.Nav_LaunchDepartment" v-model="model.Nav_LaunchDepartment.NAME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="发起人员：" prop="Nav_LaunchUser.NAME" borderBottom>
						<u--input v-if="model.Nav_LaunchUser" v-model="model.Nav_LaunchUser.NAME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="截止时间：" prop="END_TIME" borderBottom>
						<u--input v-model="model.END_TIME" border="none" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="参与人员">
						<!-- <u-icon name="arrow-down" size="12" slot="right"></u-icon> -->
					</u-form-item>
					<view class="tag-view" v-if="model.Nav_JoinDepartment">
						<uni-tag class="tag" v-for="(i, k) in model.Nav_JoinDepartment.filter(i => !i.IS_DELETED)" :key="k" :inverted="true" :text="i.Nav_Department.NAME" type="primary" />
					</view>
					<u-form-item label="调查内容">
						<!-- <u-icon name="arrow-down" size="12" slot="right"></u-icon> -->
					</u-form-item>
					<view class="tag-view" v-if="model.Nav_Points">
						<uni-tag class="tag" v-for="(i, k) in model.Nav_Points.filter(i => !i.IS_DELETED)" :key="k" :inverted="true" :text="i.Nav_Point.NAME" type="primary" />
					</view>
					<view class="table-container" v-if="ROWS && ROWS.length > 0">
						<table>
						 <tr>
						            <th colspan="100%" style="text-align: center; background-color: #f5f7fa; font-weight: bold; padding: 12px;">
						                答案正确率(百分比)
						            </th>
						        </tr>
							<!-- 动态渲染表格行 -->
							<tr v-for="(row, rowIndex) in ROWS" :key="rowIndex">

								<!-- 如果是第一行，使用 u-th 作为表头 -->
								<template v-if="rowIndex === 0">
									<th v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</th>
								</template>
								<!-- 其他行使用 u-td -->
								<template v-else>
									<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}<span v-if="cellIndex!==0">%</span></td>
								</template>
							</tr>
						</table>
					</view>
				</u--form>
			</view>

		</view>
		<u-picker :show="comPickerInfo.showSheet" :columns="comPickerInfo.columns" @confirm="onConfirmPicker" @close="closePicker" @cancel="closePicker" keyName="NAME"></u-picker>
	</view>
</template>

<script>
	import {
		initFilter,
		extendRule,
		extendInclude
	} from '../../../../utils/common'
	import {
		getRequest,
	} from '../../../../services/apply/FOServices/FOServices'
	import '../../../../utils/showMsg.js'
	import color from '../../../../uni_modules/uview-ui/libs/config/color'
	import config from '../../../../config/common'
	import {
		getEnum
	} from '../../../../services/common';
	export default {
		data() {
			return {
				model: {},
				TaskID: "",
				tableKey: '0',
				isLoadOK: false,
				paddingBottom: '170',
				LEAVE_REASON: '',
				users: '',
				orgId: uni.getStorageSync('orgId'),
				listPropUpload: ['NOTIFY_ID'],
				listPropValUpload: [],
				Lists: [],
				type: '部门',
				ROWS: [],
				comPickerInfo: {
					showSheet: false,
					columns: [],
					title: '',
					dataIndex: undefined,
					formIndex: undefined,
					name: ''
				},
			}
		},
		onLoad(option) {
			this.model.ID = option.ID;
			this.model.ORG_ID_HV = option.ORG_ID_HV
			this.TaskID = option.taskID;
			this.tableKey = option.tableKey ? option.tableKey : '0'

			this.loadData()
		},
		methods: {
			loadData() {
				const json = initFilter(this.orgId, "", "CODE", 1)
				json.Parameter22 = this.model.ORG_ID_HV;
				json.OrgType = 2;
				json.Parameter3 = this.type;
				json.Parameter1 = this.model.ID;

				getRequest(json, "/SE/SESafeSurvey/GetReport").then(res => {
					this.model = res.SURVEY[0]
					this.ROWS = res.ROWS
					this.isLoadOK = true;
				})
			},
			//下拉数据加载
			async handleShowSheet(p) {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "", 0)
				let dataSelect = ['部门', '人员', '岗位']
				if (dataSelect.length) {
					this.comPickerInfo = {
						showSheet: true,
						title: p.title,
						name: p.name,
						dataIndex: p.dataIndex,
						columns: [dataSelect]
					}
				} else {
					// 暂无数据
				}
			},
			// 整改实施单位 departmentName Nav_DepartmentDeal  整改责任人 Nav_UserDeal  userDetailer  验收人Nav_UserCheck userChecker

			onConfirmPicker(e) {
				const {
					name,
					dataIndex
				} = this.comPickerInfo
				this.type = e.value[0]
				this.comPickerInfo.showSheet = false
				this.loadData()
			},

			closePicker() {
				this.comPickerInfo = {
					showSheet: false,
					columns: [],
					title: '',
					name: '',
					formIndex: undefined
				}
			},
		},
		computed: {

		}
	}
</script>

<style>
	/* @import url("@/style/css/editTemplate.css"); */
	.background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #edf1fd;
		z-index: -1;
	}

	.todo-page {
		/* padding-bottom: 10px; */
		overflow: hidden;
	}

	.card {
		margin: 20px 16px 180px 16px;
		padding: 20px 30px 80px 30px;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.upload-title {
		font-size: 14px;
		color: #8e8b9c;
		line-height: 22px;
		padding: 8px 0px;
	}

	.btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 16px;
		z-index: 1000;
		background: #fff;
		box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
	}

	.btn-wrap>>>.u-textarea__field {
		font-size: 14px;
	}

	.btn-wrap>>>.u-cell__title-text {
		font-size: 14px;
	}

	.buttons {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.buttons .first-btn {
		margin-right: 20px;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-textarea {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	/* 表格样式 */
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 16px 0;
		font-size: 14px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	/* 表头样式 */
	th {
		background-color: #f5f7fa;
		color: #606266;
		font-weight: 600;
		text-align: center;
		padding: 12px 8px;
		border-bottom: 1px solid #e0e0e0;
		white-space: nowrap;
	}

	/* 表体单元格样式 */
	td {
		padding: 12px 8px;
		text-align: center;
		border-bottom: 1px solid #f0f0f0;
		color: #333;
		background-color: #fff;
	}

	/* 隔行变色效果 */
	tr:nth-child(even) td {
		background-color: #fafafa;
	}

	/* 最后一行底部边框去除 */
	tr:last-child td {
		border-bottom: none;
	}

	/* 首列和尾列适当加宽 */
	th:first-child,
	td:first-child {
		padding-left: 16px;
		text-align: left;
	}

	th:last-child,
	td:last-child {
		padding-right: 16px;
		text-align: right;
	}

	/* 表头与数据行之间的分割线 */
	tr:first-child th {
		border-bottom: 1px solid #d0d7e5;
	}

	/* 悬停效果（可选） */
	tr:hover td {
		background-color: #f0f8ff;
	}

	/* 移动端优化：允许横向滚动 */
	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 16px -8px;
		padding: 0 8px;
	}

	/* 如果希望表格固定在卡片内，可以这样调整 */
	.card table {
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
	}

	/* 小屏幕优化 */
	@media (max-width: 375px) {
		table {
			font-size: 13px;
		}

		th,
		td {
			padding: 10px 6px;
		}
	}
</style>