<template>
    <view class="product">

        <!-- 新增&详情-产品 -->
        <view class="header bp">
            <image class="opCollapse" src="/static/images/title.png" />
            <text class="title">{{ title || '产品' }}</text>
            <view class="ops">
                <image v-if="mode === 'add'" class="opAdd" @click="onAdd" src="/static/images/plus.png" />
                <view v-if="mode === 'view'" class="op1" @click="toggleViewCollapse">
                    <image class="opAdd" :src="collapsedView ? '/static/images/down.png' : '/static/images/up.png'" />
                    <text class="op">{{ collapsedView ? '展开' : '收起' }} </text>
                </view>

            </view>
        </view>

        <view v-if="mode === 'add'" class="section">
            <view v-for="(item, idx) in items" :key="'a-' + idx" class="block">
                <uni-list class="edit-list">
                    <uni-list-item title="牌号">
                        <template v-slot:footer>
                            <uni-easyinput v-model="item.brand" placeholder="请输入牌号" :inputBorder="false" />
                        </template>
                    </uni-list-item>
                    <uni-list-item title="厚度(mm)">
                        <template v-slot:footer>
                            <uni-easyinput type="digit" v-model="item.thickness" placeholder="请输入厚度"
                                :inputBorder="false" @input="onNonNegativeNumberInput($event, item, idx, 'thickness')"
                                @blur="onNonNegativeNumberBlur(item, idx, 'thickness')" />
                        </template>
                    </uni-list-item>
                    <uni-list-item title="厚度公差上限(mm)">
                        <template v-slot:footer>
                            <uni-easyinput type="number" v-model="item.thicknessTolPos" placeholder="请输入厚度公差上限"
                                :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'thicknessTolPos')"
                                @blur="onRealNumberBlur(item, idx, 'thicknessTolPos')" />
                        </template>
                    </uni-list-item>
                    <uni-list-item title="厚度公差下限(mm)">
                        <template v-slot:footer>
                            <uni-easyinput type="number" v-model="item.thicknessTolNeg" placeholder="请输入厚度公差下限"
                                :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'thicknessTolNeg')"
                                @blur="onRealNumberBlur(item, idx, 'thicknessTolNeg')" />
                        </template>
                    </uni-list-item>
                    <view v-show="!item.collapsed">
                        <uni-list-item title="宽度(mm)">
                            <template v-slot:footer>
                                <uni-easyinput type="digit" v-model="item.width" placeholder="请输入宽度"
                                    :inputBorder="false" @input="onNonNegativeNumberInput($event, item, idx, 'width')"
                                    @blur="onNonNegativeNumberBlur(item, idx, 'width')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="宽度公差上限(mm)">
                            <template v-slot:footer>
                                <uni-easyinput type="number" v-model="item.widthTolPos" placeholder="请输入宽度公差上限"
                                    :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'widthTolPos')"
                                    @blur="onRealNumberBlur(item, idx, 'widthTolPos')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="宽度公差下限(mm)">
                            <template v-slot:footer>
                                <uni-easyinput type="number" v-model="item.widthTolNeg" placeholder="请输入宽度公差下限"
                                    :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'widthTolNeg')"
                                    @blur="onRealNumberBlur(item, idx, 'widthTolNeg')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="长度(mm)">
                            <template v-slot:footer>
                                <uni-easyinput type="digit" v-model="item.length" placeholder="请输入长度"
                                    :inputBorder="false" @input="onNonNegativeNumberInput($event, item, idx, 'length')"
                                    @blur="onNonNegativeNumberBlur(item, idx, 'length')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="长度公差上限(mm)">
                            <template v-slot:footer>
                                <uni-easyinput type="number" v-model="item.lengthTolPos" placeholder="请输入长度公差上限"
                                    :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'lengthTolPos')"
                                    @blur="onRealNumberBlur(item, idx, 'lengthTolPos')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="长度公差下限(mm)">
                            <template v-slot:footer>
                                <uni-easyinput type="number" v-model="item.lengthTolNeg" placeholder="请输入长度公差下限"
                                    :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'lengthTolNeg')"
                                    @blur="onRealNumberBlur(item, idx, 'lengthTolNeg')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="状态">
                            <template v-slot:footer>
                                <uni-easyinput v-model="item.status" placeholder="请输入状态" :inputBorder="false" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="需发数量(kg)">
                            <template v-slot:footer>
                                <uni-easyinput type="digit" v-model="item.quantity" placeholder="请输入数量kg"
                                    :inputBorder="false"
                                    @input="onNonNegativeNumberInput($event, item, idx, 'quantity')"
                                    @blur="onNonNegativeNumberBlur(item, idx, 'quantity')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="实发数量(kg)">
                            <template v-slot:footer>
                                <uni-easyinput type="digit" v-model="item.shippedQuantity" placeholder="请输入实发数量kg"
                                    :inputBorder="false"
                                    @input="onNonNegativeNumberInput($event, item, idx, 'shippedQuantity')"
                                    @blur="onNonNegativeNumberBlur(item, idx, 'shippedQuantity')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="需求补货数量(kg)">
                            <template v-slot:footer>
                                <uni-easyinput type="digit" v-model="item.supplementaryQuantity"
                                    placeholder="请输入需求补货数量kg" :inputBorder="false"
                                    @input="onNonNegativeNumberInput($event, item, idx, 'supplementaryQuantity')"
                                    @blur="onNonNegativeNumberBlur(item, idx, 'supplementaryQuantity')" />
                            </template>
                        </uni-list-item>
                        <uni-list-item class="amount-item">
                            <template v-slot:body>
                                <view class="item-title"><text>单价</text></view>
                            </template>
                            <template v-slot:footer>
                                <view class="amount-row">
                                    <uni-easyinput type="digit" v-model="item.salesPrice" placeholder="0.00"
                                        :inputBorder="false"
                                        @input="onNonNegativeNumberInput($event, item, idx, 'salesPrice')"
                                        @blur="onNonNegativeNumberBlur(item, idx, 'salesPrice')" />
                                    <text class="unit">元</text>
                                </view>
                            </template>
                        </uni-list-item>
                        <uni-list-item class="amount-item">
                            <template v-slot:body>
                                <view class="item-title"><text>包装费</text></view>
                            </template>
                            <template v-slot:footer>
                                <view class="amount-row">
                                    <uni-easyinput type="digit" v-model="item.packagingFee" placeholder="0.00"
                                        :inputBorder="false"
                                        @input="onNonNegativeNumberInput($event, item, idx, 'packagingFee')"
                                        @blur="onNonNegativeNumberBlur(item, idx, 'packagingFee')" />
                                    <text class="unit">元</text>
                                </view>
                            </template>
                        </uni-list-item>
                        <uni-list-item title="生产科（车间）确认交付时间">
                            <template v-slot:footer>
                                <view class="value">{{ item.confirmedDeliveryDate }}</view>
                            </template>
                        </uni-list-item>
                        <uni-list-item title="备注">
                            <template v-slot:footer>
                                <uni-easyinput v-model="item.remarks" placeholder="请输入备注" :inputBorder="false" />
                            </template>
                        </uni-list-item>
                    </view>
                </uni-list>

                <view class="block-ops">
                    <div class="del" @click="onRemove(item.purchaseOrderId)">
                        <image src="/static/images/delete.png" class="icon" />
                        删除
                    </div>
                    <div class="toggle" @click="toggleItem(idx)">
                        <image :src="item.collapsed ? '/static/images/up.png' : '/static/images/down.png'"
                            class="icon" />
                        {{ item.collapsed ? '展开' : '收起' }}
                    </div>
                </view>
            </view>
        </view>

        <view v-else-if="mode === 'view'" class="view-list" v-show="!collapsedView">
            <view v-for="(item, idx) in items" :key="'v-' + idx" class="card">
                <view class="row"><text class="label">订单编号</text><text class="value">{{ item.orderNo }}</text></view>
                <view class="row"><text class="label">原订单计划发货日期</text><text class="value">{{ item.deliveryDate }}</text>
                </view>
                <view class="row"><text class="label">现申请发货日期</text><text class="value">{{ item.applyShipmentDate
                        }}</text>
                </view>
                <view class="row"><text class="label">申请次数</text><text class="value">{{ item.applyCount
                }}</text>
                </view>
                <view class="row"><text class="label">订单类型</text><text class="value">{{ item.orderType
                }}</text></view>
                <view class="row"><text class="label">所属分厂</text><text class="value">{{ item.workshopName }}</text>
                </view>
                <view class="row"><text class="label">客户名称</text><text class="value">{{
                    item.customerName }}</text></view>
                <view class="row"><text class="label">发货数量</text><text class="value">{{
                    item.quantity
                        }}</text>
                </view>
                <view class="row"><text class="label">延期原因</text><text class="value">{{ item.delayReason }}</text>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
