<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>自定义整个列表内容,框架内置处理分页、数据绑定等</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="card-list">
					<view v-for="(row, index) in filteredData" :key="row.processCode" class="card" @click="rowClick(row)">
						<view class="card-header">
							<view class="card-title">{{ row.processName }}</view>
							<view class="card-tag" :class="'tag-' + row.tagType">{{ row.status }}</view>
						</view>
						<view class="card-content">
							<view class="card-info">
								<view class="info-line">物料：{{ row.materialName }} × {{ row.materialAmount }}</view>
								<view class="info-line">提交人：{{ row.submitter }}</view>
								<view class="info-line">提交时间：{{ row.submitTime }}</view>
							</view>
							<u-icon name="arrow-right" color="#c8c9cc" size="14"></u-icon>
						</view>
						<vol-progress :percentage="row.progress"
							:activeColor="row.tagType === 'error' ? '#ee0a24' : '#1989fa'">
							<text>进度 {{ (row.progress || 0) }} %</text>
						</vol-progress>
					</view>
					<view v-if="!filteredData.length" class="card-empty">暂无匹配工序</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, computed, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
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' },
	{ title: '状态', field: 'status', width: 80 },
	{ title: '进度', field: 'progress', width: 80 }
])

const tableData = ref([
	{
		processCode: 'PR001', processName: '插轴工序跟进', materialName: '螺丝', materialAmount: 100,
		submitter: '张三', submitTime: '2024-01-15 08:20', status: '进行中', tagType: 'primary', progress: 60
	},
	{
		processCode: 'PR003', processName: '下盖打码任务', materialName: '包装盒', materialAmount: 200,
		submitter: '王五', submitTime: '2024-01-17 14:45', status: '逾期', tagType: 'error', progress: 30
	}
])

const filteredData = computed(() => {
	const q = (processName.value || '').trim()
	if (!q) return tableData.value
	return tableData.value.filter((r) =>
		(r.processName && r.processName.indexOf(q) > -1) ||
		(r.processCode && r.processCode.indexOf(q) > -1)
	)
})

const rowClick = (row) => proxy.$toast(`查看 ${row.processName}`)
const loadData = () => proxy.$toast(processName.value ? `搜索：${processName.value}` : '已刷新')
</script>