<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 { s } from 'vite/dist/node/types.d-aGj9QkWt'
    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){
		let text = e.text;
		let value = e.value;
		let areaText = "",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){
		let val = e.value;
		getProvince(val,e);
	}
	// 获取下一级地区
	function getProvince(code,e) {
		LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
			if(res.length){
				let dataArr = [];
				for(let i = 0; i < res.length; i++){
					let 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()
		
		let pages = getCurrentPages();
		let 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) {
		let 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"></fui-cascader>
			<view class="fui-icon__close" @tap.stop="pageData.show.address = false">
				<fui-icon name="close" :size="48"></fui-icon>
			</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>
