<template>
    <view class="page-container">
		<z-paging ref="paging" v-model="dataList" @query="getList">
            <template #top>
                <view class="header-section">
                    <view class="search-wrapper flex">
                        <view class="location flex">
                            <text>太原市</text>
                            <u-icon name="arrow-down" size="24rpx" color="#333" style="margin-left: 4px;"></u-icon>
                        </view>
                        <view class="search-box">
                            <u-search placeholder="请输入名称搜索" :show-action="false" bgColor="#fff"
                                v-model="params.cNickName" 
                                @search="onSearch" 
                                @custom="onSearch" 
                            ></u-search>
                        </view>
                    </view>

                    <view class="filter-tags">
                        <view class="tag-item total">
                            <text>热门推荐</text>
                        </view>
                        <view :class="{'tag-item': true, 'active': index === tabCurrent}" 
                            v-for="(item, index) in tabList" :key="index"
                            @click="onTabChange">
                            <text>{{ item }}</text>
                        </view>
                    </view>
                </view>

                <view class="banner-box">
                    <u-image src="/static/identify/bg0.png" width="100%" height="120rpx" radius="0" mode="widthFix"></u-image>
                    <view class="call-box" @click="$utils.makePhoneCall(servicePhone)">
                        <image class="icon" src="/static/identify/call.png"></image>
                        <text>客服电话：{{ servicePhone }}</text>
                    </view>
                </view>
            </template>

            <view class="list-section">
                <view class="list-item" v-for="(item, index) in dataList" :key="index">
                    <view class="left-avatar" @click="goToDetails(item)">
                        <!-- hot or recommend -->
                        <view class="badge" :class="{ hot: true }">hot</view>

                        <u-avatar :src="$globalData.publicUrl + item.cPortrait" size="136rpx" shape="circle" mode="aspectFill"></u-avatar>

                        <view class="status-pill" 
                            :class="{'green-bg': item.nStatus === 0}"
                            v-if="item.nStatus === 0">
                            可预约
                        </view>
                    </view>

                    <view class="right-content" @click="goToDetails(item)">
                        <view class="row-header">
                            <text class="name">{{ item.cNickName }}</text>
                            <!-- <text class="avail-time">最早可约: <text class="highlight">{{ item.earliestTime }}</text></text> -->
                        </view>

                        <view class="row-info two-line-text" v-if="item.cJianjie">{{ item.cJianjie }}</view>
                        <view class="row-info">
                            <text class="score">{{ item.nStar }}分</text>
                            <u-line color="#dadada" direction="col" length="18rpx" margin="0 12rpx"></u-line>
                            <!-- <text class="shop-name">{{ item.nZan }}</text>
                            <u-line color="#dadada" direction="col" length="18rpx" margin="0 12rpx"></u-line> -->
                            <text class="service-count">服务 {{ item.nNum }} 单</text>
                        </view>

                        <view class="row-tags">
                            <view class="icon-tag">
                                <u-icon name="heart-fill" color="#ff6b81" size="14"></u-icon>
                                <text>{{ item.nZan || 0 }}</text>
                            </view>
                            <view class="icon-tag">
                                <u-icon name="map-fill" color="#00cba3" size="14"></u-icon>
                                <text>{{ item.distance }} km</text>
                            </view>
                            <view class="text-tag" v-if="item.freeTravel">免出行费</view>
                        </view>
                    </view>

                    <view class="action-btn">
                        <button 
                            size="mini"
                            :class="{
                                'btn': true,
                                'disabled': item.nStatus !== 0
                            }"
                            :disabled="item.nStatus !== 0"
                            @click.stop="onSubmit(item)"
                        >{{ item.nStatus == 0 ? '立即预约' : '不可预约' }}</button>
                    </view>
                </view>
            </view>
        </z-paging>

        <!-- 商品选择 -->
        <Popup ref="orderPopup" :round="10" mode="bottom">
            <view class="popup-box">
				<view class="list">
					<view class="item" v-for="(item,index) in projects" :key="index">
						<view class="imgs">
							<image :src="$globalData.publicUrl + item.cCover" mode="" />
						</view>
						<view class="right">
							<view class="list_title">
								<view class="title">{{item.cTitle}}</view>
								<!-- <view class="time">{{item.nMinute}}分钟</view> -->
								<view class="price">
									<span>￥</span>{{item.dPrice}}
								</view>
							</view>
							<view class="num">
								{{item.cLdList}}
								<span>超{{item.nSaleNumber}}选择</span>
							</view>
							<view class="time">
								<view class="money">{{item.nMinute}}分钟</view>
								<view class="counter">
                                    <u-number-box v-model="item.number">
                                        <view slot="minus" class="minus">
                                            <u-icon name="minus-circle-fill" color="#999" size="36rpx"></u-icon>
                                        </view>
                                        <text
                                            class="input" slot="input"
                                            style="width: 50rpx; text-align: center;"
                                        >{{ item.number }}</text>
                                        <view slot="plus" class="plus">
                                            <u-icon name="plus-circle-fill" color="#11C7BF" size="36rpx"></u-icon>
                                        </view>
                                    </u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btns" @click="nowYuyue">
                    <text>立即预约</text>
                </view>
			</view>
        </Popup>
    </view>
