<template>
    <div class="myHire">
        <van-pull-refresh
            v-model="isDownLoading"
            @refresh="onDownRefresh"
            success-text="加载成功"
        >
            <van-list
                ref="vanList"
                v-model="isUpLoading"
                :finished="upFinished"
                :immediate-check="false"
                :offset="10"
                finished-text="加载完成"
                @load="onLoadList"
                v-if="isRef"
            >
                <div class="myHireItem" v-for="item in myHireList" @click="toDetail(item)">
                    <img :src="item.entryForm?yscJb:dscJb" class="jiaobiao">
                    <div class="myHireItemRow myHireTit" style="color: #333333">
                        <div>入驻单号：</div>
                        <div>

                        </div>
                    </div>
                    <div class="myHireItemRow">
                        <div class="myHireItemRowName">合同编号：</div>
                        <div>
                            {{item.contractNo}}
                        </div>
                    </div>
                    <div class="myHireItemRow">
                        <div class="myHireItemRowName">合同起止日期：</div>
                        <div>
                            {{item.startDate}}——{{item.endDate}}
                        </div>
                    </div>
                    <div class="myHireItemRow">
                        <div class="myHireItemRowName">租赁地点：</div>
                        <div class="place">
                            {{item.leaseAddress}}
                        </div>
                    </div>
         <!--<div class="line"></div>-->
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { listAll } from '@/service/api_settle_in'
import { Toast } from 'vant'
import { upload } from '@/service/api_upload'
import auth from '@/service/auth'
export default {
    name: 'MyHire',
    data() {
        return {
            myHireList: [
                // { btnType: '入驻申请' },
                // { btnType: '退租申请' }
            ],
            pages: {
                pageNum: '1',
                pageSize: '10',
                // status: '已办结',
                enterpriseId: auth.currUser().id
            },
            isUpLoading: false,
            isDownLoading: false,
            upFinished: false,
            total: 0,
            yscJb: require('../../assets/image/yscJb.png'),
            dscJb: require('../../assets/image/dscJb.png'),
            isRef: false
        }
    },
    mounted() {
        this.getHireList()
        console.log(auth.currUser())
    },
    methods: {
        getHireList() {
            listAll(this.pages).then(res => {
                // console.log(res)
                // this.myHireList = res.rows
                if (res.rows.length) {
                    this.isDownLoading = false
                    this.myHireList.push(...res.rows)
                    this.isUpLoading = false
                    if (this.myHireList.length >= res.total) {
                        this.upFinished = true
                    }
                } else if (res.errno == 426) {
                    Toast(res.errmsg)
                    this.$router.push('/login')
                } else {
                    this.dataList = []
                    this.isDownLoading = false
                    this.isUpLoading = false
                    this.upFinished = true
                }
                this.isRef = true
            })
        },
        toDetail(item) {
            this.$router.push({ path: '/rzsq', query: { editMsg: JSON.stringify(item) }})
        },
        onDownRefresh: function() {
            this.myHireList = []
            this.pages.pageNum = 1
            this.isUpLoading = true
            this.upFinished = false
            this.getHireList()
        },
        onLoadList() {
            this.pages.pageNum++
            this.isDownLoading = true
            this.getHireList()
        }
    }
}
</script>

<style lang="scss">
.myHire{
    margin: 4vw;
    .myHireItem{
        background: white;
        padding: 4vw;
        font-size:4vw;
        border-radius: 10px;
        margin: 3vw 0;
        position: relative;
        .jiaobiao{
            position: absolute;
            width: 22vw;
            right: 0;
            top: 0;
        }
        .myHireTit{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .myHireTitRight{
                display: flex;
                .sxz{
                    background: rgba(29, 24, 188, 0.05);
                    padding: 1vw 2vw;
                    border-radius: 5px;
                    color: rgba(29, 24, 188, 1);
                    margin-right: 2vw;
                    font-size: 3.8vw;
                }
                .drz{
                    background:rgba(0, 128, 0, 0.05);
                    padding: 1vw 2vw;
                    border-radius: 5px;
                    color: rgba(0, 128, 0, 1);
                    font-size: 3.8vw;
                }
            }
        }
        .myHireItemRow{
            display: flex;
            margin: 2vw 0;
            font-size: 3.8vw;
            color:rgba(119, 119, 119, 1) ;
        }
        .lastBtn{
            display: flex;
            justify-content: flex-end;
            margin: 2vw 0 0 0;
            color: white;
            button{
                background: rgba(29, 24, 188, 1);
                font-size: 3.6vw;
                padding: 2vw 3vw;
                border-radius: 5px;
            }
        }
        .myHireItemRowName{
            width: 30vw;
        }
        .place{
            width: 50vw;
            word-break:break-all;
            display:-webkit-box;
            -webkit-line-clamp:2; //这里写的数字是几就是超过几行剩余的显示省略号
            -webkit-box-orient:vertical;
            overflow:hidden;
            line-height: 5vw;

        }
    }
}
</style>
