<template>
  <div class="fee" v-loading="load">
    <div class="fee-tab">
      <div class="item-tab" :class="{'on-tab':ontab == 0}" @click="tabChange(0)">待结算</div>
      <div class="item-tab" :class="{'on-tab':ontab == 1}" @click="tabChange(1)">已结算</div>
    </div>
    <div class="fee-main">
      <div class="fee-box" :class="{'onShow':ontab == 0}">
        <module-view :propConfig="config" ref="willSettle" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" 
        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
      </div>
      <div class="fee-box" :class="{'onShow':ontab == 1}">
        <module-view :propConfig="config" ref="Settled" @pagination="pagination" @onRefresh="getSettledList" @resert="queryList" @search="queryList" 
        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
      </div>
    </div>
    <el-drawer
      :with-header="false"
      :visible.sync="drawer"
      :direction="direction"
      size="35%"
    >
      <div class="top">
        <div class="name">选中单据（<span>{{checkCount}}单</span>）</div>
        <div class="btn-group">
          <div class="pay-btn">立即支付</div>
          <div class="back" @click="drawer = false">返回</div>
        </div>
      </div>
      <div class="top-space"></div>
      <div class="pay-bill">
        <div class="pay-item" v-for="(item,index) of payData" :key="index" @click="checkHandle(index)">
          <div class="amount">
            金额<span>￥{{item.amount}}</span>
          </div>
          <div class="pay-info">时间：{{item.time}}</div>
          <div class="pay-info">单号：{{item.code}}</div>
          <div class="pay-info">服务方：{{item.servicer}}</div>
          <div class="pay-info">服务类型：{{item.type}}</div>
          <div class="check" :class="{'showCheck':item.check}">
            <i class="el-icon-check"></i>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({components:{}})
