<template>
    <div class="page">
        <scroll-view scroll-y="{{true}}" @scrolltolower="getData">
            <view class="item" v-for="(item, index) in list" :key="item.id">
                <view class="flex-between">
                    <text class="name">{{ item.needName }}</text>

                    <view v-if="item.userId" class="state disable">已提交</view>
                    <view v-else class="state" @tap="showPopup(item)">我需要</view>
                </view>
                <view class="content">
                    {{ item.needDesc }}
                </view>
            </view>
        </scroll-view>
    </div>
    <wd-overlay :show="show" @click="show = false">
        <view class="popout-wrap" @click.stop>
            <view class="popout">
                <image src="@/static/image/postion/demandRegistrationPopout.png" />
                <view class="text1">需求登记</view>
                <view class="text2">平台将自动获取您个人信息</view>
                <view class="text2">用于后续平台联系您提供服务</view>
                <view class="btn flex-between">
                    <view class="cancel" @tap="show = false">取消</view>
                    <view class="confirm" @tap="submit">立即提交</view>
                </view>
            </view>
        </view>
    </wd-overlay>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getNeedListApi, needRegisterApi } from "@/api/postion";
const list = reactive([]);
let page = 1;
const getData = () => {
    getNeedListApi({
        pageSize: 10,
        pageNo: page++
    }).then(res => {
        if (res.code == 200) {
            // console.log(list);
            list.push(...res.data);
        }
    });
};
const show = ref(false);
let tempItem = null;
const showPopup = item => {
    tempItem = item;
    show.value = true;
};
const submit = () => {
    needRegisterApi(tempItem.needId).then(res => {
        if (res.code == 200) {
            tempItem.userId = true;
            uni.showToast({
                title: "申请成功",
                icon: "success"
            });
        }
        show.value = false;
    });
};
getData();
</script>

<style lang="scss" scoped>
.page {
    height: 100%;
    scroll-view {
        height: 100%;
    }
}
.item {
    padding: 16px;
    color: #1b2026;
    border-bottom: 8px solid #f3f4f8;
    .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 21px;
    }
    .state {
        padding: 4px 10px;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 6px;
    }
    .disable {
        background: #d6ddeb;
    }
    .content {
        margin-top: 7px;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0;
    }
}
.popout-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.popout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 248px;
    background-color: #ffffff;
    border-radius: 8px;
    image {
        width: 126px;
        height: 96px;
        margin-top: 16px;
    }
    view {
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        color: #000000;
        text-align: center;
        letter-spacing: 0;
    }
    .text1 {
        margin-bottom: 7px;
        color: #1b2026;
    }
    .btn {
        box-sizing: border-box;
        width: 100%;
        padding-right: 6px;
        padding-left: 29px;
        margin-top: 17px;
        .cancel {
            padding: 7px 16px;
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            color: #1f86ff;
            background: rgb(31 134 255 / 10%);
            border-radius: 6px;
        }
        .confirm {
            padding: 7px 53px;
            line-height: 22px;
            color: #ffffff;
            text-align: center;
            letter-spacing: 0;
            background: #1f86ff;
            border-radius: 6px;
        }
    }
}
</style>
