<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>框架内部已实现分页自动加载数据、table高度自适应，只需自定义表格内容</view>
		</vol-alert>
		<view class="search">
			<u-search @search="loadData" placeholder="请输工序名称" v-model="processName"
				@custom="loadData" @clear="loadData" :showAction="true" clearabled actionText="搜索">
			</u-search>
		</view>
		<vol-table :height="0" :table-data="tableData" :columns="columns">
			<template #data>
				<view class="fx-item" @click="rowClick(row)" :class="{ 'fx-item-activd': !!row.checked }"
					v-for="(row, index) in tableData" :key="index">
					<view class="item-title">
						<view class="border-name"></view>
						<view style="flex: 1;">{{ row.processCode }}</view>
						<view>{{ row.submitTime }}</view>
						<u-icon color="rgb(217 217 217)" name="arrow-right"></u-icon>
					</view>
					<view class="fx fx-item-row">
						<view class="fx-1 fx-row"><text class="fx-text">工序编号:</text><view class="fx-value">{{ row.processCode }}</view></view>
						<view class="fx-1 fx-row"><text class="fx-text">工序:</text><view class="fx-value">{{ row.processName }}</view></view>
					</view>
					<view class="fx fx-item-row">
						<view class="fx-1 fx-row"><text class="fx-text">物料名称:</text><view class="fx-value">{{ row.materialName }}</view></view>
						<view class="fx-1 fx-row"><text class="fx-text">用料数量:</text><view class="fx-value">{{ row.materialAmount }}</view></view>
					</view>
					<view class="fx fx-item-row">
						<view class="fx-1 fx-row"><text class="fx-text">提交人员:</text><view class="fx-value">{{ row.submitter }}</view></view>
						<view class="fx-1 fx-row">
							<text class="fx-text">关键工序:</text>
							<view class="fx-value">
								<u-tag v-if="index % 2" text="是" size="mini" type="error" plainFill plain></u-tag>
								<u-tag v-else text="否" size="mini" type="success" plainFill plain></u-tag>
							</view>
						</view>
					</view>
					<view class="fx">
						<view class="fx-1"></view>
						<view class="fx btns">
							<vol-button size="small" type="default">查看</vol-button>
							<vol-button size="small" type="primary">完成</vol-button>
						</view>
					</view>
				</view>
			</template>
		</vol-table>
	</view>
</template>
<!--
更多表单配置：http://app.volcore.xyz/docs/app/form/
更多表格配置：http://app.volcore.xyz/docs/app/table/
-->
<script setup>
import { ref } from 'vue'
const processName = ref('')

const columns = ref([
	{ title: '工序编号', field: 'processCode', width: 80 },
	{ title: '工序名称', field: 'processName', width: 85 },
	{ title: '物料名称', field: 'materialName', width: 80 },
	{ title: '用料数量', field: 'materialAmount', width: 80 },
	{ title: '提交人员', field: 'submitter', width: 80 },
	{ title: '提交时间', field: 'submitTime', width: 170, type: 'date' }
])

const tableData = ref([
	{ processCode: 'PR001', processName: '插轴', materialName: '螺丝', materialAmount: 100, submitter: '张三', submitTime: '2022-01-15 08:20' },
	{ processCode: 'PR002', processName: '整平', materialName: '电路板', materialAmount: 50, submitter: '李四', submitTime: '2022-01-16 10:30' }
])

const rowClick = (row) => { row.checked = !row.checked }
const loadData = () => { }
</script>