</template>

<script>
import {
    addOrder,
    getCityList,
    engineer,
    engineerDetails,
} from '@/api/index';
import {
    getAddrList,
} from '@/api/address';
import Popup from '@/components/popup/index.vue';
export default {
    components: {
        Popup,
    },
    data() {
        return {
            params: {
                nB2: '',
                free: '',
                nStatus: '',
                cNickName: '',
            },
            tabList: ['全部', '可服务', '新商家'],
            tabCurrent: 0,
            dataList: [],
            projects: [],
            servicePhone: '19935577015'
        };
    },
    onShow() {
        this.city = uni.getStorageSync('selectCity')
    },
    methods: {
        getList(pageNo, pageSize) {
            let params = {
                current: pageNo,
				size: pageSize,
                ...this.params,

                nTong: 1,
                nStatus2: 0,
                // jsGrade: '',
                city: this.city,
                
                latitude: uni.getStorageSync('latitude'),
                longitude: uni.getStorageSync('longitude'),
                projectId: uni.getStorageSync('projectId'),
            }

            engineer(params).then(res => {
                if (res.data.code === 200) {
					this.$refs.paging.complete(res.data.data.records);
				} else {
					this.$refs.paging.complete(false);
				}
            }).catch(() => {
                
            });
        },
        // 搜索
        onSearch() {
            this.$refs.paging.reload();
        },
        // tab事件
        onTabChange(e) {
            this.tabCurrent = e;
            let params = {
                nB2: '',
                free: '',
                nStatus: '',
            };
            // 可服务
            if (e == 1) {
                params.nStatus = 0;
            }
            // 新商家
            else if (e == 2) {
                params.nB2 = 1;
            }
            // 免出行费
            else if (e == 3) {
                params.free = 1;
            }
            this.params = {
                ...this.params,
                ...params
            };
            // api
            this.$refs.paging.reload();
        },
        // 下单
        onSubmit(e) {
			if (!this.$utils.checkLogin({ type: 'modal' })) return;
            let params = {
                id: e.id
            }
            engineerDetails(params).then(res => {
                res.data.data.projects.forEach(element => {
                    element.number = 0
                });
                this.details = res.data.data;
                this.projects = res.data.data.projects;
                this.$refs.orderPopup.open();
            });
        },
        goToDetails(e) {
			if (!this.$utils.checkLogin({ type: 'modal' })) return;
            let str = uni.$u.queryParams({
                id: e.id
            });
            uni.navigateTo({
                url: `/pages/identify/details${str}`
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
	background: linear-gradient(180deg, rgba(247, 248, 250, 0) 10%, #F7F8FA 45%),
	linear-gradient(181deg, #CDF8ED 0%, #D1F8DD 100%);

    .header-section {
        padding: 24rpx;
        // sticky的效果，根据需求开启
        // position: sticky; 
        // top: 0;
        // z-index: 100;

        .search-wrapper {
            margin-bottom: 20rpx;
            padding: 4rpx 10rpx;
            background-color: #fff;
            border: 1px solid #00cba3; 
            border-radius: 60rpx;

            .location {
                font-size: 28rpx;
                font-weight: bold;
                color: #333;
                padding: 0 24rpx;
                border-right: 2rpx solid #9DDBE0;
            }

            .search-box {
                flex: 1;
            }
        }

        .filter-tags {
            gap: 24rpx;
            display: flex;
            align-items: center;

            .tag-item {
                height: 48rpx;
                line-height: 48rpx;
                font-size: 26rpx;
                color: #333;
                padding: 0rpx 24rpx;
                border-radius: 12rpx;
                background-color: #fff;

                &.total {
                    color: #ff6b81;
                    font-weight: bold;
                    background: linear-gradient(90deg, #FDF4E9 0%, #FFEFEF 100%);
                    border: 1rpx solid;
                }

                &.active {
                    background: linear-gradient(270deg, #80D5E9 0%, #8DFBF7 100%);

                    text {
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .list-section {
        padding: 24rpx 30rpx;
    }

    .banner-box {
        position: relative;

        .call-box {
            font-weight: 500;
            font-size: 34rpx;
            color: #FFFFFF;
            padding: 0 24rpx;
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 24rpx;
            z-index: 1;

            .icon {
                width: 36rpx; 
                height: 36rpx;
                margin-right: 6rpx;
            }
        }
    }
}

.list-item {
    padding: 30rpx 20rpx;
    margin-bottom: 24rpx;
    border-radius: 20rpx;
    background-color: #fff;
    display: flex;
    position: relative;

    .badge {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        padding: 4rpx 12rpx;
        border-radius: 8rpx 0 8rpx 0;
        color: #fff;
        font-size: 20rpx;
        z-index: 10;

        &.hot {
            background: linear-gradient(to right, #ff5e5e, #ff8a8a);
        }

        &.recommend {
            background: linear-gradient(to right, #f39c12, #f1c40f);
        }
    }

    .left-avatar {
        margin-right: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120rpx;

        .status-pill {
            margin-top: -16rpx; 
            z-index: 5;
            font-size: 20rpx;
            padding: 2rpx 16rpx;
            border-radius: 20rpx;
            color: #fff;

            &.green-bg {
                background-color: #00cba3;
            }
        }
    }

    .right-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8rpx;

            .name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .avail-time {
                font-size: 22rpx;
                color: #00cba3;

                .highlight {
                    margin-left: 6rpx;
                }
            }
        }

        .row-info {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 6rpx;

            .score {
                color: #EB5137;
                font-weight: bold;
            }
        }

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

            .icon-tag {
                font-size: 24rpx;
                color: #666;
                margin-right: 16rpx;
                display: flex;
                align-items: center;

                text {
                    margin-left: 4rpx;
                }
            }

            .text-tag {
                font-size: 24rpx;
                color: #F35031;
            }
        }
    }

    .action-btn {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;

        .btn {
            width: auto; 
            height: 56rpx;
            color: #fff;
            padding: 0 24rpx;
            background: linear-gradient(131deg, #00DAAB 0%, #07CDC4 100%);
            border-radius: 56rpx;

            &.disabled {
                opacity: 0.5;
            }
        }
    }
}


.popup-box {
    height: 50vh;
    padding: 30rpx 24rpx 24rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background: #F3F3F3;
    display: flex;
    flex-direction: column;

    .list {
        // height: 90%;
        padding: 0 4rpx;
        overflow-y: auto;

        .item {
            margin-bottom: 20rpx;
            padding: 24rpx 32rpx;
            border-radius: 24rpx;
            background-color: #fff;
            display: flex;
            justify-content: space-between;

            &:last-child {
                margin-bottom: 0;
            }

            .imgs {
                width: 160rpx;
                height: 160rpx;
                border-radius: 16rpx;
                overflow: hidden;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .right {
                flex: 1;
                padding-left: 30rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .list_title {
                    display: flex;
                    align-items: start;
                    justify-content: space-between;

                    .title {
                        width: 280rpx;
                        font-size: 34rpx;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    
                    .price {
                        font-size: 48rpx;
                        color: #F53E54;
                        padding: 0;
                        display: flex;
                        align-items: center;

                        span {
                            font-size: 24rpx
                        }
                    }
                }

                .num {
                    font-size: 24rpx;
                    color: #888888;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .time {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .money {
                        font-size: 26rpx;
                        color: #666666;
                        font-weight: bold;
                    }

                    .counter {
                        .input {
                            width: 50rpx;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    .btns {
        padding-top: 24rpx;

        text {
            width: 100%;
            height: 80rpx;
            color: #fff;
            line-height: 80rpx;
            text-align: center;
            background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
            border-radius: 106rpx;
            display: inline-block;
        }
    }
}
</style>