<template>
	<a-card title="肥猪采食" style="margin-bottom: 10px">
		<a-select style="width: 200px; margin-bottom: 20px" v-model:value="active">
			<a-select-option v-for="item in unitList" :key="item.id" :value="item.unitId">{{item.unitName}}</a-select-option>
		</a-select>
		<a-row type="flex" justify="space-between">
			<a-col :span="4">
				<div class="pig_box">
					<div class="box_title">饲喂头数</div>
					<div class="box_num">{{info.fatCount}}</div>
				</div>
			</a-col>
			<a-col :span="4">
				<div class="pig_box">
					<div class="box_title">今日总采食量</div>
					<div class="box_num">{{info.todayFeed}}kg</div>
				</div>
			</a-col>
			<a-col :span="4">
				<div class="pig_box">
					<div class="box_title">今日总饮水量</div>
					<div class="box_num">{{info.todayWater}}kg</div>
				</div>
			</a-col>
			<a-col :span="4">
				<div class="pig_box">
					<div class="box_title">昨日总采食量</div>
					<div class="box_num">{{info.yesterdayFeed}}kg</div>
				</div>
			</a-col>
			<a-col :span="4">
				<div class="pig_box">
					<div class="box_title">昨日总饮水量</div>
					<div class="box_num">{{info.yesterdayWater}}kg</div>
				</div>
			</a-col>
		</a-row>
	</a-card>
	<a-card title="母猪采食">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
			<a-row :gutter="16">
				<a-col :span="4">
					<a-form-item label="母猪耳标号" name="eartagNum">
						<a-input v-model:value="searchFormState.eartagNum" placeholder="请输入母猪耳标号"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item>
						<a-button type="primary" @click="table.refresh(true)">
							<template #icon><SearchOutlined /></template>
							查询
							</a-button>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:expand-row-by-click="true"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:row-selection="options.rowSelection"
			@resizeColumn="(w, col) => {
				col.width = w
			}"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'todayFeed'">
					<span>{{record.todayFeed}}kg</span>
				</template>
				<template v-if="column.dataIndex === 'yesterdayFeed'">
					<span>{{record.yesterdayFeed}}kg</span>
				</template>
				<template v-if="column.dataIndex === 'yesterdayWater'">
					<span>{{record.yesterdayWater}}kg</span>
				</template>
				<template v-if="column.dataIndex === 'todayWater'">
					<span>{{record.yesterdayWater}}kg</span>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" @click="jump(record)">详情</a-button>
				</template>
			</template>
		</s-table>
	</a-card>
</template>

<script setup name="pig">
	import { useRouter } from "vue-router";
	import bizFeedDeviceApi from "@/api/biz/feed/bizFeedDeviceApi"
	import bizFeedPigApi from "@/api/biz/feed/bizFeedPigApi";

	const router = useRouter()
	const searchFormRef = ref()
	const searchFormState = ref({})

	const active = ref('')
	const unitList = ref([])
	const initDevice = async () => {
		let params = {
			type: 1
		}
		await bizFeedDeviceApi.getDeviceData(params).then((res) => {
			unitList.value = res
			active.value = res[0].unitId
		})
	}
	const info = ref({
		dayWeight: 0,
		fatCount: 0,
		rank: 0,
		todayFeed: 0,
		todayWater: 0,
		yesterdayFeed: 0,
		yesterdayWater: 0
	})
	const initData = async () => {
		let params = {
			unitId: active.value
		}
		await bizFeedPigApi.getPigData(params).then((res) => {
			info.value = res
		})
	}

	watch(active, () => {
		initData()
	})

	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const show = ref(true)
	const columns = [
		{
			title: '母猪耳标号',
			dataIndex: 'eartagNum',
			width: 150,
			fixed: true
		},
		{
			title: '设备编号',
			dataIndex: 'deviceCode',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '膘体状态',
			dataIndex: 'dayWeight',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '日期',
			dataIndex: 'createDate',
			width: 150,
			resizable: true,
			ellipsis: true,
			sorter: true
		},
		{
			title: '今日采食量',
			dataIndex: 'todayFeed',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '今日饮水量',
			dataIndex: 'todayWater',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '昨日采食量',
			dataIndex: 'yesterdayFeed',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '昨日饮水量',
			dataIndex: 'yesterdayWater',
			width: 150,
			resizable: true,
			ellipsis: true
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 200,
			fixed: 'right'
		}
	]
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}

	const loadData = async (parameter) => {
		return bizFeedPigApi.getPigPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			return res
		})
	}

	const jump = (record) => {
		router.push({
			path: '/biz/feed/pigDetail/index',
			query: {
				id: record.eartagNum,
				dayAge: record.dayNum,
				unitName: record.unitName
			}
		})
	}

	onMounted(async () => {
		await initDevice()
		// await initData()
	})
</script>

<style scoped>
	.pig_box {
		width: 100%;
		height: 120px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		padding: 15px 20px 0 20px;
	}
	.box_title {
		font-size: 16px;
		margin-bottom: 5px;
	}
	.box_num {
		font-size: 36px;
	}
</style>
