<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <uni-list>
                <!-- 项目名称 -->
                <uni-list-item class="select-item" :class="form.name ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>项目名称</text></view>
                    </template>
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.name" :inputBorder="false" placeholder="请输入项目名称" />
                    </template>
                </uni-list-item>

                <!-- 品种 -->
                <uni-list-item class="select-item" :class="form.productId ? 'is-filled' : 'is-empty'" clickable
                    @click="openProductSheet" :rightText="form.productName || '请选择品种'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>品种</text></view>
                    </template>
                </uni-list-item>

                <!-- 数量 -->
                <uni-list-item class="select-item" :class="form.quantity !== '' && form.quantity != null ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>数量（吨）</text></view>
                    </template>
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.quantity" type="digit" :inputBorder="false" placeholder="请输入数量" @blur="onQuantityBlur" />
                    </template>
                </uni-list-item>

                <!-- 开始时间 -->
                <uni-list-item class="select-item" :class="form.startTime ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>开始时间</text></view>
                    </template>
                    <template v-slot:footer>
                        <uni-datetime-picker type="datetime" v-model="form.startTime" :hide-second="true" :clear-icon="false" />
                    </template>
                </uni-list-item>

                <!-- 截止时间 -->
                <uni-list-item class="select-item" :class="form.endTime ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>截止时间</text></view>
                    </template>
                    <template v-slot:footer>
                        <uni-datetime-picker type="datetime" v-model="form.endTime" :hide-second="true" :clear-icon="false" />
                    </template>
                </uni-list-item>

                <!-- 项目类型 -->
                <uni-list-item class="select-item" :class="form.projectType ? 'is-filled' : 'is-empty'" clickable
                    @click="openDictSheet('projectType', 'PROJECT_TYPE', '项目类型')" :rightText="getProjectTypeLabel() || '请选择项目类型'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>项目类型</text></view>
                    </template>
                </uni-list-item>

                <!-- 开标时间 - 仅项目类型为集中开标时显示 -->
                <uni-list-item v-if="isConcentratedBid" class="select-item" :class="form.bidTime ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>开标时间</text></view>
                    </template>
                    <template v-slot:footer>
                        <uni-datetime-picker type="datetime" v-model="form.bidTime" :hide-second="true" :clear-icon="false" />
                    </template>
                </uni-list-item>

                <!-- 采购规则 -->
                <uni-list-item class="select-item textarea-item" :class="form.purchaseRule ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>采购规则</text></view>
                    </template>
                    <template v-slot:footer>
                        <uni-easyinput type="textarea" v-model="form.purchaseRule" :inputBorder="false"
                            placeholder="请输入采购规则" :autoHeight="true" />
                    </template>
                </uni-list-item>
            </uni-list>
        </scroll-view>

        <view class="footer">
            <button class="btn submit" @click="onSubmit">提交</button>
        </view>

        <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options"
            v-model="sheet.value" @confirm="onSheetConfirm" />
    </view>
</template>

<script>
import SingleSelectSheet from '@/components/single-select/index.vue'
import { supplierQuotationProjectSaveApi } from '@/api/procure-manage/supplierQuotationProject.js'
import { breedRelationshipQueryApi } from '@/api/procure-manage/salesmanQuotation.js'
import { getDicByCodes } from '@/utils/dic.js'

