<template>
   <div class="myHire">
       <div class="addApply">
           <div class="applyBtn" @click="addTzsq">
           +新增申请
           </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)">
           <div class="myHireTit">
               <div class="myHireItemRow" style="color: #333333">
                   <div class="myHireItemRowName">退租单号：</div>
                   <div>
                       {{item.no}}
                   </div>
               </div>
               <div class="myHireTitRight">
                   <div class="sxz">{{ item.status }}</div>
<!--                   <div class="drz">-->
<!--                       {{item.settleInStatus==1?'待入驻':item.settleInStatus==2?'待入驻(筹备期)':item.settleInStatus==3?'已入驻':item.settleInStatus==4?'已入驻(筹备期)':item.settleInStatus==5?'待清退':item.settleInStatus==6?'已清退':''}}-->
<!--                   </div>-->
               </div>
           </div>
           <div class="myHireItemRow">
               <div class="myHireItemRowName">申请退租房间：</div>
               <div>
                   {{item.address}}
               </div>
           </div>
           <div class="myHireItemRow">
               <div class="myHireItemRowName">申请退房日期：</div>
               <div>
                  {{item.checkOutApplyDate}}
               </div>
           </div>
           <div class="myHireItemRow">
               <div class="myHireItemRowName">申请时间：</div>
               <div class="place">
                   {{ item.enterpriseSubmitDate }}
               </div>
           </div>
           <div class="line"></div>
           <div class="lastBtn">
               <button @click.stop="dele(item)">删除</button>
           </div>
       </div>
           </van-list>
       </van-pull-refresh>
   </div>
</template>

<script>
import { listAllOut, remove } from '@/service/api_settle_out'
import { Toast } from 'vant'
import auth from '@/service/auth'
export default {
    name: 'MyHire',
    data() {
        return {
            myHireList: [
                // { btnType: '入驻申请' },
                // { btnType: '退租申请' }
            ],
            pages: {
                pageNum: '1',
                pageSize: '10',
                enterpriseId: auth.currUser().id
            },
            isUpLoading: false,
            isDownLoading: false,
            upFinished: false,
            total: 0,
            isRef: false
        }
    },
    mounted() {
        this.getHireList()
    },
    methods: {
        getHireList() {
            listAllOut(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: '/tzsq', query: { editMsg: JSON.stringify(item) }})
        },
        addTzsq() {
            this.$router.push('/addTzsq')
        },
        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()
        },
        dele(item) {
            console.log(item)
            remove({ id: item.id }).then(res => {
                if (res.code == 200) {
                    Toast('删除成功')
                    this.onDownRefresh()
                } else {
                    Toast(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss">
   .myHire{
       margin: 4vw;
       .addApply{
           display: flex;
           justify-content: flex-end;
           color: white;
           font-size: 4vw;
           .applyBtn{
               background: #1D18BC;
               padding:2vw 3vw ;
               border-radius: 1.5vw;
           }
           margin: 2vw 0;
       }
       .myHireItem{
           background: white;
           padding: 4vw;
           font-size:4vw;
           border-radius: 10px;
           margin: 3vw 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: 1.5vw;
               }
           }
           .myHireItemRowName{
               width: 30vw;
           }
           .place{
               width: 50vw;
               text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
               white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */
               overflow: hidden; /*超出部分隐藏*/
           }
       }
   }
</style>
