<template>
    <view class="source-bottom-fixed">
        <view class="source-top-view h-49"></view>
        <view class="source-bottom-view pt-49 text-center bg-#fff pt-60" :style="{ opacity: btnStyle == 'close' ? 0 : 1 }">
             <view style="opacity: 0;">{{ mapTextBtn[btnStyle] }}</view>
       
        </view>
        <view @click="clickBtnBall" class="source-center-view d-flex flex-cln a-c j-c">
            <view class="source-btn-ball d-flex a-c j-c" :class="{ [`btn-deg-${btnStyle}`]: true }" :style="{ backgroundImage: 'url(https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/storage/add_c_btn.png)' }"></view>
            <view class="c-primary f-s-28 pt-6">{{ mapTextBtn[btnStyle] }}</view>
            
        </view>
        <view class="bg-#fff" :style="{ height: safeAreaBottom + 'px' }"></view>
        <view class="bottom-circle-line" :class="{ 'bottom-circle-line-active': btnStyle == 'close' }" :style="{ bottom: safeAreaBottom + 'px' }">
            <view class="bottom-circle d-flex" :style="{ backgroundImage: 'url(https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/storage/send_btm_bg_c.png)' }">
                <view class="flex1 d-flex flex-cln a-c pt-160 pl-30">
                    <view>
                        <image class="w-68 h-68" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/storage/xzhwk_icon_sd.png" mode="widthFix" />
                    </view>
                    <view class="f-s-28 c-#333">下载货位卡</view>
                    <view class="f-s-22 c-#999">库存结余清晰</view>
                </view>
                <view class="d-flex flex-cln a-c pt-24">
                     <view>
                        <image class="w-68 h-68" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/storage/xzsyrk_icon_sd.png" mode="widthFix" />
                    </view>
                    <view class="f-s-28 c-#333">新增溯源入库</view>
                    <view class="f-s-22 c-#999">适合贴有溯源码的鲜货</view>
                </view>
                <view class="flex1 d-flex flex-cln a-c pt-160 pr-30" @click="clickBtnBall();$u.route({ url: '/plant/storage/fresh-goods/add/index' });">
                     <view>
                        <image class="w-68 h-68" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/storage/xzfsyrk_icon_sd.png" mode="widthFix" />
                    </view>
                    <view class="f-s-28 c-#333">新增非溯源入库</view>
                    <view class="f-s-22 c-#999">适合无法溯源的鲜货</view>
                </view>
                </view>
        </view>
    </view>
      <view class="pt-60">
        <view style="opacity: 0;">{{ mapTextBtn[btnStyle] }}</view>
    </view>
    <view class="bg-#fff" :style="{ height: safeAreaBottom + 'px' }"></view>
</template>
<script setup lang="ts">
const windowInfo = uni.getWindowInfo();
const safeAreaBottom = windowInfo.safeAreaInsets.bottom;
const btnStyle = ref('add')
const mapTextBtn = ref<any>({
    add: '新增鲜货信息',
    close: '关闭',
});
const clickBtnBall = () => {
    btnStyle.value = btnStyle.value === 'add' ? 'close' : 'add';
}
</script>

<style scoped lang="scss">
.source-bottom-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.source-center-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 200rpx;
    z-index: 99;
    .source-btn-ball {
        width: 98rpx;
        height: 98rpx;
        border-radius: 50%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}
.bottom-circle-line {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1rpx;
    opacity: 0;
    transform: translateY(80rpx);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.bottom-circle-line-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.source-bottom-view {
    box-shadow: 0px 0px 6rpx 0px #F1F6F4;
    transition: all 0.3s ease;
}
.bottom-circle {
    position: absolute;
    width: 750rpx;
    height: 750rpx;
    border-radius: 50%;
    left: 0;
    bottom: -375rpx;
    background-size: contain;
    background-position: top;
}
.btn-deg-add {
    transform: rotate(0);
    transition: transform 0.3s ease;
}
.btn-deg-close {
    transform: rotate(135deg);
    transition: transform 0.3s ease;
}
</style>
