<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">

                        <template v-if="item.hasOwnProperty('contractInfo') && item['contractInfo'] !== null">

                            <template v-if="item['contractInfo']['contractStatus'] === 'WAIT_SIGN'">
                                <text class="status status-waiting">待签约</text>
                                <view class="action-btn" @click="handleAction(item)">
                                    <text>去签约</text>
                                    <text class="arrow">›</text>
                                </view>
                            </template>

                            <template v-else-if="item['contractInfo']['contractStatus'] === 'SIGNED'">
                                <text class="status status-success">已签约</text>
                                <view class="action-btn" @click="readAction(item)">
                                    <text>查看协议</text>
                                    <text class="arrow">›</text>
                                </view>
                            </template>

                            <template v-else-if="item['contractInfo']['contractStatus'] === 'SIGNING'">
                                <text class="status status-processing">签约中</text>
                                <view class="action-btn" @click="handleAction(item)">
                                    <text>去签约</text>
                                    <text class="arrow">›</text>
                                </view>
                            </template>


                            <template v-else>
                                <text class="status status-error">签约失败</text>
                                <view class="action-btn" @click="handleAction(item)">
                                    <text>重新签约</text>
                                    <text class="arrow">›</text>
                                </view>
                            </template>


                        </template>

                        <template v-else>
                            <text class="status status-waiting">待签约</text>
                            <view class="action-btn" @click="handleAction(item)">
                                <text>去签约</text>
                                <text class="arrow">›</text>
                            </view>
                        </template>





                    </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弹窗 -->
        <u-popup
            mode="center"
            :round="16"
            width="80%"
            ref="popups"
        >
            <view class="protocol-popup">
                <view class="popup-content">
                    <text class="notice">
                        为开通共享经济业务，请阅读、勾选签署以下平台业务合作协议。点击勾选协议，即表示您已阅读并同意接受该协议内容。若不同意，请勿勾选。
                    </text>


                    <label class="agreement-check">
                        <checkbox-group @change.stop="toggleAgree">
                            <checkbox :checked="isAgreed" color="#1989fa" />
                        </checkbox-group>
                        <text class="protocol-text">已阅读并同意</text>
                        <text class="protocol-link" @click.stop="viewProtocol()">《平台业务合作协议》</text>
                    </label>
                </view>


                <view class="popup-footer">
                    <button
                        :disabled="!isAgreed || loading"
                        type="primary"
                        shape="circle"
                        @click="confirmSign"
                    >
                        立即签约
                    </button>
                </view>
            </view>
        </u-popup>


        <!-- 底部按钮 -->
        <view class="action-buttons">
            <button class="btn primary">补签协议</button>

        </view>
    </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.getSignListApi();
            console.log('res',res)

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

        handleAction(item) {
            this.$refs.popups.open('top')
            this.itemInfo = item;
            /*
            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
        },

        readAction(item){
            if (item['contractInfo'] == null) {
                return;
            }

            let url = item['contractInfo']['previewUrl'];
            uni.navigateTo({
                url: `/pages/contract/file?url=${encodeURIComponent(url)}`
            });
        },
        viewProtocol() {
            let url = this.itemInfo['agreementUrl'];
            uni.navigateTo({
                url: `/pages/contract/file?url=${encodeURIComponent(url)}`
            });
        },
        async confirmSign() {
            if (!this.isAgreed) return

            uni.showLoading({
                title: '签约中...',
                mask: true
            });


            this.loading = true;
            try {
                let res = await signApi.signApi({config_id:this.itemInfo.id})
                console.log('xxx',res)
                this.showPopup = false
                if (res.code === 0) {
                    this.$refs.popups.close()
                    uni.showModal({
                        title: '提示',
                        content: '签署成功',
                        confirmText: '确定',
                        success: (res) => {

                            this.initData();
                            this.showPopup = false
                            this.isAgreed = false
                            this.loading = false
                        }
                    });



                    //打开签署页面
                    /*let url = 'https://h5.asign.cn/web/short/MrqQZb493218';
                    uni.navigateTo({
                        url: `/pages/contract/user-sign?contractId=${res.data.contractId}&userSignUrl=${encodeURIComponent(res.data.userSignUrl)}`
                    });

                    uni.$on('SIGN_SUCCESS', this.handleSignSuccess);*/
                }
                console.log('this.contractList',this.contractList)
            } catch (e) {
                uni.showToast({ title: e.message, icon: 'none' });
            } 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>
