<script setup lang="ts">
    import { reactive, toRefs, ref } from 'vue'
    import { onLoad, onShow } from '@dcloudio/uni-app'
    import { useUserStore } from '@/store/modules/user'
    import { useGlobSetting } from '/@/hooks/setting'
    import * as nongjifuwu from '@/api/model/nongjifuwu'
    import { getText } from '@/utils/dict/area'
    import AreaPicker from '@/components/AreaPicker/index.vue'
    import ApplyDialog from '@/pages/nongjifuwu/components/apply-dialog.vue'

    const userStore = useUserStore()
    const globSetting = useGlobSetting()
    onLoad((option) => {
        pageData.form.type = option.type
        if (option.id) {
            pageData.title = '农机服务详情'
            getDetails(option.id)
        } else {
            pageData.title = '新增农机作业'
        }
        uni.setNavigationBarTitle({ title: pageData.title })
    })

    const pageData = reactive({
        title: '农机表单',
        loading: false,
        show: {
            address: false,
        },
        form: {
            id: '',
            name: '',
            phone: '',
            price: '',
            scope: '',
            type: '',
            picture: '',
            pictureObj: null,
        },
        optionsValText: '',
        rules: [
            { name: 'name', rule: ['required'], msg: ['请填写作业标题'] },
            { name: 'phone', rule: ['required', 'isMobile'], msg: ['请填写联系方式', '手机号格式不正确'] },
            { name: 'scope', rule: ['required'], msg: ['请填写服务范围'] },
            { name: 'price', rule: ['required'], msg: ['请填写价格'] },
            { name: 'picture', rule: ['required'], msg: ['请上传图片'] },
        ],
    })

    const { show, form } = toRefs(pageData)

    function handleAreaConfirm(e) {
        pageData.form.scope = e.fullCode
        pageData.optionsValText = e.fullText
    }

    function getDetails(id) {
        pageData.loading = true
        nongjifuwu.farmMachineDetails({ id }).then((res) => {
            pageData.form = res
            pageData.form.pictureObj = res.picture && parseUrlInfo(res.picture)
            // 优先用接口返回的中文名拼接，getText 作为兜底
            const nameParts = [res.cityName, res.districtName].filter(Boolean)
            if (nameParts.length > 0) {
                pageData.optionsValText = nameParts.join('')
            } else if (res.scope) {
                pageData.optionsValText = getText(res.scope, '')
            }
        }).finally(() => pageData.loading = false)
    }

    function parseUrlInfo(url) {
        const fileName = url.split('/').pop()
        return { name: fileName, extname: fileName.split('.').pop(), url }
    }

    const toastRef = ref()
    function handleUpload(file) {
        uni.uploadFile({
            url: `${globSetting.apiUrl + globSetting.urlPrefix}/sys/common/upload`,
            filePath: file.tempFiles[0].path,
            name: 'file',
            formData: { biz: 'temp' },
            header: { 'X-Access-Token': userStore.getToken },
            success: (res) => {
                const data = JSON.parse(res.data)
                if (data.code === 200 || data.code === 0) {
                    toastRef.value.show({ type: 'success', text: '上传成功' })
                    pageData.form.picture = data.message
                }
            }
        })
    }
    function handleDelete() {
        pageData.form.picture = null
    }
    const formRef = ref()
    function submit() {
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                nongjifuwu.farmMachineAddMachine(pageData.form).then(() => {
                    toastRef.value.show({ type: 'success', text: '发布成功' })
                    setTimeout(() => uni.navigateBack(), 1500)
                })
            }
        })
    }

    const applyDialogRef = ref()
    function handleApply() {
        applyDialogRef.value.open({
            id: pageData.form.id,
            serviceType: pageData.form.type,
        })
    }
</script>

