<template>
    <view class="contract">
    <u-navbar
      back-icon-color="#333333"
      background="#FFFFFF"
      title="我的合同"
      titleColor="#333333"
      :border-bottom="false"
      title-bold
    ></u-navbar>
        <view class="content">
			<view v-if="res.length > 0">
				<text class="title">合同清单</text>
				<view
					class="jf-currency-class"
					v-for="item in res"
					:key="item.id"
					@click="goBaidu(item.url)"
				>
					<view class="left">{{ item.name }}</view>
					<view class="text1">《{{ item.name }}》</view>
					<view class="text2">下载时间: {{ item.create_at }}</view>
				</view>
			</view>
			<view v-else class="no-contract">
				<image :src="zanwuhetonImage" class="no-contract-image"></image>
				<text>当前暂无合同</text>
			</view>
        </view>
    </view>
</template>
<script>
import moment from "moment";
export default {
    data() {
        return {
            background: {
                backgroundColor: "#F4F5F7",
            },
            res: [],
            type: "充电桩",
        };
    },
    onLoad() {
		getApp().trackPage('我的合同列表页')
        this.getContract(this.type);
    },
    computed: {
		zanwuhetonImage() {
			return process.uniEnv.qn_base_url + 'zanwuheton.png'
		},
	},
    methods: {
        getContract(params) {
            this.$u.api.Mycontract(params).then((res) => {
                if (res.code == 200) {
                    if (res.data) {
                        let length = res.data.length;
                        for (let i = 0; i < length; i++) {
                            var re = /[^\u4e00-\u9fa5]/gi;
                            // res.data.name = res.data.name.replace(re, "");
                            let data = new Date(
                                Number(res.data[i].create_at) * 1000
                            );
                            res.data[i].create_at = moment(data).format(
                                "yyyy.MM.DD HH:mm:ss"
                            );
                            res.data[i].name = res.data[i].name.replace(re, "");
                        }
                        this.res = this.res.concat(res.data);
                    }
                } else {
                    //接口请求失败的处理
                    uni.showToast({
                        title: res.message,
                        icon: "none",
                    });
                }
            });
        },
        goBaidu(a) {
            getApp().track("mine_lookContract", {url: a})
            getApp().globalData.contractUrl = a;
            wx.navigateTo({
                url: "./out",
                success: function () {}, //成功回调
                fail: function () {},
                complete: function () {},
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.contract {
    width: 100%;
    height: 100vh;
    background: #f4f5f7;
}
.content {
    width: 100%;
    height: 100%;
    padding: 40rpx 30rpx 0 30rpx;
}
.title {
    width: 65px;
    height: 16px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 16px;
}
.jf-currency-class {
    width: 100%;
    min-height: 180rpx;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-top: 80rpx;
    background: #ffffff;
    position: relative;
    .left {
        width: 160rpx;
        height: 200rpx;
        padding: 30rpx 14rpx 0 14rpx;
        position: absolute;
        bottom: 30rpx;
        left: 30rpx;
        background: url(@/static/photo/hetong.png);
        border-radius: 6px;
        color: #ffffff;
        font-size: 26rpx;
        line-height: 38rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
    }
    .text1 {
        font-size: 32rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #2272ff;
        margin-left: 208rpx;
    }
    .text2 {
        font-size: 24rpx;
        color: #999999;
        margin-left: 220rpx;
        margin-top: 22rpx;
    }
}
.current-img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.no-contract {
	color: #999999;
	text-align: center;
	margin-top: 240rpx;
	font-weight: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.no-contract-image {
		width: 374rpx;
		height: 254rpx;
		margin-bottom: 50rpx;
	}
}
</style>