export default {
    name: 'AddSupplierPrice',
    components: { SingleSelectSheet },
    data() {
        return {
            form: {
                name: '',
                productId: '',
                productName: '',
                quantity: '',
                startTime: '',
                endTime: '',
                projectType: '',
                bidTime: '',
                purchaseRule: ''
            },
            productList: [],
            dictData: {},
            sheet: {
                visible: false,
                title: '',
                options: [],
                value: '',
                field: '',
                isDict: false
            }
        }
    },
    computed: {
        isConcentratedBid() {
            // 项目类型为"集中开标"时显示开标时间
            const opts = this.getDictOptions('PROJECT_TYPE') || []
            const m = opts.find(o => String(o.code != null ? o.code : o.value) === String(this.form.projectType))
            const label = m ? (m.name || m.label || '') : ''
            return label.indexOf('集中开标') > -1
        }
    },
    onLoad() {
        this.loadDictData()
        this.loadProducts()
    },
    methods: {
        async loadDictData() {
            try {
                const res = await getDicByCodes(['PROJECT_TYPE'])
                this.dictData = res || {}
            } catch (e) {
                this.dictData = {}
            }
        },
        getDictOptions(dictCode) {
            const data = this.dictData[dictCode]
            return (data && data.data) ? data.data : (Array.isArray(data) ? data : [])
        },
        async loadProducts() {
            try {
                const res = await breedRelationshipQueryApi({ pageIndex: 1, pageSize: 9999 })
                const _data = res && res.data ? res.data : {}
                const list = _data.datas || _data.list || _data.records || []
                this.productList = list.map(it => ({
                    label: it.productName || it.name || '',
                    value: it.productId || it.id || ''
                }))
            } catch (e) {
                this.productList = []
            }
        },
        getProjectTypeLabel() {
            const opts = this.getDictOptions('PROJECT_TYPE') || []
            const m = opts.find(o => String(o.code != null ? o.code : o.value) === String(this.form.projectType))
            return m ? (m.name || m.label || '') : ''
        },
        openProductSheet() {
            const opts = (this.productList || []).map(p => ({ label: p.label, value: p.value }))
            const cur = this.form.productId
            const match = opts.find(o => String(o.value) === String(cur))
            this.sheet = {
                visible: true,
                title: '请选择品种',
                options: opts,
                value: match ? match.value : '',
                field: 'productId',
                isDict: false
            }
        },
        openDictSheet(field, dictCode, title) {
            const raw = this.getDictOptions(dictCode) || []
            const opts = raw.map(o => ({ label: o.name || o.label || '', value: o.code != null ? o.code : (o.value != null ? o.value : '') }))
            const cur = this.form[field]
            const match = opts.find(o => String(o.value) === String(cur))
            this.sheet = {
                visible: true,
                title: title || '请选择',
                options: opts,
                value: match ? match.value : '',
                field,
                isDict: true
            }
        },
        onSheetConfirm({ value }) {
            const field = this.sheet.field
            if (!field) return
            this.form[field] = value
            if (field === 'productId') {
                const m = (this.productList || []).find(p => String(p.value) === String(value))
                this.form.productName = m ? m.label : ''
            }
            // 切换项目类型时，若不再是集中开标则清空开标时间
            if (field === 'projectType' && !this.isConcentratedBid) {
                this.form.bidTime = ''
            }
        },
        onQuantityBlur() {
            let v = this.form.quantity
            if (v === '' || v == null) return
            v = parseFloat(v)
            if (isNaN(v)) {
                this.form.quantity = ''
                return
            }
            this.form.quantity = String(v)
        },
        formatDateTimeMinute(v) {
            const s = v == null ? '' : String(v).trim()
            if (!s) return ''
            if (s.length >= 16) return s.slice(0, 16)
            return s
        },
        formatDateTimeSecond(v) {
            const s = v == null ? '' : String(v).trim()
            if (!s) return ''
            // 截取到分钟，补齐秒
            const minute = s.length >= 16 ? s.slice(0, 16) : s
            return minute + ':00'
        },
        validateRequired() {
            const checks = [
                { key: 'name', msg: '请输入项目名称' },
                { key: 'productId', msg: '请选择品种' },
                { key: 'quantity', msg: '请输入数量' },
                { key: 'startTime', msg: '请选择开始时间' },
                { key: 'endTime', msg: '请选择截止时间' },
                { key: 'projectType', msg: '请选择项目类型' },
                { key: 'purchaseRule', msg: '请输入采购规则' }
            ]
            for (const it of checks) {
                const val = this.form[it.key]
                const empty = (val === undefined || val === null || (typeof val === 'string' && val.trim() === ''))
                if (empty) { uni.showToast({ title: it.msg, icon: 'none' }); return false }
            }
            if (this.isConcentratedBid && !this.form.bidTime) {
                uni.showToast({ title: '请选择开标时间', icon: 'none' })
                return false
            }
            // 数量必须为有效数字
            if (isNaN(parseFloat(this.form.quantity))) {
                uni.showToast({ title: '数量格式不正确', icon: 'none' })
                return false
            }
            // 开始时间不能晚于截止时间
            if (this.form.startTime && this.form.endTime && this.formatDateTimeMinute(this.form.startTime) > this.formatDateTimeMinute(this.form.endTime)) {
                uni.showToast({ title: '开始时间不能晚于截止时间', icon: 'none' })
                return false
            }
            return true
        },
        async onSubmit() {
            if (!this.validateRequired()) return
            const confirmRes = await new Promise(resolve => {
                uni.showModal({ title: '提示', content: '确定新增报价项目吗？', confirmText: '确定', cancelText: '取消', success: resolve })
            })
            if (!(confirmRes && confirmRes.confirm)) return
            const clean = (obj) => {
                const out = {}
                Object.keys(obj || {}).forEach(k => {
                    const v = obj[k]
                    const isEmptyString = typeof v === 'string' && v.trim() === ''
                    const isUndef = v === undefined || v === null
                    const isNaNNumber = typeof v === 'number' && isNaN(v)
                    if (!(isEmptyString || isUndef || isNaNNumber)) out[k] = v
                })
                return out
            }
            const payload = clean({
                name: this.form.name,
                productId: this.form.productId,
                productName: this.form.productName,
                quantity: this.form.quantity,
                startTime: this.formatDateTimeSecond(this.form.startTime),
                endTime: this.formatDateTimeSecond(this.form.endTime),
                projectType: this.form.projectType,
                bidTime: this.isConcentratedBid ? this.formatDateTimeSecond(this.form.bidTime) : '',
                purchaseRule: this.form.purchaseRule
            })
            try {
                await supplierQuotationProjectSaveApi(payload)
                uni.showToast({ title: '新增成功', icon: 'none' })
                try { uni.setStorageSync('SUPPLIER_PRICE_LIST_NEED_REFRESH', '1') } catch (e) {}
                setTimeout(() => { uni.redirectTo({ url: '/pages/supplier-price/index' }) }, 400)
            } catch (e) {
                uni.showToast({ title: e.msg || '新增失败', icon: 'none' })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.scroll {
    flex: 1;
    padding: 12rpx 0 200rpx !important;
}

.footer {
    z-index: 2;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32rpx;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);

    .btn {
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 12rpx;
        font-size: 32rpx;
    }

    .submit {
        background: $theme-primary;
        color: #fff;
    }
}

::v-deep .uni-list {
    .uni-easyinput {
        display: flex;

        .uni-input-input {
            color: rgba(0, 0, 0, 0.9);
        }
    }

    .uni-input-placeholder {
        z-index: 1;
    }

    .uni-input-input {
        background-color: #ffffff;
    }

    background: transparent;

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

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

        &__container {
            padding: 32rpx;

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

                &__content {
                    border: none;
                    background-color: #ffffff !important;

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

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

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

                .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;
                }
            }
        }
    }
}

::v-deep .uni-datetime-picker {
    flex: 1;

    .uni-input-wrapper {
        justify-content: flex-end;
    }

    .uni-input-input {
        text-align: right;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
    }
}

.textarea-item {
    ::v-deep .uni-list-item__container {
        flex-direction: column;
        align-items: stretch;

        .item-title {
            width: auto;
            margin-right: 0;
            margin-bottom: 16rpx;
        }

        .uni-easyinput {
            width: 100%;
        }

        .uni-textarea-textarea {
            text-align: left;
            min-height: 120rpx;
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
        }
    }
}
</style>