<template>
    <view class="contract-view">
        <view class="form">
            <Card title="合同名称">
                <template #right>
                    <text class="status">待签署</text>
                </template>
                <template>
                    <view class="contract-info">
                        <view>
                            <text class="label">发起人</text>
                            <text>kaeery</text>
                        </view>
                        <view>
                            <text class="label">发起时间</text>
                            <text>2024-08-19 13:33:00</text>
                        </view>
                        <view>
                            <text class="label">截至日期</text>
                            <text>2024-08-25</text>
                        </view>
                    </view>
                </template>
            </Card>
            <Card title="签署方信息">
                <template>
                    <view class="signatory-info">
                        <view>
                            <text class="label">企业名称</text>
                            <text>广东星星新能源有限公司</text>
                        </view>
                        <view>
                            <text class="label">联系人</text>
                            <text>韩梅梅</text>
                        </view>
                        <view>
                            <text class="label">联系电话</text>
                            <text>18138952909</text>
                        </view>
                    </view>
                </template>
            </Card>
            <Card title="报价信息">
                <template #right>
                    <view class="quote-money">
                        <text>报价金额</text>
                        <view class="price">
                            <TIcon name="icon-rmb" color="#F5222D" />
                            <text>7500.00</text>
                        </view>
                    </view>
                </template>
                <template>
                    <view class="quote-info">
                        <view class="device-info">
                            <view class="device-title">
                                <text class="label">桩点信息</text>
                                <text class="total">共 6 台</text>
                            </view>
                            <QuoteList :list="brandList" />
                        </view>
                        <view class="date">
                            <text class="label">安装日期</text>
                            <text>2024-08-19</text>
                        </view>
                        <view class="env">
                            <text class="label">环境要素</text>
                            <text>不限</text>
                        </view>
                    </view>
                </template>
            </Card>
        </view>
        <view class="footer">
            <view class="btn" v-for="(item, index) in btnList" :key="index" @click="item.event">
                <TIcon :name="item.icon" />
                <text v-if="!item.openType">{{ item.text }}</text>
                <u-button v-else :text="item.text" :open-type="item.openType"></u-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import Card from './components/card.vue'
import QuoteList from './components/quote-card.vue'
import { onShareAppMessage } from '@dcloudio/uni-app'

const brandList = ref([
    { id: 1, barndName: '品牌名称', deviceName: '设备名称' },
    { id: 2, barndName: '品牌名称', deviceName: '设备名称' },
    { id: 3, barndName: '品牌名称', deviceName: '设备名称' },
    { id: 4, barndName: '品牌名称', deviceName: '设备名称' }
])
const handleRepealContract = () => {
    uni.showModal({
        title: '温馨提示',
        content: '确定撤销该合同？',
        success: function (res) {
            if (res.confirm) {
            }
        }
    })
}
const contractInfo = ref({
    name: '报价合同'
})
const handleViewContract = () => {
    const { name } = contractInfo.value
    uni.navigateTo({
        url: `/bundle/pages/contract/contract-view/download?name=${name}`
    })
}
const handleSignContract = () => {
    onShareAppMessage(res => {
        return {
            title: '这份合同需要您补充信息并签署，前往查看 >',
            path: '/bundle/pages/contract/contract-detail/index',
            imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
        }
    })
}

const btnList = shallowRef([
    { text: '撤销合同', icon: 'icon-repeal', event: handleRepealContract },
    { text: '预览合同', icon: 'icon-view', event: handleViewContract },
    { text: '发起签署', icon: 'icon-navigator', event: handleSignContract, openType: 'share' }
])
</script>

<style lang="scss" scoped>
.contract-view {
    width: 100vw;
    height: 100vh;
    background-color: $gray-1;
    .form {
        flex: 1;
        overflow: auto;
        @include flex-direction;
        gap: 20rpx;
        padding: 20rpx 0 0 0;

        .status {
            font-size: 28rpx;
            color: $orage-1;
        }
        .contract-info,
        .signatory-info {
            @include flex-direction;
            gap: 20rpx;
            > view {
                @include flex-align;
                font-size: 28rpx;
                color: $gray-2;
                .label {
                    width: 160rpx;
                }
            }
        }
        .quote-money {
            @include flex-align;
            gap: 8rpx;
            font-size: 28rpx;
            .price {
                @include flex-align;
                font-weight: 700;
                color: $red-1;
            }
        }
        .quote-info {
            @include flex-direction;
            gap: 20rpx;
            .device-info {
                .device-title {
                    @include flex-justify(space-between);
                    font-size: 28rpx;
                    color: $gray-2;
                }
            }
            .date,
            .env {
                display: flex;
                font-size: 28rpx;
                color: $gray-2;
            }
            > view {
                .label {
                    width: 160rpx;
                }
            }
        }
    }
    .footer {
        height: 120rpx;
        @include flex-align;
        background-color: $white-1;
        > view {
            @include flex-center;
            gap: 8rpx;
            flex: 1;
            position: relative;
            font-size: 28rpx;
            &:last-child {
                &::after {
                    display: none;
                }
            }
            &::after {
                display: block;
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                width: 1px;
                height: 32rpx;
                background-color: $gray-3;
            }
            :deep(.u-button) {
                border: none;
                padding: 0;
            }
        }
    }
}
</style>
