 <template>
     <div class="home_wrapper">
         <div class="header_main">
             合同信息
             <div class="return_btn" @click="onClickLeft"></div>
             <div class="add_btn" @click="goAdd"></div>
         </div>
         <div class="search_info">
            <div class="search_block">
                <i class="icon"></i>
                <input type="text" class="ipt" placeholder="搜索" v-model="queryParams.name" @input="getSearchList">
            </div>
            <div class="total">共{{listLength}}个合同</div>
         </div>
         <div class="list_main">
           <van-list
             v-model="loading"
             :finished="finished"
             finished-text="没有更多了"
             @load="getList"
           >
             <!--1-->
             <van-swipe-cell right-width="150" class="item" v-for="(item,index) in applicationList" :key="index">
                <div class="item_box" @click="$router.push({name:'sunVillageInfoInformationDetail',query:{id:item.id}})">
                  <div class="head_block">
                      <i class="icon"></i>
                      <div class="title">{{item.name}}</div>
                  </div>
                  <div class="order_block">
                      <div class="order">{{item.code}}</div>
                      <div :class="{'describe':true,'suspend':item.contractionStatus == '撤销','normal':item.contractionStatus == '正常','undo':item.contractionStatus == '终止'}">{{item.contractionStatus}}<i class="icon"></i></div>
                  </div>
                  <div class="function_block">
                     <div class="value">合同金额<span class="amount">￥{{item.totalAmount}}</span></div>
                     <div class="startStop_time">
                        <div class="time"><div class="unim start">起</div>{{item.startTime}}</div>
                        <div class="time"><div class="unim stop">止</div>{{item.endTime}}</div>
                     </div>
                  </div>
                </div>
               <template #right>
                 <div @click="handleDelete(item,index)" style="background-color: #ee0a24;height: 100%">删除</div>
                 <router-link :to="{name:'sunVillageInfoInformationEdit',query:{id:item.id}}" style="background-color: #07c160">修改</router-link>
                 <div @click="openLoader(item.id,0)" style="background-color: rgba(98,173,102,0.2);color: #62AD66;">附件</div>
                 <router-link :to="{name:'sunVillageInfoInformationFunPlan',query:{id:item.id}}" style="background-color: #4169E1;">结款</router-link>
               </template>
             </van-swipe-cell>
           </van-list>

         </div>
<!--         <div class="bottom_tips">-->
<!--            <span class="xs">已经到底啦</span>-->
<!--        </div>-->
       <van-popup v-model="show" lock-scroll closeable position="top" :style="{ height: '30%' }" >
         <div style="padding: 0 13% 0 5%;">
           <van-divider>附件</van-divider>
           <van-uploader v-model="fileList" :after-read="afterRead" @delete="deleteFile1" multiple />
         </div>
       </van-popup>
    </div>
</template>

<script>
 import { contractionList , delInfo , commonAttach , attachmentList , systemAttachment } from "@/api/sunVillage_info/fixedAssets";
 import request from '@/utils/request'
 export default {
   name: "certificateList",
   data() {
     return {
       applicationList:[],
       applicationListSecond:[],
       assetStatusOptions:[],
       auditStatus:[],
       loading: false,
       finished: false,
       show: false,
       fileList:[],
       listLength:'0',
       searchInput:'',
       queryParams:{
         pageNum:1,
         pageSize:10,
         orderByColumn:'createTime',
         isAsc:'desc',
         name:'',
       },
       uploadFiles1:[],
       projectId:'',
       projectIndex:''
     };
   },
   created() {
     this.houseGetDicts("contraction_status").then((response) => {
       this.contractionStatusOptions = response.data;
     });
   },
   methods: {
     getList(){
       setTimeout(() => {
         contractionList(this.queryParams).then(response => {
           this.listLength = response.total;
           for (var i = 0; i < response.rows.length; i++) {
             response.rows[i].contractionStatus = this.selectDictLabel(this.contractionStatusOptions, response.rows[i].contractionStatus);
             response.rows[i].totalAmount = Number(response.rows[i].totalAmount ).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }).replace(/\.$/, "")
             this.applicationList.push(response.rows[i]);
             this.applicationListSecond.push(response.rows[i]);
           }
           if(this.applicationList.length >= response.total){
             this.finished = true;
             return;
           }else{
             this.loading = false;
             this.queryParams.pageNum += 1 ;
           }
         });
       }, 1000);
     },
     getSearchList(){
       this.applicationList = [];
       this.queryParams.pageNum = 1;
       this.getList();
     },
     afterRead(file) {
       // 此时可以自行将文件上传至服务器
       this.uploadFiles1.push(file.file);
         let params1 = new FormData();
         params1.append("tableId", this.projectId);
         params1.append("tableName", "t_contraction_info");
         params1.append("bizPath", "contraction");
         params1.append("fileType", this.projectIndex);
         params1.append("file", file.file);
         commonAttach(params1).then((r1) => {
           this.$notify({ type: 'success', message: '上传成功' });
         })
     },
     openLoader(id,index){
       this.show = true;
       this.projectId = id;
       this.projectIndex = index;
       this.fileList = [];
       let oData1= {
         tableId: id,
         tableName: "t_contraction_info",
         bizPath: "contraction",
         fileType: '',
       }
       attachmentList(oData1).then(res => {
         res.rows.map(r => {
           let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
           this.fileList.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id})
         })
       })
     },
     /** 删除按钮操作 */
     handleDelete(row,index) {

       const ids = row.id || this.ids;

       this.$dialog.alert(
         {
           message:'是否确认删除合同信息?',
           title:"警告",
           showCancelButton:true,
           confirmButtonText: "确定",
           cancelButtonText: "取消",
         }
       )
         .then(function () {
           return delInfo(ids);
         })
         .then(() => {
           this.applicationList.splice(index, 1);
           this.$notify({ type: 'success', message: '删除成功' });
         });
     },
     deleteFile1(file){
       console.log(file)
       systemAttachment(file.id).then(res => {
         this.$notify({ type: 'success', message: '删除成功' });
       })
     },
     goAdd(){
       this.$router.push('/sunVillage_info/informationAdd')
     },
   },
 }
