<template>
    <div class="myHire">
        <div class="billTitBox">
            <div
                v-for="(item,index) in billType"
                 :key="index"
                 :class="selectTile===index?'billTitItemSelect':'billTitItem'"
                @click="titleClick(item,index)"
            >
                {{item.label}}
            </div>
            <div
                class="billTitItem"
            >
                预充值电费
            </div>
        </div>
        <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.collectIsSuccess==2&&item.collectIsNeed==1?
                    bfsk:item.collectIsSuccess==0&&item.collectIsNeed==1?
                    wsk:item.collectIsSuccess==1&&item.collectIsNeed==1?
                    qbsk:hz"
                    class="jiaobiao">
                    <div class="myHireItemRow" style="color: #333333">
                        <div class="myHireItemRowName">账单名称：</div>
                        <div>
                            {{item.billName}}
                        </div>
                    </div>
                    <div class="myHireItemRow">
                        <div class="myHireItemRowName">应缴金额：</div>
                        <div>
                            {{item.billRealTotalMoney}}
                        </div>
                    </div>
                    <div class="myHireItemRow">
                        <div class="myHireItemRowName">账单到期日：</div>
                        <div>
                         {{item.expirationDate}}
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { findBillManagementMoreForCollect } from '@/service/api_bill'
import { Toast } from 'vant'
import { getByCodes } from '@/service/api_settle_out'
import auth from '@/service/auth'
export default {
    name: 'MyHire',
    data() {
        return {
            myHireList: [
                // { btnType: '入驻申请' },
                // { btnType: '退租申请' }
            ],
            pages: {
                pageNum: '1',
                pageSize: '10',
                billCompanyId: auth.currUser().id,
                billType: '1',
                invoiceStatus: '1,3,4'
            },
            billTitList: [
                { name: '租赁费' },
                { name: '物业费' },
                { name: '水费' },
                { name: '公摊电费' },
                { name: '预充值电费' }

            ],
            selectTile: 0,
            isUpLoading: false,
            isDownLoading: false,
            upFinished: false,
            total: 0,
            bfsk: require('../../assets/image/bfsk.png'),
            wsk: require('../../assets/image/wsk.png'),
            qbsk: require('../../assets/image/qbsk.png'),
            hz: require('../../assets/image/hz.png'),
            isRef: false,
            skztList: [],
            billType: []
        }
    },
    mounted() {
        this.getHireList()
        this.getSkzt()
    },
    methods: {
        getSkzt() {
            getByCodes({ codes: JSON.stringify(['COLLECT_IS_SUCCESS', 'BILL_TYPE']) }).then(res => {
                this.skztList = JSON.parse(res.COLLECT_IS_SUCCESS.dictValue)
                this.billType = JSON.parse(res.BILL_TYPE.dictValue)
                console.log(this.billType)
            })
        },
        titleClick(item, index) {
            this.selectTile = index
            this.pages.billType = item.value
            this.onDownRefresh()
        },
        getHireList() {
            findBillManagementMoreForCollect(this.pages).then(res => {
                // console.log(res)
                // this.myHireList = res.rows
                const dayjs = require('dayjs')
                if (res.rows.length) {
                    this.isDownLoading = false
                    this.myHireList.push(...res.rows)
                    this.isUpLoading = false
                    if (this.myHireList.length >= res.total) {
                        this.upFinished = true
                    }
                    // this.myHireList.forEach(e => {
                    //     e.collectIsSuccessName = this.skztList.find(f => {
                    //
                    //     })
                    // })
                    this.isRef = true
                    this.myHireList.forEach(e => {
                        e.expirationDate = dayjs(e.expirationDate).format('YYYY-MM-DD')
                    })
                } else if (res.errno == 426) {
                    Toast(res.errmsg)
                    this.$router.push('/login')
                } else {
                    this.dataList = []
                    this.isDownLoading = false
                    this.isUpLoading = false
                    this.upFinished = true
                }
            })
        },

        toDetail(item) {
            this.$router.push({ path: '/billDetail', query: { info: 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;
    .billTitBox{
        display: flex;
        background: white;
        justify-content: space-around;
        margin: -4vw -4vw 2vw -4vw;
        font-size: 3.9vw;
        color: #777777;
       .billTitItemSelect{
          border-bottom: 5px solid #1D18BC;
          padding: 5vw 0;
           color: #1D18BC;
       }
        .billTitItem{
            padding: 5vw 0;
        }
    }
    .myHireItem{
        background: white;
        padding: 4vw;
        font-size:4vw;
        border-radius: 10px;
        margin: 3vw 0;
        position: relative;
        .jiaobiao{
            position: absolute;
            width: 20vw;
            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>
