<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <uni-list>
                <uni-list-item class="select-item" :class="form.code ? 'is-filled' : 'is-empty'">
                    <template v-slot:body>
                        <view class="item-title"><text class="required">*</text><text>编号</text></view>
                    </template>
                    <template v-slot:footer>
                        <view class="serial-number-row">
                            <uni-easyinput v-model="form.code" placeholder="自动生成编号" :inputBorder="false" disabled />
                        </view>
                    </template>
                </uni-list-item>

                <uni-list-item title="名称">
                    <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" placeholder="请输入名称" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="联系人">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.contact" placeholder="请输入联系人" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="联系电话">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.telephone" placeholder="请输入联系电话" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="电子邮箱">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.email" placeholder="请输入电子邮箱" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="邮编">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.zipCode" placeholder="请输入邮编" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="传真">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.fax" placeholder="请输入传真" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item class="select-item"
                    :class="(Array.isArray(form.cityIds) && form.cityIds.length) ? 'is-filled' : 'is-empty'" clickable
                    @click="openCitySelector" :rightText="form.cityLabel || '请选择'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text>地区</text></view>
                        <CitySelector ref="citySelectorRef" v-model="form.cityIds" @change="onCityChange" />
                    </template>
                </uni-list-item>

                <uni-list-item title="地址">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.address" placeholder="请输入地址" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="统一社会信用代码">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.creditCode" placeholder="请输入统一社会信用代码" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="纳税人识别号">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.taxIdentifyNo" placeholder="请输入纳税人识别号" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="开户银行">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.bankName" placeholder="请输入开户银行" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="户名">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.accountName" placeholder="请输入户名" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="银行账号">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.accountNo" placeholder="请输入银行账号" :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item title="备注">
                    <template v-slot:footer>
                        <uni-easyinput type="textarea" v-model="form.description" placeholder="请输入备注"
                            :inputBorder="false" />
                    </template>
                </uni-list-item>

            </uni-list>
        </scroll-view>

        <view class="footer">
            <button class="btn submit" type="primary" @click="onSubmit">保存</button>
        </view>
    </view>
</template>

<script>
import { getDetailApi, updateApi } from '@/api/customer.js'
import CitySelector from '@/components/city-selector/index.vue'
import { isEmail } from '@/utils/common.js'

export default {
    name: 'CustomerModify',
    components: { CitySelector },
    data() {
        return {
            id: '',
            form: {
                id: '',
                code: '',
                name: '',
                contact: '',
                telephone: '',
                email: '',
                zipCode: '',
                fax: '',
                cityIds: [],
                cityLabel: '',
                address: '',
                creditCode: '',
                taxIdentifyNo: '',
                bankName: '',
                accountName: '',
                accountNo: '',
                description: ''
            }
        }
    },
    onLoad(query) {
        const id = (query && (query.id || query.code)) || ''
        if (id) {
            this.id = id
            this.loadDetail(id)
        }
    },
    methods: {
        async loadDetail(id) {
            try {
                const res = await getDetailApi(id)
                const data = res.data || {}
                this.form = {
                    ...data,
                    cityIds: data.city ? [data.city] : [], // 这里假设后端返回的 city 是单个ID，如果是数组需要适配
                    cityLabel: data.cityName || ''
                }
                // 如果后端返回的 city 是 id，这里尝试通过 CitySelector 的回显逻辑（通常需要组件支持或自己查名字）
                // 这里暂时直接用 data.cityName 作为回显文本
            } catch (e) {
                uni.showToast({ title: '加载失败', icon: 'none' })
            }
        },
        openCitySelector() {
            this.$refs.citySelectorRef && this.$refs.citySelectorRef.open()
        },
        onCityChange(payload) {
            const label = payload && payload.label != null ? payload.label : ''
            this.form.cityLabel = label
        },
        validateRequired() {
            if (!this.form.name || !this.form.name.trim()) {
                uni.showToast({ title: '请输入名称', icon: 'none' })
                return false
            }
            if (this.form.email && !isEmail(this.form.email)) {
                uni.showToast({ title: '邮箱地址格式不正确', icon: 'none' })
                return false
            }
            return true
        },
        async onSubmit() {
            if (!this.validateRequired()) return

            const { cityIds, cityLabel, ...other } = this.form
            const cityId = cityIds && cityIds.length > 0 ? cityIds[cityIds.length - 1] : ''

            const payload = {
                ...other,
                cityId
            }

            console.log('onSubmit payload', payload)
            try {
                await updateApi(payload)
                uni.showToast({ title: '保存成功', icon: 'success' })

                setTimeout(() => { uni.redirectTo({ url: '/pages/customer/index' }) }, 300)
            } catch (e) {
                uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
            }
        }
    }
}
</script>

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

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

.footer {
    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);
    z-index: 10;

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

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

::v-deep .uni-list {
    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 {
                .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;
                    }
                }
            }

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

                .generate-btn {
                    margin-left: 24rpx;
                    height: 64rpx;
                    line-height: 64rpx;
                    padding: 0 24rpx;
                    font-size: 28rpx;
                    border-radius: 8rpx;
                    background: $theme-primary;
                    color: #fff;
                }
            }
        }
    }
}
</style>