<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <uni-list>
                <uni-list-item title="编号">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.code" :inputBorder="false" disabled />
                    </template>
                </uni-list-item>

                <uni-list-item class="select-item" :class="form.supplier ? 'is-filled' : 'is-empty'" clickable
                    @click="openSheet('supplier')" :rightText="displayLabel('supplierName')" 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.buyer ? 'is-filled' : 'is-empty'" clickable
                    @click="openRelate('buyer')" :rightText="form.buyerName || '请选择需方'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>需方</text></view>
                    </template>
                </uni-list-item>

                <uni-list-item title="订货日期">
                    <template v-slot:footer>
                        <uni-datetime-picker type="date" v-model="form.orderDate" />
                    </template>
                </uni-list-item>

                <uni-list-item title="单位">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.unit" :inputBorder="false" disabled />
                    </template>
                </uni-list-item>
                <ProductRel type="add" v-model="form.productRel" />
            </uni-list>
        </scroll-view>

        <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options"
            v-model="sheet.value" @confirm="onSheetConfirm" />
        <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
            :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
            :selectedKeys.sync="relate.selectedKeys" @confirm="onRelateConfirm" />
    </view>

</template>
<script>
import SingleSelectSheet from '@/components/single-select/index.vue'
import RelateSelectSheet from '@/components/relate-select/index.vue'
import ProductRel from './productRel.vue'
import { getRetailCodeApi } from '@/api/contract'
import { getDicByCodes } from '@/utils/dic'

export default {
    name: 'AddContractRetail',
    components: { SingleSelectSheet, RelateSelectSheet, ProductRel },
    data() {
        return {
            form: {
                code: '',
                supplier: '',
                supplierName: '',
                buyer: '',
                buyerName: '',
                orderDate: '',
                unit: '元、公斤、元/公斤'
            },
            supplierList: [],
            sheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
            relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' }
        }
    },
    created() {
        this.loadSuppliers()
        this.initCode()
        this.form.orderDate = this.formatDate(new Date())
    },
    methods: {
        formatDate(d) {
            const y = d.getFullYear()
            const m = String(d.getMonth() + 1).padStart(2, '0')
            const day = String(d.getDate()).padStart(2, '0')
            return `${y}-${m}-${day}`
        },
        async initCode() {
            try {
                const res = await getRetailCodeApi()
                const code = (res && res.data) ? res.data : ''
                this.form.code = code
            } catch (e) { this.form.code = '' }
        },
        async loadSuppliers() {
            try {
                const results = await getDicByCodes(['SUPPLIER'])
                const items = results && results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
                this.supplierList = items.map(it => ({ label: it.name, value: it.code }))
            } catch (e) { this.supplierList = [] }
        },
        displayLabel(field) {
            const m = this.form
            const map = { supplierName: '请选择供方' }
            const val = m[field]
            return val ? String(val) : map[field]
        },
        openSheet(field) {
            const setSheet = (title, options) => {
                const current = this.form[field]
                const match = (options || []).find(o => String(o.label) === String(current) || String(o.value) === String(current))
                this.sheet = { ...this.sheet, visible: true, title, options, field, value: match ? match.value : '' }
            }
            if (field === 'supplier') setSheet('供方', this.supplierList)
        },
        onSheetConfirm({ value, label }) {
            const field = this.sheet.field
            if (!field) return
            const v = (value === undefined || value === null) ? '' : value
            this.form[field] = v
            this.form[field + 'Name'] = label || ''
        },
        openRelate(fieldKey) {
            let config = {}
            if (fieldKey === 'buyer') {
                config = { title: '需方', source: 'customer', rowKey: 'id', multiple: false, display: [{ label: '姓名', field: 'name' }, { label: '编号', field: 'code' }, { label: '状态', field: 'available', format: v => (v ? '启用' : '停用') }] }
            }
            const selectedKeys = this.form[fieldKey] ? [this.form[fieldKey]] : []
            this.sheet.visible = false
            this.relate = { ...this.relate, title: config.title, source: config.source, display: config.display, multiple: config.multiple, rowKey: config.rowKey, selectedKeys, fieldKey }
            this.$nextTick(() => { this.relate.visible = true })
        },
        onRelateConfirm({ items }) {
            const _fieldKey = this.relate.fieldKey
            const first = (items && items.length > 0) ? items[0] : null
            this.form[_fieldKey] = (first && first.id) ? first.id : ''
            this.form[_fieldKey + 'Name'] = (first && first.name) ? first.name : ''
        }
    }
}

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

.scroll {
    flex: 1;
    padding: 12rpx 0 160rpx;
}

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

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

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

                    &-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: 162rpx;
                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;
                }
            }
        }

        &.mgb10 {
            margin-bottom: 20rpx;
        }
    }
}
</style>