<template>
    <view class="PaymentProBox column">
        <view class="PaymentProTitle row items-center justify-center">
            <!-- {{authInfor.ContractStatus}}--{{ authInfor.Status }} -->
            <image v-if="authInfor.Status==1||authInfor.Status==3" :src="stateImg[0]" />
            <image v-if="authInfor.ContractStatus==5&&authInfor.Status==2" :src="stateImg[1]" />
            <text>
                <template v-if="authInfor.Status==1||authInfor.Status==3">
                    审核中
                </template>
                <template v-if="authInfor.ContractStatus==4&&authInfor.Status==2">
                    打款中
                </template>
                <template v-if="(authInfor.ContractStatus==1||authInfor.ContractStatus==5)&&authInfor.Status==2">
                    {{authInfor.ContractStatus==1?'未生效':'已完成'}}
                </template>
            </text>
        </view>
        <view class="PaymentProCenterForm column">
            <scroll-view :scroll-y="true"
            style="width: 100%;height: 1px;flex: 1;background: #FFFFFF;border-radius: 20rpx;overflow: hidden;">
                <view class="PaymentProCenterBox">
                    <view class="PaymentProCTitle">结算账户/业务代表</view>
                    <view class="PaymentProCText row-sbas-n">
                        <view>银行名称</view>
                        <view class="col">{{ authInfor.BankName }}</view>
                    </view>
                    <view class="PaymentProCText row-sbas-n">
                        <view>银行账户</view>
                        <view class="col">{{ authInfor.CardNum }}</view>
                    </view>
                    <view class="PaymentProCText row-sbas-n">
                        <view>开户行</view>
                        <view class="col">{{ authInfor.OpenBankName }}</view>
                    </view>
                    <view class="PaymentProCText row-sbas-n">
                        <view>开户姓名</view>
                        <view class="col">{{ authInfor.AccountHolder }}</view>
                    </view>
                    <view class="PaymentProCText row-sbas-n">
                        <view>电话</view>
                        <view class="col">{{ authInfor.ContactNumber }}</view>
                    </view>
                    <view class="PaymentProCText row-sbas-n">
                        <view>服务人员</view>
                        <view class="col">{{ authInfor.EnterName }}</view>
                    </view>
                    <view class="PaymentProCJD">
                        <template v-if="type==2">审核进度</template>
                        <template v-else-if="type==3">提现进度</template>
                    </view>
                    <view>
                        <view class="PaymentProCJDBox row-sbas-n items-center"
                        v-for="(item,index) in stepList"
                        :key="index"
                        :class="[index>StepNum?'active':'']">
                            <view class="PaymentProCJDBoxL row items-center">
                                <view class="PaymentProCJDBoxLine row items-center justify-center">
                                    <view class="PaymentProCJDD"></view>
                                    <view v-if="index>StepNum" class="PaymentProCJDDHS">
                                        {{ index+1 }}
                                    </view>
                                    <view v-if="index" class="PaymentProCJDLine"></view>
                                </view>
                                <view class="PaymentProCJDText">{{ item.Name }}</view>
                            </view>
                            <view class="PaymentProCJDBoxR">
                                <template v-if="(type==2&&((authInfor.Status==1&&!index)||authInfor.Status==3))
                                ||(type==3&&item.Status==2)">{{ item.Time }}</template>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="PaymentProButBox row">
                <view class="PaymentProBut PaymentProButL col" @click="goBack">返回</view>
                <view v-if="(type==2&&authInfor.Status==3)||type==3" 
                class="PaymentProBut PaymentProButR col" 
                @click="goUrl">
                    <template v-if="type==2&&authInfor.Status==3">修改认证</template>
                    <template v-else-if="type==3">查看数据</template>
                </view>
            </view>
        </view>
        <view style="height: 20rpx;"></view>
        <auth v-if="showAuth&&is_show_auth==1" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
    </view>
