<template>
    <view class="container">
        <!-- 签约列表 -->
        <view class="contract-list">
            <view
                class="contract-item"
                v-for="(item, index) in contractList"
                :key="index"
            >
                <view class="item-content">
                    <text class="title">{{ item.subjectName }}</text>
                    <view class="right-section">


                            <view class="action-btn" @click="confirmSign(item)">
                                <text>下载</text>
                                <text class="arrow">›</text>
                            </view>





                    </view>
                </view>
                <view v-if="item.tip" class="item-tip">
                    <text class="tip-icon">?</text>
                    <text class="tip-text">{{ item.tip }}</text>
                </view>
            </view>
        </view>

        <!-- uView弹窗 -->

        </view>


</template>

<script>
import {signApi} from "@/api/sign";

export default {
    data() {
        return {
            showPopup: false,
            isAgreed: false,
            loading: false,
            currentItem: null,
            itemInfo:{},
            contractList: [
                /*{
                    subjectName: '中智',
                    signed: false,
                    action: '重新签约',
                    tip: '补签协议'
                },
                {
                    subjectName: '云账户',
                    signed: false,
                    action: '重新签约'
                },
                {
                    subjectName: 'fesco',
                    signed: false,
                    action: '去签约'
                },
                {
                    subjectName: 'fesco-广西',
                    signed: false,
                    action: '查看协议'
                },
                {
                    subjectName: '全思福·江西',
                    signed: false,
                    action: '查看协议'
                },
                {
                    subjectName: '税地名称xx',
                    signed: false,
                    action: '去签约'
                }*/
            ],
            /* statusStyle: {
                 '待签约': 'status-waiting',
                 '签约失败': 'status-error',
                 '签约中': 'status-processing',
                 '已签约': 'status-success'
             }*/

            statusStyle: {
                '0': 'status-waiting',
                '-2': 'status-error',
                '-1': 'status-processing',
                '1': 'status-success'
            },


            statusText: {
                'WAIT_SIGN':'待签约',
                'SIGNING':'签约中',
                'SIGNED':'已签约',
                'EXPIRED':'过期',
                'REJECTED':'拒签',
                'INVALID':'作废',
                'REVOKED':'撤销',
            }
        }
    },
    onLoad(){
        this.initData();
    },
    methods: {
        getContractStatus(item){
            if (item.hasOwnProperty('contractInfo') && item['contractInfo'] !== null) {
                //有协议
                return this.statusText[item['contractInfo'].contractStatus];
            }else{
                return '待签约';
            }
        },
        async initData(){
            console.log('xxxxx')
            const res = await signApi.getReportListApi();
            console.log('res',res)

            this.handleData(res.data);
            console.log('this.contractList',this.contractList)
        },

        handleAction(item) {
            this.itemInfo = item;
            this.confirmSign()
            /*
            if (item.action === '去签约') {
                this.currentItem = item
                this.showPopup = true
            } else {
                uni.showToast({
                    title: '功能跳转',
                    icon: 'none'
                })
            }*/

        },

        handleData(list){
            /*let len = list.length;
            for (let i = 0; i < list; i++) {
                if (list[i].hasOwnProperty('contractInfo') && list[i]['contractInfo'] !== null)
                list[i]
            }*/

            this.contractList = list;
        },
        toggleAgree(e) {
            this.isAgreed = e.detail.value.length > 0
        },
         async confirmSign(item) {
            console.log('xxxxx')
            uni.showLoading({
                title: '下载中...',
                mask: true
            });
            this.loading = true;
            try {
                let res = await signApi.getReportDowntApi({config_id:item.id})
                console.log('this.contractList',res)

                if (res.code === 0) {
                    uni.showLoading({
                        title: '下载成功...',
                        mask: true
                    });

                    //TODO 后续操作

                    uni.showModal({
                        title: '提示',
                        content: '签署成功 ' + res.data['previewUrl'],
                        confirmText: '复制链接',
                            success: (r) => {
                            console.log('复制链接',res.data)

                            uni.setClipboardData({
                                data: String(res.data['previewUrl'])
                            })

                            this.loading = false
                        }
                    });
                }else{
                    uni.showLoading({
                        title: res.msg,
                        mask: true
                    });
                }





            } catch (e) {
                this.loading = false
                uni.showToast({ title: e.message, icon: 'none' });
                console.error(e)
            } finally {
                this.loading = false
                uni.hideLoading();
            }


            /*uni.navigateTo({
                url: `/pages/signing/index?title=${this.currentItem.title}`
            })*/
        },
        handleSignSuccess(data) {
            console.log('监听签署结果 成功',data)
            this.initData();
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 24rpx;
    background: #f5f6f8;
    min-height: 100vh;
}

.contract-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);

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

        .title {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
        }

        .right-section {
            display: flex;
            align-items: center;
            gap: 40rpx;

            .status {
                font-size: 26rpx;
                padding: 6rpx 20rpx;
                border-radius: 8rpx;

                &-waiting {
                    background: rgba(255,152,0,0.1);
                    color: #ff9800;
                }
                &-processing {
                    background: rgba(25,137,250,0.1);
                    color: #1989fa;
                }
                &-error {
                    background: rgba(238,10,36,0.1);
                    color: #ee0a24;
                }
                &-success {
                    background: rgba(7,193,96,0.1);
                    color: #07c160;
                }
            }

            .action-btn {
                color: #1989fa;
                font-size: 28rpx;
                display: flex;
                align-items: center;

                .arrow {
                    margin-left: 8rpx;
                    font-weight: 700;
                    transform: scale(1.5);
                }
            }
        }
    }

    .item-tip {
        margin-top: 24rpx;
        padding-top: 24rpx;
        border-top: 1rpx solid #eee;
        display: flex;
        align-items: center;
        gap: 12rpx;

        .tip-icon {
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            background: #1989fa;
            color: #fff;
            text-align: center;
            line-height: 32rpx;
            font-size: 24rpx;
        }

        .tip-text {
            color: #666;
            font-size: 26rpx;
        }
    }
}
.protocol-popup {
    padding: 40rpx;

    .popup-content {
        .notice {
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
            margin-bottom: 40rpx;
        }

        .agreement-check {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            padding-top:30rpx;

            checkbox {
                transform: scale(0.9);
                margin-right: 12rpx;
            }

            .protocol-link {
                color: #1989fa;
                margin-left: 8rpx;
            }
        }
    }

    .popup-footer {
        margin-top: 40rpx;

        ::v-deep .u-btn {
            height: 80rpx;
            font-size: 30rpx;
        }
    }
}


.action-buttons {
    position: fixed;
    bottom: 48rpx;
    left: 32rpx;
    right: 32rpx;
    display: flex;
    gap: 24rpx;

    .btn {
        flex: 1;
        height: 96rpx;
        line-height: 96rpx;
        border-radius: 48rpx;
        font-size: 32rpx;

        &.secondary {
            background: #f5f5f5;
            color: #666;
        }

        &.primary {
            background: #007aff;
            color: #fff;
        }
    }
}
</style>