</script>

<style scoped lang="scss">
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }

        .add_btn {
            width: 56.4px;
            height: 40.8px;
            background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
    .search_info{
        padding:20px 23px;
        display: flex;
        .search_block{
        height: 59px;
        width: 535px;
        border-radius: 59px;
        background: #fff;
        display: flex;
        border:2px solid #3494ff;
        padding-right: 35px;
        align-items: center;
        .icon{
            width: 30px;
            height: 30px;
            background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
            background-size: 100% 100%;
            display: block;
            margin:0 8px 0 26px;
        }
        .ipt{
        flex: 1;
        font-size: 26px;
        background: none;
        border:0 none;
        line-height: 59px;
        }
        }
        .total{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #858585;
        }
    }
    .list_main{
        padding:0 22px;
        .item{
            height: 207px;
            border-radius: 30px;
            background: #fff;
            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
            margin-bottom: 20px;
            .item_box{
              padding:25px 32px;
            }
            .head_block{
                height: 56px;
                display: flex;
                align-items: center;
                width: 100%;
                 .icon{
                    width: 34px;
                    height: 30px;
                    background: url('../../assets/images/sunVillage_info/fixedAssets_icon_2.png') no-repeat;
                    background-size: 100% 100%;
                    display: block;
                    margin-right: 12px;
                }
                .title{
                    flex:1;
                    font-size: 32px;
                    color: #252525;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-right: 20px;

                }
            }
            .order_block{
                height: 50px;
                display: flex;
                align-items: center;
                width: 100%;
                .order{
                    flex: 1;
                    font-size: 26px;
                    color: #252525;
                }
                .describe{
                    font-size: 26px;
                    display: flex;
                    align-items: center;
                    &.suspend{
                        color: #f69600;
                        .icon{
                            width: 27px;
                            height: 26px;
                            background: url('../../assets/images/sunVillage_info/information_icon_1.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                            margin-left: 15px;
                        }
                    }
                    &.normal{
                        color: #69c100;
                        .icon{
                            width: 32px;
                            height: 26px;
                            background: url('../../assets/images/sunVillage_info/information_icon_2.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                            margin-left: 15px;
                        }
                    }
                    &.undo{
                        color: #858585;
                        .icon{
                            width: 27px;
                            height: 26px;
                            background: url('../../assets/images/sunVillage_info/information_icon_3.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                            margin-left: 15px;
                        }
                    }


                }
            }
            .function_block{
                height: 50px;
                display: flex;
                align-items: center;
                width: 100%;
                .value{
                    flex: 1;
                    font-size: 24px;
                    color: #252525;
                    .amount{
                        color: #eb1616;
                    }
                }
                .startStop_time{
                    display: flex;
                    align-items: center;
                    .time{
                        display: flex;
                        align-items: center;
                        font-size: 24px;
                        color: #002022;
                        margin-left: 25px;
                        .unim{
                            width: 32px;
                            height: 32px;
                            font-size: 22px;
                            color: #fff;
                            text-align: center;
                            line-height: 32px;
                            border-radius: 6px;
                            margin-right: 8px;
                            &.start{background: #3e7df2;}
                            &.stop{background: #eb1616;}
                        }
                    }
                }
            }


        //    <div class="function_block">
        //              <div class="value">合同金额<span class="amount">￥199.00</span></div>
        //              <div class="startStop_time">
        //                 <div class="time"><div class="unim">起</div>2022.05.04</div>
        //                 <div class="time"><div class="unim">起</div>2022.05.04</div>
        //              </div>
        //          </div>


        }
    }
    .bottom_tips{
        font-size: 24px;
         color: #a7a6a6;
         text-align: center;
         margin-top: 32px;
         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
         background-size: 260px 2px;
         .xs{
            padding:0 8px;
            background: #e9e9e9;
         }
    }
    /deep/ .van-swipe-cell__right{
      display: flex;
      align-items: center;
      width: 150PX;
      margin-left: 5PX;
      a,div{
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 14PX;
        height: 100%;
        flex: 1;
      }
    }
}
</style>
