<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
    import ApplyDialog from './components/apply-dialog.vue'
    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
    import * as NongjifuwuAPI from '@/api/model/nongjifuwu'
    import * as NongzhiAPI from '@/api/model/nongzhi'
    import Navigate from '@/utils/page/navigate'
    import { getDictData, getText } from '@/utils/dict/area'

    onLoad((option) => {
        pageData.search.serviceType = Number(option.type) || 1
        getProvince(43, null)
    })

    onShow(() => {
        pageData.search.pageNo = 1
        pageData.farmMachineList = []
        getFarmMachineList()
        // getCascader()
    })

    const pageData = reactive({
        loading: false,
        show: {
            time: false,
            classify: false,
            address: false,
        },
        options: [],
        optionsVal: [],
        optionsValText: '',
        // 分类标签
        categoryTabs: [
            { id: 1, name: '找农机' },
            { id: 2, name: '干农活' },
        ],
        search: {
            pageNo: 1,
            pageSize: 10,
            serviceType: 1,
            scope: null,
            bizCategory: 3,
            reviewStatus: 1,
        },
        farmMachineList: [],
        total: 0,
    })
    const areaPopupRef = ref(null)
    // 选择地区完成
    function selectCompleteArea(e) {
        const text = e.text
        const value = e.value
        let areaText = ''
        let areaVal = ''
        for (let i = 0; i < text.length - 1; i++) {
            areaText += `${text[i]}/`
            areaVal += `${value[i]},`
        }
        pageData.search.scope = areaVal.slice(0, -1) // code
        pageData.optionsValText = areaText.slice(0, -1)
        pageData.show.address = false
        // 触发搜索
        search()
    }
    // 在选择地区
    function changeArea(e) {
        const val = e.value
        getProvince(val, e)
    }
    // 获取下一级地区
    function getProvince(code, e) {
        LinghuoyonggongAPI.queryConditions({ parentCode: code }).then((res) => {
            if (res.length) {
                const dataArr = []
                for (let i = 0; i < res.length; i++) {
                    const obj = { text: '', value: '' }
                    obj.text = res[i].name
                    obj.value = res[i].code
                    dataArr.push(obj)
                }
                if (!pageData.options.length) {
                    pageData.options = dataArr
                } else {
                    console.log(`e.layer= ${e.layer}`)
                    areaPopupRef.value.setRequestData(dataArr, e.layer)
                    if (e.layer >= 2) {
                        areaPopupRef.value.end()
                    }
                }
            } else {
                areaPopupRef.value.end()
            }
        })
    }

    function getFarmMachineList() {
        pageData.loading = true
        if (pageData.search.serviceType == 1) {
            NongzhiAPI.getEnterpriseList(pageData.search)
                .then((res) => {
                    const { records, total } = res
                    pageData.farmMachineList = [...pageData.farmMachineList, ...records]
                    pageData.total = total
                })
                .finally(() => {
                    pageData.loading = false
                })
        } else {
            NongjifuwuAPI.farmMachineList(pageData.search)
                .then((res) => {
                    const { records, total } = res
                    pageData.farmMachineList = [...pageData.farmMachineList, ...records]
                    pageData.total = total
                })
                .finally(() => {
                    pageData.loading = false
                })
        }
    }

    function search() {
        pageData.loading = true
        if (pageData.search.serviceType == 1) {
            NongzhiAPI.getEnterpriseList(pageData.search)
                .then((res) => {
                    const { records, total } = res
                    pageData.farmMachineList = records
                    pageData.total = total
                })
                .finally(() => {
                    pageData.loading = false
                })
        } else {
            NongjifuwuAPI.farmMachineList(pageData.search)
                .then((res) => {
                    const { records, total } = res
                    pageData.farmMachineList = records
                    pageData.total = total
                })
                .finally(() => {
                    pageData.loading = false
                })
        }
    }

    async function getCascader() {
        pageData.options = await getDictData()
    }

    // 分类标签点击事件
    function onCategoryTabClick(tab: any) {
        pageData.search.serviceType = tab.id
        // 在这里添加具体的分类标签点击逻辑
        pageData.search.pageNo = 1
        pageData.farmMachineList = []
        getFarmMachineList()

        const pages = getCurrentPages()
        const page = pages[pages.length - 1]
        if (pageData.search.serviceType == 1) {
            // #ifdef H5
            document.querySelector('.uni-page-head-ft .uni-page-head-btn .uni-btn-icon').innerHTML = '申请入驻'
            // #endif
            // #ifdef APP-PLUS
            var currentVebview = page.$getAppWebview()
            var tn = currentVebview.getStyle().titleNView
            tn.buttons[0].text = '申请入驻' // \ue... 字体图标
            // tn.buttons[0].fontSrc = "/static/font/iconfont.ttf"
            currentVebview.setStyle({
                titleNView: tn,
            })
            // #endif
        } else {
            // #ifdef H5
            document.querySelector('.uni-page-head-ft .uni-page-head-btn .uni-btn-icon').innerHTML = ''
            // #endif
            // #ifdef APP-PLUS
            var currentVebview = page.$getAppWebview()
            var tn = currentVebview.getStyle().titleNView
            tn.buttons[0].text = ''
            currentVebview.setStyle({
                titleNView: tn,
            })
            // #endif
        }
    }

    function handlePublish() {
        if (pageData.search.serviceType === 1) {
            Navigate.to(`/pages/nongjifuwu/machine-form?type=${pageData.search.serviceType}`)
        }
        if (pageData.search.serviceType === 2) {
            Navigate.to(`/pages/nongjifuwu/farm-form?type=${pageData.search.serviceType}`)
        }
    }
    // 查看详情
    function handleDetails(item: any) {
        if (pageData.search.serviceType === 1) {
            Navigate.to(`/pages/nongjifuwu/machine-form?id=${item.id}&&type=${pageData.search.serviceType}`)
        }
        if (pageData.search.serviceType === 2) {
            Navigate.to(`/pages/nongjifuwu/farm-form?id=${item.id}&&type=${pageData.search.serviceType}`)
        }
    }
    // 我有需要
    const applyDialogRef = ref()
    function handleApply(item: any) {
        applyDialogRef.value.open(item)
    }

    function handleChangeAddress(e) {
        pageData.search.scope = e.value.join(',')
        pageData.show.address = false

        // 触发搜索
        search()
    }

    function toDetail(item) {
        const param = encodeURIComponent(JSON.stringify({ id: item.id, name: item.enterpriseName }))
        Navigate.to(`/pages/nongjifuwu/detail?param=${param}`)
    }

    onNavigationBarButtonTap((e) => {
        /* pageData.search.scope = null
        search() */
        if (pageData.search.serviceType == 1) {
            Navigate.to('/pages/nongjifuwu/shenqingruzhu')
        }
    })

    onReachBottom(() => {
        if (pageData.total <= pageData.farmMachineList.length) 
return
        pageData.search.pageNo++
        getFarmMachineList()
    })
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group_2">
            <view class="codefun-flex-row codefun-justify-between section_2">
                <text class="font_2 text_2">服务区域</text>
                <view class="codefun-flex-row codefun-items-center" @click="pageData.show.address = true">
                    <text class="font_2 text_3">{{ pageData.optionsValText || '选择市县乡镇' }}</text>
                    <image
                        class="codefun-shrink-0 image_7 codefun-ml-4"
                        src="/static/images/codefun/774cfe989f8417dc655fb301635f5893.png"
                    />
                </view>
            </view>
            <view class="codefun-flex-row section_3">
                <view
                    v-for="item in pageData.categoryTabs"
                    :key="item.id"
                    class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
                    :class="item.id === pageData.search.serviceType ? 'text-wrapper' : ''"
                    @click="onCategoryTabClick(item)"
                >
                    <text class="font_2" :class="item.id === pageData.search.serviceType ? 'text_4' : 'text_5'">{{
                        item.name
                    }}</text>
                </view>
            </view>
            <view
                v-if="!pageData.farmMachineList || pageData.farmMachineList.length == 0"
                class="codefun-flex-col codefun-relative section_4"
                style="height: 700rpx"
            >
                <fui-empty marginTop="100" src="/static/images/no-data.png" title="暂无数据" />
            </view>
            <view class="codefun-flex-col codefun-relative section_4">
                <template v-if="pageData.search.serviceType == 1">
                    <view class="yr-item" v-for="item in pageData.farmMachineList" :key="item.id">
                        <view class="item_top">
                            <image class="enterprise_logo" mode="aspectFit" :src="item.enterpriseLogoUrl" />
                            <view class="item_right">
                                <view class="text-ellipsis yr-item-name">{{ item.enterpriseName }}</view>
                                <view class="text-ellipsis yr-item-product">公司主营： {{ item.businessScope }}</view>
                            </view>
                        </view>
                        <view class="yr-item-info">
                            <view class="text-ellipsis yr-item-address">
                                <image class="address_icon" src="/static/images/linghuoyonggong/address.png" />
                                <text
                                    >{{ item.provinceName }}{{ item.cityName }}{{ item.districtName
                                    }}{{ item.townName }}</text
                                >
                            </view>
                            <view class="yr-item-detail" @click="toDetail(item)">查看详情</view>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="codefun-flex-row group_6" v-for="item in pageData.farmMachineList" :key="item.id">
                        <image
                            class="codefun-shrink-0 codefun-self-center image_8"
                            :src="item.picture"
                            @click="handleDetails(item)"
                        />
                        <view style="width: 70%">
                            <view
                                class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center"
                                @click="handleDetails(item)"
                            >
                                <text class="font text_6">{{ item.name }}</text>
                                <text class="font_3 text_7 ellipsis" style="width: 100%; margin: 26rpx 0"
                                    >服务范围：{{ getText(item.scope, ' / ') }}</text
                                >
                            </view>
                            <view class="flex justify-between" style="width: 100%">
                                <view class="group_5" @click="handleDetails(item)">
                                    <text class="font_6">¥</text>
                                    <text class="font_4 text_8">{{ item.price }}</text>
                                    <text class="font_7">/亩</text>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2"
                                    @click="handleApply(item)"
                                >
                                    <text class="font_5">去预约</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
        </view>
    </view>
    <fui-fab
        v-show="pageData.search.serviceType != 1"
        position="right"
        distance="10"
        bottom="240"
        width="96"
        @click="handlePublish"
    >
        <view class="text-white text-center">
            <view class="fab-icon" />
            <view style="font-size: 24rpx">发布</view>
        </view>
    </fui-fab>

    <!-- <fui-picker
        :show="pageData.show.address"
        :options="pageData.options"
        :linkage="true"
        :layer="3"
        @change="handleChangeAddress"
        @cancel="pageData.show.address = false"
    /> -->
    <fui-bottom-popup :show="pageData.show.address">
        <view class="fui-scroll__wrap yr-select-area">
            <view class="fui-title">请选择</view>
            <fui-cascader
                ref="areaPopupRef"
                :value="pageData.optionsVal"
                stepLoading
                @change="changeArea"
                @complete="selectCompleteArea"
                :options="pageData.options"
            />
            <view class="fui-icon__close" @tap.stop="pageData.show.address = false">
                <fui-icon name="close" :size="48" />
            </view>
        </view>
    </fui-bottom-popup>

    <ApplyDialog ref="applyDialogRef" />
    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>