import { uuid } from '@/utils/uuid.js'
export default {
    name: 'Product',
    props: {
        title: { type: String, default: '' },
        mode: { type: String, default: 'add' },
        list: { type: Array, default: () => [] },
    },
    data() {
        return {
            items: [],
            collapsedView: false,
            roleCodes: [],
        }
    },
    computed: {
    },
    watch: {
        items: {
            handler() { this.emitChange() },
            deep: true
        },
        list: {
            handler(v) {
                const arr = Array.isArray(v) ? v : []
                this.items = arr.map(x => {
                    const it = { ...this.defaultItem(), ...x, collapsed: true }
                    return it
                })
            },
            deep: true
        },
    },
    created() {
        const init = Array.isArray(this.list) && this.list.length > 0 ? this.list.map(v => ({ ...this.defaultItem(), ...v, collapsed: false })) : [{ ...this.defaultItem(), collapsed: false }]
        this.items = init;
    },
    methods: {
        defaultItem() {
            return {
                purchaseOrderId: uuid(),
                collapsed: false,
                id: '',
                orderNo: '',
                deliveryDate: '',
                applyShipmentDate: '',
                applyCount: '',
                orderType: '',
                workshopName: '',
                customerName: '',
                quantity: '',
                delayReason: '',
            }
        },

        onAdd() {
            const obj = this.defaultItem()
            obj.collapsed = true
            this.items.push(obj)
            this.emitChange()
        },
        onRemove(id) {
            if (!id) return
            uni.showModal({
                title: '系统提示',
                content: '是否确定删除选中的产品？',
                confirmText: '确定',
                cancelText: '取消',
                success: (res) => {
                    if (res && res.confirm) {
                        const i = this.items.findIndex(it => String(it.purchaseOrderId) === String(id))
                        if (i >= 0) {
                            this.items.splice(i, 1)
                            this.emitChange()
                        }
                    }
                }
            })
        },
        toggleItem(idx) {
            const it = this.items[idx]
            if (!it) return
            it.collapsed = !it.collapsed
            this.$set(this.items, idx, it)
        },
        emitChange() {
            const out = this.items.map(it => ({ ...it }))
            this.$emit('input', out)
            this.$emit('update:value', out)
            this.$emit('change', out)
        },
        onNonNegativeNumberInput(val, item, idx, field) {
            let v = String(val != null ? val : (item && item[field]) || '')
            v = v.replace(/[^0-9.]/g, '')
            v = v.replace(/(\..*)\./g, '$1')
            if (v.startsWith('.')) v = '0' + v
            if (v === '') { item[field] = ''; if (typeof idx === 'number') this.$set(this.items, idx, { ...item }); return }
            const num = Number(v)
            if (isNaN(num) || num < 0) {
                item[field] = '0'
            } else {
                item[field] = v
            }
            if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
        },
        onNonNegativeNumberBlur(item, idx, field) {
            const v = String((item && item[field]) || '')
            const num = Number(v)
            if (isNaN(num) || num < 0) item[field] = '0'
            if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
        },
        onRealNumberInput(val, item, idx, field) {
            let s = String(val != null ? val : (item && item[field]) || '')
            const neg = s.trim().startsWith('-')
            s = s.replace(/[^0-9.\-]/g, '')
            s = s.replace(/(?!^)-/g, '')
            s = s.replace(/(\..*)\./g, '$1')
            if (s.startsWith('.')) s = '0' + s
            if (s.startsWith('-.')) s = '-0.' + s.slice(2)
            if (neg && !s.startsWith('-')) s = '-' + s.replace(/-/g, '')
            item[field] = s
            if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
        },
        onRealNumberBlur(item, idx, field) {
            const s = String((item && item[field]) || '')
            if (s === '') { if (typeof idx === 'number') this.$set(this.items, idx, { ...item }); return }
            const n = Number(s)
            if (isNaN(n)) item[field] = ''
            if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
        },
        toggleViewCollapse() {
            this.collapsedView = !this.collapsedView
        },
        onDeliveryChange(e, item, idx) {
            const getStr = (x) => {
                if (x && x.detail && x.detail.value !== undefined) return x.detail.value
                if (typeof x === 'string') return x
                return item && item.deliveryDate ? item.deliveryDate : ''
            }
            const val = getStr(e)
            if (!val || !this.orderDate) return
            const parse = (s) => {
                const p = String(s).replace(/\//g, '-').split('-')
                const y = Number(p[0])
                const m = Number(p[1])
                const d = Number(p[2])
                return new Date(y, m - 1, d)
            }
            const sel = parse(val)
            const ord = parse(this.orderDate)
            if (!(sel > ord)) {
                item.deliveryDate = ''
                this.$set(this.items, idx, { ...item })
                uni.showToast({ title: '发货日期必须大于订货日期', icon: 'none' })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.header {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;

    &.bp {
        border-bottom: 1px solid #f0f0f0;
    }
}

.dot {
    width: 16rpx;
    height: 16rpx;
    background: #3D48A3;
    border-radius: 50%;
    margin-right: 12rpx;
}

.title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 600;
}

.ops {
    margin-left: auto;
}

.op {
    color: $theme-primary;
    font-size: 28rpx;
    margin-left: 8rpx;
}

.op1 {
    display: flex;
    align-items: center;
}

.opAdd {
    color: rgba(0, 0, 0, 0.6);
    width: 40rpx;
    height: 40rpx;
}

.opCollapse {
    color: rgba(0, 0, 0, 0.6);
    width: 32rpx;
    height: 28rpx;
    margin-right: 16rpx;
}

::v-deep .uni-list {
    background: transparent;

    .uni-list--border-top {
        background-color: transparent !important;
    }

    &-item {
        &__extra-text {
            font-size: 32rpx;
        }

        &__content-title {
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
        }

        &__container {
            padding: 32rpx;

            .uni-easyinput {

                .is-disabled {
                    background-color: transparent !important;
                }

                &__placeholder-class {
                    font-size: 32rpx;
                    color: rgba(0, 0, 0, 0.4);
                }

                &__content {
                    border: none;

                    &-input {
                        padding-left: 0 !important;
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 32rpx;
                    }

                    .content-clear-icon {
                        font-size: 44rpx !important;
                    }
                }
            }

            .amount-row {
                flex: 1;
                display: flex;
                align-items: center;

                .uni-easyinput {
                    flex: 1;
                }

                .unit {
                    margin-left: 16rpx;
                    color: rgba(0, 0, 0, 0.9);
                }
            }

            .item-title,
            .uni-list-item__content {
                flex: none;
                min-height: 48rpx;
                line-height: 48rpx;
                font-size: 32rpx;
                position: relative;
                width: 210rpx;
                margin-right: 32rpx;
                color: rgba(0, 0, 0, 0.9);
                padding-right: 0;


                .required {
                    color: red;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -16rpx;
                }
            }

        }

        &.select-item {
            &.is-empty {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.4) !important;
                }
            }

            &.is-filled {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.9) !important;
                }
            }

            .serial-number-row {
                display: flex;
                align-items: center;
            }

        }

        &.mgb10 {
            margin-bottom: 20rpx;
        }

    }

    .title-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 32rpx 32rpx 22rpx;

        &_icon {
            width: 32rpx;
            height: 28rpx;
            margin-right: 16rpx;
        }

        span {
            color: rgba(0, 0, 0, 0.9);
            font-size: 32rpx;
            line-height: 44rpx;
            font-weight: 600;
        }
    }
}