<template>
    <view class="page">
        <!-- 发布模式 -->
        <view v-if="!form.id" class="formBox">
            <fui-form ref="formRef" label-weight="auto" top="60">
                <view class="mt20">
                    <fui-input required label="作业标题" placeholder="请输入" v-model="form.name" labelSize="28" label-width="180" />
                    <fui-input required label="联系方式" type="number" placeholder="请输入手机号" v-model="form.phone" labelSize="28" label-width="180" />
                    <view class="form-item required flex align-center" style="padding: 20rpx 10rpx">
                        <text class="label">服务范围</text>
                        <view class="time-input" @click="show.address = true">
                            <text class="select-text" :class="{ placeholder: !pageData.form.scope }">
                                {{ pageData.optionsValText || '请选择' }}
                            </text>
                        </view>
                    </view>
                    <fui-input required type="number" label="价格" placeholder="请输入" v-model="form.price" labelSize="28" label-width="180">
                        <template #suffix><view class="unit-slot">元/亩</view></template>
                    </fui-input>
                </view>

                <view class="bg-white mt20" style="padding: 30rpx">
                    <view class="mb-1" style="font-size: 28rpx"><span style="color: red">*&nbsp;</span>上传图片</view>
                    <uni-file-picker :value="form.pictureObj" limit="1" @select="handleUpload" @delete="handleDelete" />
                </view>

                <view class="fui-btn__box">
                    <fui-button text="提交发布" bold radius="100rpx" @click="submit" />
                </view>
            </fui-form>
        </view>

        <!-- 详情模式 -->
        <view v-else class="detail-page">
            <!-- 顶部封面图 -->
            <view class="detail-hero">
                <image
                    v-if="form.picture"
                    :src="form.picture"
                    mode="aspectFill"
                    class="hero-img"
                />
                <view v-else class="hero-placeholder">
                    <fui-icon name="picture" :size="120" color="rgba(255,255,255,0.4)"></fui-icon>
                    <text class="hero-placeholder-text">暂无图片</text>
                </view>
                <view class="hero-overlay"></view>
                <!-- 价格浮层 -->
                <view class="hero-price-float">
                    <text class="price-symbol">¥</text>
                    <text class="price-num">{{ form.price }}</text>
                    <text class="price-unit">/亩</text>
                </view>
                <!-- 服务状态 -->
                <view class="hero-badge">
                    <view class="badge-dot"></view>
                    <text class="badge-text">服务中</text>
                </view>
            </view>

            <!-- 主信息卡 -->
            <view class="main-card">
                <text class="service-title">{{ form.name }}</text>

                <view class="price-highlight-row">
                    <view class="price-wrap">
                        <text class="price-label">作业收费</text>
                        <view class="price-main">
                            <text class="ph-symbol">¥</text>
                            <text class="ph-value">{{ form.price }}</text>
                            <text class="ph-unit">/亩</text>
                        </view>
                    </view>
                    <view class="divider-v"></view>
                    <view class="scope-wrap">
                        <text class="scope-label">服务范围</text>
                        <text class="scope-value">{{ pageData.optionsValText || '全国' }}</text>
                    </view>
                </view>
            </view>

            <!-- 联系信息 section -->
            <view class="info-section">
                <view class="section-header">
                    <view class="section-bar"></view>
                    <text class="section-title">服务信息</text>
                </view>

                <view class="info-grid">
                    <view class="info-row">
                        <view class="info-icon-wrap orange">
                            <fui-icon name="mobile" :size="30" color="#fa8c16"></fui-icon>
                        </view>
                        <view class="info-content">
                            <text class="info-label">联系方式</text>
                            <text class="info-value">{{ form.phone || '暂未填写' }}</text>
                        </view>
                    </view>

                    <view class="info-divider"></view>

                    <view class="info-row">
                        <view class="info-icon-wrap orange">
                            <fui-icon name="location" :size="30" color="#fa8c16"></fui-icon>
                        </view>
                        <view class="info-content">
                            <text class="info-label">服务区域</text>
                            <text class="info-value">{{ pageData.optionsValText || form.scope || '全国范围' }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 服务说明区域（如有更多字段可展开） -->
            <view class="tips-section">
                <view class="tips-row">
                    <view class="tip-item">
                        <view class="tip-icon">
                            <fui-icon name="shield" :size="36" color="#5db66f"></fui-icon>
                        </view>
                        <text class="tip-text">平台认证</text>
                    </view>
                    <view class="tip-divider"></view>
                    <view class="tip-item">
                        <view class="tip-icon">
                            <fui-icon name="notice" :size="36" color="#5db66f"></fui-icon>
                        </view>
                        <text class="tip-text">专业团队</text>
                    </view>
                    <view class="tip-divider"></view>
                    <view class="tip-item">
                        <view class="tip-icon">
                            <fui-icon name="tag" :size="36" color="#5db66f"></fui-icon>
                        </view>
                        <text class="tip-text">按亩计价</text>
                    </view>
                </view>
            </view>

            <!-- 底部安全高度 -->
            <view style="height: 180rpx;"></view>

            <!-- 固定底部栏 -->
            <view class="detail-footer">
                <view class="footer-price-area">
                    <text class="footer-price-label">作业价格</text>
                    <view class="footer-price-main">
                        <text class="fp-symbol">¥</text>
                        <text class="fp-value">{{ form.price }}</text>
                        <text class="fp-unit">/亩起</text>
                    </view>
                </view>
                <view class="footer-apply-btn" @tap="handleApply">
                    <text class="apply-btn-text">立即预约</text>
                </view>
            </view>
        </view>

        <AreaPicker v-model:show="show.address" :layer="3" title="选择服务范围" @confirm="handleAreaConfirm" />
        <fui-toast ref="toastRef" />
        <fui-loading isFixed v-if="pageData.loading" />
        <ApplyDialog ref="applyDialogRef" />
    </view>
</template>

<style lang="scss" scoped>
    .page {
        background-color: #f8fafc;
        min-height: 100vh;
        font-family: 'DingTalk Sans', sans-serif;
    }

    /* ===== 发布模式 ===== */
    .formBox {
        padding: 24rpx;
        .mt20 {
            background: #fff;
            border-radius: 20rpx;
            padding: 10rpx 24rpx;
            margin-bottom: 24rpx;
        }
    }
    .form-item {
        padding: 30rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #f8f8f8;
        .label { font-size: 28rpx; color: #333; width: 180rpx; }
    }
    .select-text { font-size: 28rpx; &.placeholder { color: #ccc; } }
    .unit-slot { font-size: 28rpx; color: #999; margin-left: 12rpx; }
    :deep(.fui-input__label) { font-family: 'DingTalk Sans' !important; }

    /* ===== 详情模式 ===== */
    .detail-page {
        background-color: #f8fafc;
    }

    .detail-hero {
        position: relative;
        width: 100%;
        height: 520rpx;
        background: linear-gradient(135deg, #e65c00 0%, #fa8c16 50%, #f9af31 100%);
        overflow: hidden;

        .hero-img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .hero-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .hero-placeholder-text {
                font-size: 26rpx;
                color: rgba(255,255,255,0.5);
                margin-top: 20rpx;
            }
        }

        .hero-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 280rpx;
            background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
        }

        /* 左下角价格浮层 */
        .hero-price-float {
            position: absolute;
            bottom: 60rpx;
            left: 32rpx;
            display: flex;
            align-items: baseline;

            .price-symbol {
                font-size: 30rpx;
                color: #fff;
                font-weight: bold;
                opacity: 0.9;
            }
            .price-num {
                font-size: 72rpx;
                color: #fff;
                font-weight: bold;
                line-height: 1;
                margin-left: 4rpx;
                text-shadow: 0 2rpx 10rpx rgba(0,0,0,0.3);
            }
            .price-unit {
                font-size: 28rpx;
                color: rgba(255,255,255,0.8);
                margin-left: 8rpx;
            }
        }

        .hero-badge {
            position: absolute;
            top: 30rpx;
            right: 30rpx;
            display: flex;
            align-items: center;
            background-color: rgba(255,255,255,0.18);
            backdrop-filter: blur(8px);
            border: 1rpx solid rgba(255,255,255,0.3);
            padding: 10rpx 22rpx;
            border-radius: 40rpx;

            .badge-dot {
                width: 14rpx;
                height: 14rpx;
                border-radius: 50%;
                background-color: #52c41a;
                margin-right: 10rpx;
                box-shadow: 0 0 0 4rpx rgba(82,196,26,0.3);
            }
            .badge-text {
                font-size: 24rpx;
                color: #fff;
                font-weight: 500;
            }
        }
    }

    .main-card {
        background-color: #fff;
        margin: -40rpx 24rpx 20rpx;
        border-radius: 28rpx;
        padding: 36rpx 32rpx 28rpx;
        box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
        position: relative;
        z-index: 10;

        .service-title {
            font-size: 40rpx;
            font-weight: bold;
            color: #1a1a1a;
            line-height: 1.35;
            display: block;
            margin-bottom: 28rpx;
            letter-spacing: 1rpx;
        }

        .price-highlight-row {
            display: flex;
            align-items: center;
            background-color: #fff8f0;
            border-radius: 16rpx;
            padding: 24rpx;

            .price-wrap {
                flex: 1;
                display: flex;
                flex-direction: column;
                .price-label {
                    font-size: 22rpx;
                    color: #94a3b8;
                    margin-bottom: 8rpx;
                }
                .price-main {
                    display: flex;
                    align-items: baseline;
                    .ph-symbol { font-size: 24rpx; color: #fa541c; font-weight: bold; }
                    .ph-value { font-size: 52rpx; color: #fa541c; font-weight: bold; margin-left: 2rpx; line-height: 1; }
                    .ph-unit { font-size: 22rpx; color: #fa8c16; margin-left: 4rpx; }
                }
            }

            .divider-v {
                width: 1rpx;
                height: 60rpx;
                background-color: #ffd591;
                margin: 0 28rpx;
            }

            .scope-wrap {
                flex: 1.2;
                display: flex;
                flex-direction: column;
                .scope-label {
                    font-size: 22rpx;
                    color: #94a3b8;
                    margin-bottom: 8rpx;
                }
                .scope-value {
                    font-size: 28rpx;
                    color: #1e293b;
                    font-weight: 600;
                    line-height: 1.3;
                }
            }
        }
    }

    .info-section {
        background-color: #fff;
        margin: 0 24rpx 20rpx;
        border-radius: 24rpx;
        padding: 32rpx;
        box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);

        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 28rpx;

            .section-bar {
                width: 8rpx;
                height: 36rpx;
                background: linear-gradient(to bottom, #fa8c16, #e65c00);
                border-radius: 4rpx;
                margin-right: 16rpx;
            }

            .section-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #1a1a1a;
            }
        }

        .info-grid {
            .info-row {
                display: flex;
                align-items: flex-start;
                padding: 4rpx 0;

                .info-icon-wrap {
                    width: 56rpx;
                    height: 56rpx;
                    background-color: #f0faf2;
                    border-radius: 14rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;

                    &.orange {
                        background-color: #fff8f0;
                    }
                }

                .info-content {
                    flex: 1;
                    margin-left: 20rpx;
                    padding: 4rpx 0;

                    .info-label {
                        font-size: 24rpx;
                        color: #94a3b8;
                        display: block;
                        margin-bottom: 6rpx;
                    }
                    .info-value {
                        font-size: 30rpx;
                        color: #1e293b;
                        line-height: 1.4;
                        font-weight: 500;
                    }
                }
            }

            .info-divider {
                height: 1rpx;
                background-color: #f1f5f9;
                margin: 24rpx 0;
            }
        }
    }

    /* 服务保障小图标行 */
    .tips-section {
        background-color: #fff;
        margin: 0 24rpx 20rpx;
        border-radius: 24rpx;
        padding: 32rpx;
        box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);

        .tips-row {
            display: flex;
            align-items: center;

            .tip-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;

                .tip-icon {
                    width: 72rpx;
                    height: 72rpx;
                    background-color: #f0faf2;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 12rpx;
                }

                .tip-text {
                    font-size: 24rpx;
                    color: #475569;
                    font-weight: 500;
                }
            }

            .tip-divider {
                width: 1rpx;
                height: 56rpx;
                background-color: #f1f5f9;
            }
        }
    }

    /* ===== 底部操作栏 ===== */
    .detail-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255,255,255,0.97);
        backdrop-filter: blur(10px);
        padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
        box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.06);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .footer-price-area {
            display: flex;
            flex-direction: column;

            .footer-price-label {
                font-size: 22rpx;
                color: #94a3b8;
                margin-bottom: 4rpx;
            }

            .footer-price-main {
                display: flex;
                align-items: baseline;

                .fp-symbol { font-size: 22rpx; color: #fa541c; font-weight: bold; }
                .fp-value { font-size: 44rpx; color: #fa541c; font-weight: bold; margin-left: 2rpx; line-height: 1; }
                .fp-unit { font-size: 22rpx; color: #fa8c16; margin-left: 4rpx; }
            }
        }

        .footer-apply-btn {
            background: linear-gradient(135deg, #fa8c16 0%, #fa541c 100%);
            height: 88rpx;
            padding: 0 52rpx;
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8rpx 24rpx rgba(250,140,22,0.35);

            &:active {
                opacity: 0.9;
                transform: scale(0.97);
            }

            .apply-btn-text {
                font-size: 30rpx;
                color: #fff;
                font-weight: bold;
                letter-spacing: 2rpx;
            }
        }
    }
</style>
