<template>
	<view class="kd-card">
		<view class="card-title">
			<view class="fs_fw">
				<text v-if="orderTitle" class="orderTitle">{{ orderTitle }}</text>
				<text class="fs_fw">{{ title }}</text>
			</view>
			<text v-if="status" class="status" :class="statusListStyle[item.status]">
				{{ statusListOptions[item.status] }}
			</text>
		</view>
		<view @click="goDetail">
			<view class="card-body fs_fw">
				<view class="card-col">
					<text class="label">计划单号</text>
					<text class="content">{{ item.planCode }}</text>
				</view>
				<view class="card-col">
					<text class="label">计划名称</text>
					<text class="content">{{ item.planName }}</text>
				</view>
				<view class="card-col">
					<text class="label">盘点仓库</text>
					<text class="content">{{ item.warehouseName }}</text>
				</view>
				<view class="card-col">
					<text class="label">盘点部门</text>
					<text class="content">{{ item.executeGroupName }}</text>
				</view>
				<view class="card-col">
					<text class="label">盘点人员</text>
					<text class="content">{{ item.executorName }}</text>
				</view>
				<view class="card-col">
					<text class="label">计划开始时间</text>
					<text class="content">{{ item.startTime }}</text>
				</view>
				<view class="card-col">
					<text class="label">计划结束时间</text>
					<text class="content">{{ item.endTime }}</text>
				</view>
			</view>
			<view v-if="item.status == 0" class="card-footer borer-bottom" @click="goInventory">
				报工
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="card-footer fs_fw" style="float: right;" @click="goDetail">
				详情
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import itemConfig from './config.js'
	import dictMixins from '@/mixins/dictMixins'
	export default {
		mixins: [dictMixins],
		props: {
			title: String,
			orderTitle: String,
			item: {
				type: Object,
				default: () => ({})
			},
			type: {
				type: String,
				required: true
			},
			status: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				statusListStyle: {
					0: 'text-danger',
					1: 'text-warning',
					2: 'text-normal'
				},
				statusListOptions: {
					0: '待处理',
					1: '执行中',
					2: '已完成'
				},
				dictOpt: {
					asset: {
						1: {
							color: '#027DB4',
							backgroundColor: '#def5ff'
						},
						2: {
							color: '#B8741A',
							backgroundColor: '#fef1e8'
						},
						3: {
							color: '#A30014',
							backgroundColor: '#f9e5e7'
						},
						4: {
							color: 'green',
							backgroundColor: '#67C23A'
						},
						5: {
							color: '#a30014',
							backgroundColor: '#F56C6C'
						},
						6: {
							color: '#f56c6c',
							backgroundColor: '#fbc4c4'
						},
						7: {
							color: '#e6a23c',
							backgroundColor: '#fdf6ec'
						}
					}
				}
			}
		},
		created() {
			// this.requestDict('物品类型')
		},

		computed: {
			colOptions() {
				return (
					itemConfig[this.type] || [{
							label: '单号',
							key: 'workOrderCode'
						},
						{
							label: '申请人',
							key: 'applicantName'
						},
						{
							label: '申请时间',
							key: 'createTime'
						}
					]
				)
			}
		},
		methods: {
			// 报工
			goInventory() {
				let par = this.URLSearchParams({
					id: this.item.id,
					status: this.item.status
				})
				uni.navigateTo({
					url: '/pages/warehouse/workOrder/inventory/inventory?' + par
				})
			},
			// 详情
			goDetail() {
				let par = {
					id: this.item.id,
					planId: this.item.planId
				}
				par = this.URLSearchParams(par)
				uni.navigateTo({
					url: '/pages/warehouse/workOrder/details/details?' + par
				})
			},
			handleDetail() {
				this.$emit('handleDetail', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kd-card {
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		border-radius: 8rpx;
		word-break: break-all;

		.status {
			font-weight: normal;
			font-size: 30rpx;
		}

		.card-title {
			font-weight: bold;
		}

		.card-footer,
		.card-title {
			display: flex;
			justify-content: space-between;
			padding: 12rpx 28rpx;
		}

		.card-body {
			padding: 0 28rpx;
			border-top: 1rpx solid #f2f2f2;
			border-bottom: 1rpx solid #f2f2f2;
			position: relative;

			.asset {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				padding: 4rpx 8rpx;
			}

			.card-col {
				margin-top: 10rpx;
				display: flex;

				.label {
					// text-align: right;
					width: 28%;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 38rpx;
					word-wrap: break-word;
				}

				.content {
					flex: 1;
					width: 70%;
				}
			}
		}
	}

	.orderTitle {
		color: #4b7902;
		margin-right: 10rpx;
	}

	.fs_fw {
		font-size: 28rpx;
		line-height: 38rpx;
	}
</style>