/* 只读 easyinput 根据内容自适应高度 */
::v-deep .uni-list-item__container {
    align-items: flex-start;
}

.block-ops {
    display: flex;
    padding: 20rpx 32rpx 20rpx;
    justify-content: space-around;
}

.del {
    color: #D54941;
    font-size: 28rpx;
    display: flex;
    align-items: center;

    image {
        width: 40rpx;
        height: 40rpx;
    }
}

.toggle {
    color: $theme-primary;
    font-size: 28rpx;
    display: flex;
    align-items: center;

    image {
        width: 40rpx;
        height: 40rpx;
    }
}

.section {
    background: #f1f1f1;
    margin-bottom: 20rpx;

    .block {
        background: #ffffff;
        // padding: 32rpx 0;
        margin-bottom: 20rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .row {
        display: flex;
        // margin-bottom: 24rpx;
        line-height: 32rpx;
        padding: 32rpx;
        border-bottom: 1rpx solid #f2f2f2;


        &.noneStyle {
            border-bottom: 0;
            border-bottom: none;
        }

        &.row-spec {
            align-items: center;
        }
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .label {
        width: 210rpx;
        margin-right: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        line-height: 48rpx;
    }

    .value {
        flex: 1;
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        white-space: pre-wrap;
        word-break: break-all;
        line-height: 48rpx;
    }

    .value-spec {
        height: 48rpx;
        display: flex;
        align-items: center;
        color: #000000;

        &_box {
            position: relative;
            width: 60rpx;
            height: 48rpx;

            &_1 {
                font-size: 16rpx;
                position: absolute;
                top: -10rpx;
                left: 0;
            }

            &_2 {
                font-size: 16rpx;
                position: absolute;
                bottom: -10rpx;
                left: 0;
            }
        }

        &_val {
            font-size: 28rpx;

            &.p12 {
                padding-right: 12rpx;
            }
        }
    }

    .view-total {
        padding-top: 20rpx;

        .head {
            font-size: 32rpx;
            font-weight: 600;
            line-height: 50rpx;
            color: rgba(0, 0, 0, 0.9);
            padding-bottom: 16rpx;
            margin-bottom: 24rpx;
            border-bottom: 1px dashed #E7E7E7;
        }

        .row {
            display: flex;
            margin-bottom: 24rpx;
            line-height: 32rpx;

            .label {
                width: 180rpx;
                margin-right: 14rpx;
                color: rgba(0, 0, 0, 0.6);
                font-size: 28rpx;
            }

            .value {
                flex: 1;
                color: rgba(0, 0, 0, 0.9);
                font-size: 28rpx;
                white-space: pre-wrap;
                word-break: break-all;
            }
        }
    }
}


.view-list {
    padding: 26rpx 32rpx;
    background: #ffffff;

    .card {
        background: #f3f3f3;
        border-radius: 16rpx;
        padding: 32rpx 44rpx;
        margin-bottom: 20rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .row {
        display: flex;
        margin-bottom: 24rpx;
        line-height: 32rpx;

        &.row-spec {
            height: 60rpx;
            align-items: center;
        }
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .label {
        width: 260rpx;
        margin-right: 14rpx;
        color: rgba(0, 0, 0, 0.6);
        font-size: 28rpx;
    }

    .value {
        flex: 1;
        color: rgba(0, 0, 0, 0.9);
        font-size: 28rpx;
        white-space: pre-wrap;
        word-break: break-all;
    }

    .value-spec {
        height: 60rpx;
        display: flex;
        align-items: center;
        color: #000000;

        &_box {
            position: relative;
            width: 60rpx;
            height: 60rpx;

            &_1 {
                font-size: 16rpx;
                position: absolute;
                top: 0;
                left: 0;
            }

            &_2 {
                font-size: 16rpx;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }

        &_val {
            font-size: 28rpx;

            &.p12 {
                padding-right: 12rpx;
            }
        }
    }

    .view-total {
        padding-top: 20rpx;

        .head {
            font-size: 32rpx;
            font-weight: 600;
            line-height: 50rpx;
            color: rgba(0, 0, 0, 0.9);
            padding-bottom: 16rpx;
            margin-bottom: 24rpx;
            border-bottom: 1px dashed #E7E7E7;
        }

        .row {
            display: flex;
            margin-bottom: 24rpx;
            line-height: 32rpx;

            .label {
                width: 180rpx;
                margin-right: 14rpx;
                color: rgba(0, 0, 0, 0.6);
                font-size: 28rpx;
            }

            .value {
                flex: 1;
                color: rgba(0, 0, 0, 0.9);
                font-size: 28rpx;
                white-space: pre-wrap;
                word-break: break-all;
            }
        }
    }
}
</style>