<script setup lang="ts">
    import { nextTick, reactive, ref } from 'vue'
    import { onLoad, onNavigationBarButtonTap, onShow } from '@dcloudio/uni-app'
    import * as NongchangAPI from '@/api/model/nongchang'

    const isOnePage = ref(true)
    const paging = ref(null)
    const pageData = reactive({
        param: {
            pageNo: 1,
            pageSize: 10,
            baseName: '',
        },
        list: [],
        total: 0,
        type_success_total: 0,
        type_unverified_total: 0,
    })

    onNavigationBarButtonTap((e) => {
        uni.navigateTo({
            url: './add',
        })
    })

    onShow(() => {
        nextTick(() => {
            if (!isOnePage.value && paging.value) {
                paging.value.reload()
            }
            isOnePage.value = false
        })
    })

    function getList() {
        if (!paging.value) return
        NongchangAPI.getFarmbaseList(pageData.param)
            .then((res) => {
                pageData.total = res.total
                // 模拟已认证/待认证统计，实际应由后端返回
                pageData.type_success_total = res.records.filter(i => i.auditStatus == 1).length
                pageData.type_unverified_total = pageData.total - pageData.type_success_total
                paging.value.complete(res.records)
            })
            .catch(() => {
                paging.value.complete(false)
            })
    }

    function queryList(pageNo, pageSize) {
        pageData.param.pageNo = pageNo
        pageData.param.pageSize = pageSize
        getList()
    }

    function handleSearch() {
        if (paging.value) paging.value.reload()
    }

    function goDetail(id) {
        uni.navigateTo({
            url: `./add?id=${id}`,
        })
    }

    function del(id) {
        uni.showModal({
            title: '提示',
            content: '确定删除该基地吗？',
            success: (res) => {
                if (res.confirm) {
                    NongchangAPI.delFarmbase(id).then(() => {
                        uni.showToast({ title: '删除成功', icon: 'success' })
                        if (paging.value) paging.value.reload()
                    })
                }
            },
        })
    }
</script>

<template>
    <view class="page">
        <z-paging ref="paging" v-model="pageData.list" @query="queryList" :fixed="true">
            <template #top>
                <view class="header-section">
                    <view class="search-box">
                        <fui-icon name="search" :size="32" color="#999"></fui-icon>
                        <input
                            class="search-input"
                            v-model="pageData.param.baseName"
                            placeholder="搜索基地名称"
                            @confirm="handleSearch"
                        />
                    </view>
                    
                    <view class="stats-card">
                        <view class="stats-main">
                            <view class="stats-item total">
                                <text class="stats-num">{{ pageData.total }}</text>
                                <text class="stats-label">基地总数</text>
                            </view>
                            <view class="stats-divider"></view>
                            <view class="stats-sub">
                                <view class="sub-item">
                                    <text class="sub-label">已认证</text>
                                    <text class="sub-num green">{{ pageData.type_success_total }}</text>
                                </view>
                                <view class="sub-item">
                                    <text class="sub-label">待认证</text>
                                    <text class="sub-num orange">{{ pageData.type_unverified_total }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="guide-bar">
                            <text class="guide-text">基地认证后可获得更多政策补贴支持</text>
                            <text class="guide-link">认证指南 ></text>
                        </view>
                    </view>
                </view>
            </template>

            <view class="list-container">
                <view v-for="(item, index) in pageData.list" :key="item.id" class="base-card">
                    <view class="card-header">
                        <view class="status-badge" :class="{ 'is-auth': item.auditStatus == 1 }">
                            {{ item.auditStatus == 1 ? '已认证' : '待认证' }}
                        </view>
                        <text class="base-name">{{ item.baseName }}</text>
                    </view>
                    
                    <view class="card-content">
                        <view class="info-row">
                            <view class="info-item">
                                <text class="info-label">主要作物：</text>
                                <text class="info-val">{{ item.growCropsText || item.growCrops || '未设置' }}</text>
                            </view>
                            <view class="info-item">
                                <text class="info-label">基地规模：</text>
                                <text class="info-val">{{ item.scale }}亩</text>
                            </view>
                        </view>
                        <view class="info-row" v-if="item.province">
                            <view class="info-item full">
                                <fui-icon name="location" :size="24" color="#999"></fui-icon>
                                <text class="info-val addr">{{ item.province }}{{ item.city }}{{ item.country }}</text>
                            </view>
                        </view>
                    </view>

                    <view class="card-actions">
                        <view class="btn-group">
                            <view class="action-btn plain" @click="del(item.id)">
                                <fui-icon name="delete" :size="28" color="#999"></fui-icon>
                                <text>删除</text>
                            </view>
                            <view class="action-btn primary" @click="goDetail(item.id)">
                                查看详情
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<style scoped lang="scss">
    .page {
        background-color: #f7f8fa;
        min-height: 100vh;
    }

    .header-section {
        background-color: #5db66f;
        padding: 20rpx 30rpx 80rpx;
    }

    .search-box {
        background-color: #fff;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        margin-bottom: 30rpx;
        .search-input {
            flex: 1;
            margin-left: 20rpx;
            font-size: 28rpx;
        }
    }

    .stats-card {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
        .stats-main {
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            border-bottom: 1rpx solid #f5f5f5;
        }
        .stats-item.total {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            .stats-num {
                font-size: 48rpx;
                font-weight: bold;
                color: #5db66f;
            }
            .stats-label {
                font-size: 24rpx;
                color: #999;
                margin-top: 4rpx;
            }
        }
        .stats-divider {
            width: 1rpx;
            height: 60rpx;
            background-color: #eee;
            margin: 0 40rpx;
        }
        .stats-sub {
            flex: 1.5;
            display: flex;
            justify-content: space-around;
            .sub-item {
                display: flex;
                flex-direction: column;
                .sub-label {
                    font-size: 22rpx;
                    color: #999;
                }
                .sub-num {
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-top: 4rpx;
                    &.green { color: #5db66f; }
                    &.orange { color: #fa8c16; }
                }
            }
        }
        .guide-bar {
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .guide-text {
                font-size: 22rpx;
                color: #666;
            }
            .guide-link {
                font-size: 22rpx;
                color: #5db66f;
                font-weight: bold;
            }
        }
    }

    .list-container {
        padding: 20rpx 30rpx;
        margin-top: -40rpx;
    }

    .base-card {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 24rpx;
            .status-badge {
                font-size: 20rpx;
                padding: 4rpx 16rpx;
                background-color: #f5f5f5;
                color: #999;
                border-radius: 6rpx;
                margin-right: 20rpx;
                &.is-auth {
                    background-color: #e6f5e8;
                    color: #5db66f;
                }
            }
            .base-name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                flex: 1;
            }
        }

        .card-content {
            background-color: #f9f9f9;
            border-radius: 12rpx;
            padding: 20rpx;
            .info-row {
                display: flex;
                margin-bottom: 12rpx;
                &:last-child { margin-bottom: 0; }
                .info-item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    &.full { flex: none; width: 100%; }
                    .info-label { color: #999; }
                    .info-val {
                        color: #333;
                        &.addr {
                            margin-left: 10rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }

        .card-actions {
            margin-top: 30rpx;
            .btn-group {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .action-btn {
                    height: 60rpx;
                    padding: 0 30rpx;
                    border-radius: 30rpx;
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    margin-left: 20rpx;
                    &.plain {
                        color: #999;
                        border: 1rpx solid #eee;
                    }
                    &.primary {
                        background-color: #5db66f;
                        color: #fff;
                    }
                }
            }
        }
    }
</style>