</template>
<script>
import auth from "@/components/auth/index.vue";
export default {
    components: {
        auth,
    },
    data() {
        return {
            msg: {
                SaleName: '',
                SaleId: '',
                img: '',
                name: '',
                time: '',
            },
            showAuth: false,
            stepList:[],
            toExamineSteps:[
                {Name:'审核中',Id:1,Time:'',},
                {Name:'审核通过',Id:2,Time:'',},
            ],
            StepNum: 0,
            U:{},
            b2bUser:{},
            is_show_auth: 0,
            stateImg:[
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797293350216749.png',
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797058914190239.png'
            ],
            authInfor: null,
            type: 0,
        }
    },
    onLoad(options) {
        this.ContractId = options.ContractId
        this.type = options.type?options.type:0
        if(this.type==2){
            uni.setNavigationBarTitle({
				title: "合同",
			}); 
        }
    },
    onShow() {
        this.U = uni.getStorageSync("mall_UserInfo");
        this.b2bUser = uni.getStorageSync("b2b_user");
        let basedata = uni.getStorageSync("basedata");
        //判断后台是否开启自动授权
        if (basedata && basedata.mall
        && basedata.mall.setting 
        && basedata.mall.setting.is_show_auth ==1) {
            this.is_show_auth = 1;
        }

        if (!this.U) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        } else if (!this.b2bUser && this.is_show_auth == 1) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        }
    },
    mounted() {
        this.getInfor()
        this.getSignDetails()
    },
    methods: { 
        goBack(){
            if(this.type==2){
                uni.redirectTo({
                    url: '/pages/bigredrnvelope/list'
                })
            }else if(this.type==3){
                uni.redirectTo({
                    url: '/pages/bigredrnvelope/list'
                })
            }
        },
        goUrl(){
            if(this.type==2){
                uni.navigateTo({//合同修改
                    url: `/pages/bigredrnvelope/signAcontract?ContractId=${this.ContractId}`
                })
            }else if(this.type==3){//可结算
                uni.navigateTo({
                    url: `/pages/bigredrnvelope/SettableList?ContractId=${this.ContractId}`
                })
            }
        },
        getSignDetails(){
            uni.showLoading({
                title: '加载中',
                mask: true
            })
            this.apipost('app_customer_GetAuthenticationContractDetails',{
                ContractId: this.ContractId
            },
            res=>{
                if (res.resultCode == 1) {
                    let data = res.data
                    this.Details = data
                    if(this.type==2){
                        this.toExamineSteps[0].Time = data.CreateTime
                        this.toExamineSteps[1].Time = data.UpdateTime
                        this.stepList = JSON.parse(JSON.stringify(this.toExamineSteps))
                    }else{
                        for(let i=0;i<data.AuditSteps.length;i++){
                            let record = data.AuditSteps[i]
                            let Time = ''
                            if(record.AuditRecordList.length>0){
                                Time = data.AuditSteps[i].AuditRecordList[0].AduitDate
                            }
                            let obj = {
                                Name: i?record.AuditDescription:record.AuditRecordList[0].AuditName,
                                Id: i+1,
                                Time: Time,
                                Status: record.Status,
                            }
                            this.stepList.push(obj)
                            if(obj.Status==2){
                                this.StepNum = i
                            }
                        }
                    }
                    setTimeout(()=>{
                        uni.hideLoading()
                    },500)
                }
            })
        },
        getInfor(){
            this.apipost('app_customer_GetAuthenticationDetails',{
                CustomerInfoChildrenId: this.b2bUser.customerInfoChildrenId
            },
            res=>{
                if (res.resultCode == 1) {
                    let data = res.data
                    this.authInfor = data
                    if(this.type==2){
                        if(this.authInfor.Status==1||this.authInfor.Status==3) this.StepNum = 0 
                        else this.StepNum = 1
                    }
                }
            })
        },
        reloadUserinfo() {
            const pages = getCurrentPages()
            const curPage = pages[pages.length-1]
            curPage.onLoad(curPage.options)
            curPage.onShow()
            curPage.onReady()
        },
        //关闭登录窗口
        gbAuth() {
            this.showAuth = false;
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.PaymentProBox{
    height: 100vh;
    background: linear-gradient(0deg, #F5F7FA, #E5F0FF);
}
.PaymentProTitle{
    font-size: 40rpx;
    font-weight: bold;
    padding: 40rpx 0 50rpx 0;
}
.PaymentProTitle image{
    width: 43rpx;
    height: 54rpx;
    margin-right: 36rpx;
}
.PaymentProCenterForm{
    padding: 0 31rpx;
    height: 1px;
    flex: 1;
}
.PaymentProCenterBox{
    padding: 37rpx 40rpx;
}
.PaymentProCTitle{
    font-weight: bold;
    font-size: 32rpx;
    padding: 18rpx 0;
}
.PaymentProCText{
    padding: 27rpx 0;
}
.PaymentProCText view:first-child{
    width: 170rpx;
    color: #7686A3;
}
.PaymentProCJD{
    font-weight: bold;
    font-size: 32rpx;
    padding: 53rpx 0 30rpx;
}
.PaymentProCJDBox{
    height: 90rpx;
}
.PaymentProCJDBoxLine{
    width: 50rpx;
    height: 50rpx;
    background: #DBF0FF;
    border-radius: 50%;
    position: relative;
}
.PaymentProCJDD{
    width: 24rpx;
    height: 24rpx;
    background: #0198FF;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.PaymentProCJDDHS{
    width: 34rpx;
    height: 34rpx;
    line-height: 30rpx;
    text-align: center;
    font-size: 26rpx;
    background: #9AA6C6;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    color: #fff;
}
.PaymentProCJDLine{
    width: 8rpx;
    height: 70rpx;
    background: #E6E9F1;
    // background: red;
    position: absolute;
    left: 22rpx;
    top: -61rpx;
    z-index: 1;
}
.PaymentProCJDText{
    font-size: 24rpx;
    margin-left: 25rpx;
}
.PaymentProCJDBoxR{
    font-size: 24rpx;
    color: #BFBFBF;
}
.PaymentProCJDBox.active .PaymentProCJDBoxLine{
    background: #fff;
}
.PaymentProCJDBox.active .PaymentProCJDText{
    color: #8391AC;
}
.PaymentProCJDBox.active .PaymentProCJDD{
    display: none;
}
.PaymentProButBox{
    margin-top: 42rpx;
}
.PaymentProBut{
    border-radius: 14rpx;
    padding: 28rpx 0;
    text-align: center;
}
.PaymentProButL{
    border: 2rpx solid #0198FF;
    color: #0198FF;
}
.PaymentProButR{
    margin-left:42rpx;
    border: 2rpx solid #0198FF;
    background: #0198FF;
    color: #fff;
}
</style>
