<template>
	<view>
		<view class="listItemTitle">
			<view class="item" style="border-bottom: 1px solid #d8dbdf;">
				<view>{{item.purchaseNo}}|{{item.purchaseSerial}}</view>
				<view>{{item.arrivalQuantity}}{{$t('pcs')}}
					<text style="margin-left: 40rpx"><u-icon name="minus" color="#000" size="32" @click="deleGonds(idx)"></u-icon></text>
				</view>
			</view>
			<view class="item">
				<view>{{$t('品号：')}}{{item.materialNo}}</view>
				
			</view>
			<view class="item">{{$t('品名：')}}{{ item.mb002 }}</view>
			<view class="item">{{$t('图号')}}：{{ item.mb029 }}</view>
			<view class="item">
        <view>{{$t('批号：')}}</view>
        <view style="flex: 1; text-align: left;">
          <view v-if="!editable">{{ item.batchNo || '-' }}</view>
          <input
            v-else
            type="text"
            :value="item.batchNo"
            @input="onBatchNoInput"
            @focus="onEditStart"
            @blur="onEditEnd"
            style="width: 420rpx; display: inline-block; text-align: right; border: 1px solid #ddd; border-radius: 6px; padding: 0 10px; height: 60rpx; font-size: 28rpx;"
            :placeholder="$t('请输入批号')"
          />
        </view>
      </view>
      <view class="item">
        <view>{{$t('生产日期')}}：</view>
        <view style="flex: 1; text-align: left;">
          <view v-if="!editable">{{ formatNoDash(item.productionDate) || '-' }}</view>
          <uni-datetime-picker
            v-else
            type="date"
            :border="false"
            :clearIcon="true"
            :value="formatWithDash(item.productionDate)"
            @change="onProdDateChange"
          />
        </view>
      </view>
      <view class="item">
        <view>{{$t('有效日期')}}：</view>
        <view style="flex: 1; text-align: left;">
          <view v-if="!editable">{{ formatNoDash(item.effectiveDate) || '-' }}</view>
          <uni-datetime-picker
            v-else
            type="date"
            :border="false"
            :clearIcon="true"
            :value="formatWithDash(item.effectiveDate)"
            :start="formatWithDash(item.productionDate) || ''"
            @change="onEffDateChange"
          />
        </view>
      </view>
		</view>
	</view>
</template>

<script>
import i18n from '../../lang/index'
import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn
	},
	props: {
		item: {
			type: Object,
			default: function () {
				return {};
			}
		},
		idx: {
			type: Number,
			default: 0
		},
    editable: {
      type: Boolean,
      default: true
    }
	},
	computed:{
	},
	data() {
		return {
			show: true
		};
	},
	created() {
	},
	methods: {
		deleGonds(idx) {
			this.$emit('deleGonds',idx)
		},
    onProdDateChange(val) {
      const prodDash = typeof val === 'string' ? val : (val && val.detail ? val.detail.value : val)
      const prodNoDash = this.formatNoDash(prodDash)
      this.$emit('updateItem', { idx: this.idx, key: 'productionDate', value: prodNoDash })
      const shelf = Number(this.item.udf07) || 0
      if (shelf > 0 && prodNoDash) {
        const eDateDash = this.addDays(this.formatWithDash(prodNoDash), shelf)
        this.$emit('updateItem', { idx: this.idx, key: 'effectiveDate', value: this.formatNoDash(eDateDash) })
      }
    },
    onEffDateChange(val) {
      const effDash = typeof val === 'string' ? val : (val && val.detail ? val.detail.value : val)
      const prodDash = this.formatWithDash(this.item.productionDate)
      if (this.item.productionDate && effDash && effDash < prodDash) {
        this.$emit('updateItem', { idx: this.idx, key: 'effectiveDate', value: this.item.productionDate })
      } else {
        this.$emit('updateItem', { idx: this.idx, key: 'effectiveDate', value: this.formatNoDash(effDash) })
      }
    },
    addDays(yyyyMMdd, days) {
      const [y, m, d] = yyyyMMdd.split('-').map(n => Number(n))
      const dt = new Date(y, (m || 1) - 1, d || 1)
      dt.setDate(dt.getDate() + days)
      const yy = dt.getFullYear()
      const mm = String(dt.getMonth() + 1).padStart(2, '0')
      const dd = String(dt.getDate()).padStart(2, '0')
      return `${yy}-${mm}-${dd}`
    },
    onBatchNoInput(e) {
      const val = typeof e === 'string' ? e : (e && e.detail ? e.detail.value : '')
      this.$emit('updateItem', { idx: this.idx, key: 'batchNo', value: val })
    },
    onEditStart() {
      this.$emit('editing', true)
    },
    onEditEnd() {
      this.$emit('editing', false)
    },
    formatNoDash(val) {
      return val ? String(val).replace(/-/g, '') : ''
    },
    formatWithDash(val) {
      if (!val) return ''
      const s = String(val)
      if (s.includes('-')) return s
      if (s.length === 8) return `${s.slice(0,4)}-${s.slice(4,6)}-${s.slice(6)}`
      return s
    }
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f8f8f8;
}
.headerTitle {
	padding: 20rpx;
	font-weight: 600;
	.items {
		line-height: 40rpx;
	}
}
.btn {
	padding: 20rpx;
	background: #fff;
	.topSearch {
		margin-bottom: 20rpx;
	}
}
.bottomBtn {
	position: sticky;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	background: #fff;
	bottom: 0rpx;
	margin-top: 20rpx;
	.u-btn {
		width: 300rpx;
	}
}
.blue {
	color: #3f9dcc;
}
.total {
	background: #fff;
	color: #000;
	padding: 0rpx 40rpx;
	display: flex;
	justify-content: space-between;
	font-size: 32rpx;
	.line {
		margin: 0px 10rpx;
	}
}
.listItemTitle {
	width: 100%;
	padding: 20rpx;
	border-bottom: 2px solid #f8f8f8;
	.u-btn {
		width: 150rpx;
		margin: 0px;
		margin-top: 10rpx;
	}
	.item {
		width: 100%;
		line-height: 50rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 500;
		word-break: break-all;
		font-weight: 600;
	}
}
.listBottom {
	.bottomTitle {
		height: 80rpx;
		position: relative;
		.desc {
			color: #bbb;
			font-size: 24rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
		}
		.topIcons {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			color: #aaa;
		}
	}
	.bottomBox {
		padding: 20rpx;
		.bottomItem {
			background: #f8f8f8;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.items {
				color: #333;
				font-size: 24rpx;
				line-height: 40rpx;
				::v-deep .uni-easyinput{
					width: 200rpx;
				}
			}
			.inputItem{
				display: inline-flex;
				// line-height: 76rpx;
			}
		}
	}
}
::v-deep .u-sticky {
	top: 0 !important;
	background: #fff;
}
</style>