export default class DbFee extends Vue {
  load=false
  drawer=false
  direction= 'rtl'
  ontab=0
  checkCount=0
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'small'
      },
      columns:[
        [{
          span:6,
          label:'结算单号',
          prop:'code',
          component:'by-input',
          compConfig:{
            attr:{
              placeholder:'请输入',
              clearable:true
            }
          }
        },{
          span:6,
          label:'业务类型',
          prop:'type',
          component:'by-select',
          compConfig:{
            attr:{
              clearable:true,
              data:[{
                label:'freemarker',
                value:'freemarker'
              },{
                label:'thymeleaf',
                value:'thymeleaf'
              }]
            }
          }
        },{
          span:6,
          label:'时间',
          prop:'createTime',
          component:'by-date-picker',
          compConfig:{
            attr:{
              clearable:true,
              format:'yyyy-MM-dd HH:mm:ss',
              type:'datetimerange'
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        // checkbox:true
      },
      columns:[{
        title:'结算单号',
        // isDetail:true,
        field:'code'
      },{
        title:'付款公司',
        field:'payCompany',
        width:130,
      },{
        title:'收款公司',
        field:'receiveCompany',
        width:130
      },{
        title:'结算金额',
        field:'settleMoney',
        width:100
      },{
        title:'手续费',
        field:'commission',
        width:100
      },{
        title:'业务类型',
        field:'type',
        width:140
      },{
        title:'状态',
        field:'state',
        width:100
      },{
        title:'创建时间',
        field:'createTime',
        width:140
      },{
        title:'操作',
        action:true,
        width:130,
        plugins:[{
          name:'立即支付',
          event:{
            show:(item:any) => {
              // console.log(item);
              return item.state == '待结算'
            },
            click:(item:any) => {
              
            }
          }
        },{
          name:'明细',
          event:{
            click:(item:any) => {
              this.showDetail()
            }
          }
        }]
      }]
    },
  }
  page:any={
    pageNo: 1,
    pageSize:20,
    total:2
  }
  payData:Array<any>=[{
    amount:'10.00',
    time:'2023-08-10 12:45:33',
    code:1,
    servicer:'桂品堂',
    type:'短驳结算'
  },{
    amount:'5.50',
    time:'2023-08-10 12:45:33',
    code:1,
    servicer:'桂品堂',
    type:'短驳结算'
  },{
    amount:'205.50',
    time:'2023-08-16 12:52:30',
    code:3,
    servicer:'桂品堂',
    type:'短驳结算'
  }]
  tabChange(v:number){
    this.ontab = v
  }
  showDetail() {
    this.drawer = true
  }
  checkHandle(index:number){
    this.payData[index].check = !this.payData[index].check
    let n = 0;
    for(const item of this.payData){
      if(item.check){
        n++
      }
    }
    this.checkCount = n;
    this.$forceUpdate()
  }
  pagination(){}
  getList(){
    let data:Array<any>=[{
      code:1,
      payCompany:'桂品堂',
      receiveCompany: '龙翔物流',
      settleMoney:32000,
      commission:50,
      type:'短驳费用',
      state:'已结算',
      createTime:'2023-08-10 10:30:26'
    },{
      code:2,
      payCompany:'桂品堂',
      receiveCompany: '龙翔物流',
      settleMoney:60000,
      commission:420,
      type:'短驳费用',
      state:'已结算',
      createTime: '2023-08-12 11:21:25'
    }];
    (this.$refs.Settled as any).setTableValue(data);
    (this.$refs.Settled as any).setPage(this.page)
  }
  getSettledList(){
    let data:Array<any>=[{
      code:1,
      payCompany:'桂品堂',
      receiveCompany: '龙翔物流',
      settleMoney:50000,
      commission:100,
      type:'短驳费用',
      state:'待结算',
      createTime:'2023-08-25 12:36:22'
    },{
      code:2,
      payCompany:'桂品堂',
      receiveCompany: '龙翔物流',
      settleMoney:100000,
      commission:1000,
      type:'短驳费用',
      state:'待结算',
      createTime: '2023-08-27 20:20:15'
    }];
    (this.$refs.willSettle as any).setTableValue(data);
    (this.$refs.willSettle as any).setPage(this.page)
  }
  queryList(){}
  modalHandle(){}
  clickHandle(){}
  detail(){}
  mounted(){
    this.load = true
    setTimeout(()=>{
      this.load = false
      this.getList()
      this.getSettledList()
    },1500)
    
  }
}
</script>

<style lang="scss" scoped>
.fee{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .fee-tab{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 14px;
    box-sizing: border-box;
    padding: 16px 16px 0;
    .item-tab{
      padding-bottom: 8px;
      margin-right: 32px;
      border-bottom: solid 3px #FFF;
      cursor: pointer;
    }
    .on-tab{
      border-bottom: solid 3px #1684FC;
      color: #1684FC;
    }
  }
  .fee-main{
    width: 100%;
    height: calc(100% - 50px);
    .fee-box{
      width: 100%;
      height: 100%;
      display: none;
    }
    .onShow{
      display: block;
    }
  }
}
.top{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #FFF;
  .name{
    font-size: 14px;
    span{
      color: #fc8516;
    }
  }
  .btn-group{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pay-btn{
      width: 120px;
      height: 36px;
      line-height: 36px;
      border-radius: 8px;
      box-sizing: border-box;
      background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 1);
      margin-right: 16px;
      cursor: pointer;;
    }
    .back{
      cursor: pointer;
      width: 110px;
      height: 36px;
      box-sizing: border-box;
      line-height: 36px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(22, 132, 252, 1);
      font-size: 14px;
      text-align: center;
      border: 1px solid rgba(22, 132, 252, 1);
    }
  }
}
.top-space{
  height: 60px;
}
.pay-bill{
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  .pay-item{
    width: 44%;
    box-sizing: border-box;
    padding: 16px;
    margin-left: 4%;
    border:solid 1px #CCC;
    margin-bottom: 16px;
    cursor: pointer;
    position: relative;
    .check{
      height: 24px;
      width: 24px;
      background-color: #1684FC;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 5px;
      right: 5px;
      border-radius: 50%;
      visibility: hidden;
      i.el-icon-check{
        color: #FFF;
        font-size: 16px;
        font-weight: 700;
      }
    }
    .showCheck{
      visibility: visible;
    }
    .amount{
      font-size: 20px;
      >span{
        color: #F00;
      }
    }
    .pay-info{
      font-size: 14px;
      color: #999;
      padding-top: 4px;
    }
  }
  .pay-item:hover{
    border-color: #1684FC;
    .check{
      visibility: visible;
    }
  }
}
</style>
