<script setup lang="ts">
    import successfulDialog from '@/components/ConfirmDialog/successfulDialog.vue'
    import { getCurrentDateTime } from '@/utils/date'
    import * as HomeAPI from '@/api/model/home'
    import { useUserStore } from '@/store/modules/user'

    const userStore = useUserStore()
    const consultRecord = reactive({
        id: '',
        mobile: '', // 咨询人号码
        consultTime: '', // 咨询时间
        bizType: 5, // 业务类型(1代理记账,2农资,3农机,4金融)
        enterpriseId: '2004840258270471581', // 意向企业
        feedbackRemark: '', // 反馈备注
    })
    const pageData = reactive({
        showLogoutDialog: false,
        allpyMessageTitle: '',
        applyMessageText: '',
    })
    onShow(() => {
        const { id, realname, phone } = userStore.getUserInfo
        consultRecord.id = id
        consultRecord.mobile = phone
        consultRecord.feedbackRemark = realname
    })
    // 洽谈合作
    function onCooperationClick() {
        // Message.alert('洽谈合作功能暂不可用，敬请期待~', '温馨提示')
        consultRecord.consultTime = getCurrentDateTime()
        HomeAPI.postConsultRecordAdd(consultRecord).then((res) => {
            pageData.allpyMessageTitle = '申请成功'
            pageData.applyMessageText = '平台已收到申请，将尽快与您取得联系！'
            pageData.showLogoutDialog = true
        })
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col section">
            <view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group">
                <view class="image" />
                <view class="codefun-flex-row group_2" />
            </view>
            <view class="codefun-self-start image_5 mt-17" />
        </view>
        <view class="codefun-flex-col codefun-relative group_3">
            <view class="codefun-flex-col section_2">
                <image
                    class="codefun-self-start image_6"
                    src="/static/images/codefun/a145dedf9912bc641b6d3cfcfaae1f0d.png"
                />
                <view
                    class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper mt-13"
                >
                    <text class="font text">主营：生鲜食材、社区便民、当日售完不过夜</text>
                </view>
                <text class="codefun-self-stretch font text_2 mt-13 indent-md">
                    钱大妈是华南地区知名的社区生鲜连锁品牌，秉承"不卖隔夜肉"的经营理念，致力于为社区居民提供新鲜、安全的食材。每天19点后开始打折销售，确保所有生鲜商品当日售完。门店深入社区，提供便捷的购物体验。严选优质供应商，建立完善的品质管控体系，从源头把控食材安全。会员体系提供专属折扣和积分回馈，让新鲜食材走进千家万户，打造值得信赖的社区生鲜品牌。
                </text>
            </view>
            <view class="codefun-flex-col section_3">
                <view class="codefun-flex-col codefun-items-start">
                    <text class="font_2">市场服务</text>
                    <view class="codefun-mt-12 section_4" />
                </view>
                <view class="codefun-mt-16 codefun-flex-row">
                    <view class="codefun-flex-col codefun-items-center equal-division-item section_5">
                        <image class="image_7" src="/static/images/codefun/1c894d991cb2f0bc70d7b3800e700423.png" />
                        <text class="codefun-mt-8 font text_3">线上预订自提</text>
                    </view>
                    <view class="codefun-ml-10 codefun-flex-col codefun-items-center equal-division-item section_6">
                        <image class="image_7" src="/static/images/codefun/992b9452dc42a5ce3e7ba8e8331e04b6.png" />
                        <text class="codefun-mt-8 font text_4">社区门店加盟</text>
                    </view>
                    <view class="codefun-ml-10 codefun-flex-col codefun-items-center equal-division-item section_7">
                        <image class="image_7" src="/static/images/codefun/4c062022080fd91d26f0e788b0c7bcc3.png" />
                        <text class="codefun-mt-8 font">企业团购</text>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col section_8">
                <view class="codefun-flex-col codefun-items-start">
                    <text class="font_2 text_5">合作伙伴</text>
                    <view class="codefun-mt-12 section_4" />
                </view>
                <view class="codefun-mt-12 codefun-flex-col group_4">
                    <view class="codefun-flex-row">
                        <image class="image_8" src="/static/images/codefun/3e495e0ba02a944ec68e3f79a3f71920.png" />
                        <image
                            class="codefun-ml-30 image_8"
                            src="/static/images/codefun/53aa6dffcd3fa570a498631722b1dbc2.png"
                        />
                    </view>
                    <view class="codefun-flex-row codefun-justify-between group_5 mt-9">
                        <image class="image_8" src="/static/images/codefun/979b55187f885f1b302dd29760bb516b.png" />
                        <image class="image_8" src="/static/images/codefun/99f963e1a4c7a2505491d2f15e11eea9.png" />
                    </view>
                </view>
            </view>
            <view
                class="codefun-flex-row codefun-justify-center codefun-items-center section_9"
                @click="onCooperationClick"
            >
                <image class="image_9" src="/static/images/codefun/3e23931a51dff8d555bc053a33133be1.png" />
                <text class="text_6 ml-9">洽谈合作</text>
            </view>
        </view>
    </view>
    <successfulDialog
        v-model:show="pageData.showLogoutDialog"
        :title="pageData.allpyMessageTitle"
        :content="pageData.applyMessageText"
        confirmText="我知道了"
        @confirm="pageData.showLogoutDialog = false"
    />
</template>

<style scoped lang="scss">
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-17 {
        margin-top: 34rpx;
    }
    .mt-13 {
        margin-top: 26rpx;
    }
    .mt-9 {
        margin-top: 18rpx;
    }
    .ml-9 {
        margin-left: 18rpx;
    }
    page {
        background-color: #e6f5e8;
    }
    .page {
        padding-bottom: 140rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        .section {
            padding: 28rpx 38rpx 382rpx;
            background-image: url('/static/images/codefun/ad85a97458671a968e690f0108861184.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .group {
                padding: 0 2rpx;
                .image {
                    border-radius: 64rpx;
                    width: 108rpx;
                    height: 42rpx;
                }
                .group_2 {
                    margin-right: 16rpx;
                    .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;
                    }
                }
            }
            .image_5 {
                mix-blend-mode: NOTTHROUGH;
                width: 14rpx;
                height: 26rpx;
            }
        }
        .group_3 {
            margin-top: -188rpx;
            padding: 0 24rpx 16rpx;
            .section_2 {
                margin-right: 8rpx;
                padding: 38rpx 16rpx 26rpx 28rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .image_6 {
                    width: 236rpx;
                    height: 72rpx;
                }
                .text-wrapper {
                    margin-right: 12rpx;
                    padding: 16rpx 0;
                    background-image: linear-gradient(275.2deg, #ff3b3b 0%, #ff8f8f 97.2%);
                    border-radius: 8rpx;
                    .text {
                        margin-left: 20rpx;
                        color: #ffffff;
                        line-height: 22.64rpx;
                    }
                }
                .text_2 {
                    line-height: 40rpx;
                    text-align: justify;
                }
            }
            .section_3 {
                margin-right: 8rpx;
                margin-top: 24rpx;
                padding: 24rpx 28rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .equal-division-item {
                    flex: 1 1 200rpx;
                    .image_7 {
                        width: 32rpx;
                        height: 32rpx;
                    }
                    .text_3 {
                        line-height: 22.36rpx;
                    }
                    .text_4 {
                        line-height: 22.4rpx;
                    }
                }
                .section_5 {
                    padding: 28rpx 0;
                    background-color: #eefaeb;
                    border-radius: 8rpx;
                    height: 128rpx;
                }
                .section_6 {
                    padding: 28rpx 0;
                    background-color: #fff3e7;
                    border-radius: 8rpx;
                    height: 128rpx;
                }
                .section_7 {
                    padding: 28rpx 0;
                    background-color: #fff3f1;
                    border-radius: 8rpx;
                    height: 128rpx;
                }
            }
            .font {
                font-size: 24rpx;
                font-family: SourceHanSansCN;
                line-height: 22.52rpx;
                color: #333333;
            }
            .section_8 {
                margin-right: 8rpx;
                margin-top: 24rpx;
                padding: 28rpx;
                background-color: #ffffff;
                border-radius: 16.14rpx;
                mix-blend-mode: NOTTHROUGH;
                .text_5 {
                    line-height: 29.82rpx;
                }
                .group_4 {
                    padding-left: 16rpx;
                    padding-right: 8rpx;
                    .image_8 {
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        width: 242rpx;
                        height: 64rpx;
                    }
                    .group_5 {
                        padding-left: 72rpx;
                    }
                }
            }
            .font_2 {
                font-size: 32rpx;
                font-family: SourceHanSansCN;
                line-height: 30.04rpx;
                color: #333333;
            }
            .section_4 {
                background-image: linear-gradient(272deg, #5cb56e 0%, #64d63e 100%);
                width: 128rpx;
                height: 6rpx;
            }
            .section_9 {
                position: fixed;
                left: 40rpx;
                right: 40rpx;
                bottom: 40rpx;
                z-index: 1;
                padding: 20rpx 0;
                background-color: #ff9800;
                border-radius: 198rpx;
                .image_9 {
                    width: 30rpx;
                    height: 30rpx;
                }
                .text_6 {
                    color: #ffffff;
                    font-size: 28rpx;
                    font-family: SourceHanSansCN;
                    line-height: 25.92rpx;
                }
            }
        }
    }
</style>