<style scoped lang="scss">
    .page {
        box-sizing: border-box;
        padding-bottom: 12rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: calc(100vh - 88rpx);
        .text-ellipsis {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .yr-item {
            margin-top: 24rpx;
            border-bottom: 2rpx solid #eeeeee;
            padding-left: 8rpx;
            padding-bottom: 20rpx;
            .item_top {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
            }
            .enterprise_logo {
                width: 160rpx;
                max-height: 120rpx;
            }
            .yr-item-name {
                width: 480rpx;
                height: 40rpx;
                font-size: 32rpx;
                line-height: 40rpx;
                font-weight: 500;
                color: #333333;
            }
            .yr-item-product {
                margin-top: 12rpx;
                width: 480rpx;
                height: 32rpx;
                font-size: 24rpx;
                line-height: 32rpx;
                font-weight: 500;
                color: #555555;
            }
            .yr-item-info {
                margin-top: 18rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .yr-item-address {
                    font-size: 24rpx;
                    color: #999999;
                    width: 480rpx;
                    display: flex;
                    align-items: center;
                    .address_icon {
                        width: 24rpx;
                        height: 26rpx;
                        margin-right: 8rpx;
                    }
                }
                .yr-item-detail {
                    width: 136rpx;
                    height: 48rpx;
                    border-radius: 200rpx;
                    background: #5db66f;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 20rpx;
                    color: #ffffff;
                    font-size: 24rpx;
                    font-weight: 400;
                }
            }
        }
        .yr-item:last-child {
            border-bottom: none;
        }

        .section {
            padding: 24rpx 24rpx 24rpx 32rpx;
            background-color: #5db66f;
            mix-blend-mode: NOTTHROUGH;
            .image {
                border-radius: 64rpx;
                width: 108rpx;
                height: 42rpx;
            }
            .image_2 {
                mix-blend-mode: NOTTHROUGH;
                width: 34rpx;
                height: 22rpx;
            }
            .image_3 {
                mix-blend-mode: NOTTHROUGH;
                width: 30rpx;
                height: 22rpx;
            }
            .image_4 {
                width: 48rpx;
                height: 22rpx;
            }
            .group {
                padding: 8rpx 0;
                .image_6 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 14rpx;
                    height: 26rpx;
                }
                .pos_2 {
                    position: absolute;
                    left: 6rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .text {
                    color: #ffffffe6;
                    line-height: 29.5rpx;
                }
                .image_5 {
                    width: 44rpx;
                    height: 44rpx;
                }
                .pos {
                    position: absolute;
                    right: 0.66rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
        .group_2 {
            padding: 16rpx 24rpx;
            height: 1598rpx;
            .section_2 {
                padding: 32rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                .text_2 {
                    line-height: 25.82rpx;
                }
                .text_3 {
                    color: #999999;
                    line-height: 26.04rpx;
                }
                .image_7 {
                    width: 22rpx;
                    height: 12rpx;
                }
            }
            .section_3 {
                margin-top: 24rpx;
                padding-bottom: 8rpx;
                background-color: #ffffff66;
                border-radius: 32rpx;
                border: solid 2rpx #ffffffcc;
                .text-50p {
                    width: 50%;
                    height: 122rpx;
                    padding: 0.75rem 0 1.625rem;
                }
                .text-wrapper {
                    padding: 24rpx 0 56rpx;
                    background-color: #ffffff;
                    border-radius: 32rpx;
                    .text_4 {
                        line-height: 26.02rpx;
                    }
                }
                .text_5 {
                    color: #5db66f;
                    line-height: 25.82rpx;
                }
            }
            .font_2 {
                font-size: 28rpx;
                line-height: 24.6rpx;
                color: #333333;
            }
            .section_4 {
                margin-top: -48rpx;
                padding: 0 16rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .group_6 {
                    padding: 24rpx 8rpx;
                    border-bottom: solid 2rpx #eeeeee;
                    .group_4 {
                        margin-left: 24rpx;
                        .text_6 {
                            line-height: 30.18rpx;
                        }
                        .text_7 {
                            margin-top: 24rpx;
                            line-height: 22.42rpx;
                        }
                        .group_5 {
                            margin-top: 40rpx;
                            line-height: 24.6rpx;
                            .text_8 {
                                line-height: 24.44rpx;
                            }
                        }
                    }
                    .view {
                        margin-top: 112rpx;
                    }
                    .text_9 {
                        line-height: 29.72rpx;
                    }
                    .text_10 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_7 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_11 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_2 {
                        margin-top: 116rpx;
                    }
                }
                .group_8 {
                    padding: 24rpx 8rpx;
                    .text_12 {
                        line-height: 30.12rpx;
                    }
                    .text_13 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_9 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_14 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_3 {
                        margin-top: 116rpx;
                    }
                }
                .image_8 {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                }
                .font_6 {
                    font-size: 24rpx;
                    line-height: 17.3rpx;
                    font-weight: 700;
                    color: #f2130d;
                }
                .font_4 {
                    font-size: 32rpx;
                    line-height: 24.6rpx;
                    color: #f2130d;
                }
                .font_7 {
                    font-size: 24rpx;
                    line-height: 24.6rpx;
                    color: #999999;
                }
                .text-wrapper_2 {
                    padding: 16rpx 0;
                    background-color: #5db66f;
                    border-radius: 400rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 136rpx;
                    height: 48rpx;
                    .font_5 {
                        font-size: 24rpx;
                        line-height: 18rpx;
                        color: #ffffff;
                    }
                }
                .section_5 {
                    margin-right: 4rpx;
                    overflow: hidden;
                    border-radius: 16rpx;
                    background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
                    border-top: solid 2rpx #eeeeee;
                    .section_6 {
                        background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
                        height: 96rpx;
                    }
                    .text_15 {
                        line-height: 26.02rpx;
                    }
                    .pos_4 {
                        position: absolute;
                        left: 30.26rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .text-wrapper_3 {
                        padding: 8rpx 0;
                        background-color: #ffffff;
                        border-radius: 12rpx;
                        width: 146.14rpx;
                        .text_16 {
                            color: #2e7d32;
                            line-height: 25.92rpx;
                        }
                    }
                    .pos_3 {
                        position: absolute;
                        right: 29.24rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .group_10 {
                    padding: 32rpx 8rpx 16rpx;
                    .text_17 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_11 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_18 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_4 {
                        margin-top: 112rpx;
                    }
                }
            }
            .section_7 {
                margin-top: 24rpx;
                padding: 32rpx 8rpx 32rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                .grid {
                    margin-right: 16rpx;
                    height: 160rpx;
                    display: grid;
                    grid-template-rows: repeat(2, minmax(0, 1fr));
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    row-gap: 26rpx;
                    column-gap: 20rpx;
                    .grid-item_2 {
                        padding: 16rpx 24rpx;
                        border-radius: 12rpx;
                        border: solid 2rpx #eeeeee;
                        .image_9 {
                            width: 20rpx;
                            height: 28rpx;
                        }
                        .text_20 {
                            line-height: 22.06rpx;
                        }
                    }
                    .image_10 {
                        width: 16rpx;
                        height: 10rpx;
                    }
                    .grid-item_4 {
                        padding: 16rpx;
                        border-radius: 12rpx;
                        border: solid 2rpx #eeeeee;
                        .image_11 {
                            width: 28rpx;
                            height: 29rpx;
                        }
                        .text_21 {
                            line-height: 21.98rpx;
                        }
                        .image_12 {
                            width: 28rpx;
                            height: 28rpx;
                        }
                        .text_22 {
                            line-height: 22.42rpx;
                        }
                    }
                }
                .grid-item {
                    padding: 24rpx 16rpx;
                    border-radius: 12rpx;
                    border: solid 2rpx #eeeeee;
                    .text_19 {
                        line-height: 22.12rpx;
                    }
                    .image_13 {
                        width: 25rpx;
                        height: 25rpx;
                    }
                    .text_23 {
                        color: #999999;
                        line-height: 22.32rpx;
                    }
                }
                .group_12 {
                    margin-right: 16rpx;
                }
                .text-wrapper_4 {
                    margin-left: 8rpx;
                    padding: 24rpx 0;
                    background-color: #ff9800;
                    border-radius: 200rpx;
                    .text_24 {
                        line-height: 25.96rpx;
                    }
                }
            }
            .font_3 {
                font-size: 24rpx;
                line-height: 22.16rpx;
                color: #555555;
            }
            .font_8 {
                font-size: 28rpx;
                line-height: 24.6rpx;
                color: #ffffff;
            }
        }
        .font {
            font-size: 32rpx;
            line-height: 29.8rpx;
            color: #333333;
        }
    }

    ::v-deep .fui-fab__btn-main {
        background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
        box-shadow: 0px 1px 8px #5db66f;
    }
</style>
