<template>
  <view class="main">
    <div class="headerTop" >
      <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
        <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
        <div class="timeSelect">
          <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>
          <picker mode="date" fields="month" :value="searchText"  :end="lastDay" @change="handleChangeTime" >
            <view class="time">
              <view class="text">{{ searchText }}</view>
              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
            </view>
          </picker>
        </div>
      </div>

      <div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleGoSelectService" v-if="false">
        <div class="selectService" >
          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
          <view class="select">
            <view class="content">
              <view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
              <p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
              <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
            </view>
          </view>
        </div>
      </div>
    </div>
    <view class="pageContent" style="width: 100%;height: calc(100vh - 330rpx);overflow-y: scroll">
      <view class="tabBox" v-if="showTab">
        <view :class="selectTab===1?'tab selectTab':'tab'" @click="handleChangeSelectTab(1)">驿达应收</view>
        <view :class="selectTab===2?'tab selectTab':'tab'" @click="handleChangeSelectTab(2)">商家欠款</view>
      </view>
      <view class="descBox">
        <view class="smallBox">
          <view class="leftBox">
            <span class="descLabel">排序字段：</span>
            <picker mode="selector" :value="searchField" :range="fieldList" range-key="label" @change="handleChangeField">
              {{fieldList[searchField].label}}
            </picker>
          </view>
           <view class="rightBox" @click="handleChangeDesc">
             <span class="descText">{{ descType==='ascend'?'升序':'降序' }}</span>
             <image class="descIcon" :src="descType==='ascend'?'/static/images/project/ascend.svg':'/static/images/project/descend.svg'"/>
           </view>
        </view>
      </view>
      <view class="listBox" >
        <view v-if="showList && showList.length>0">
          <div class="listItem" v-for="(item,index) in showList" :key="index" @click="handleNoneChild(item)">
            <div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
              <div class="itemTop">
                <div class="itemLeft">
                  <div style="display: flex;align-items: center">
                    <img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
                    <span class="serverName">{{selectTab===1?item.SPREGIONTYPE_NAME?item.SPREGIONTYPE_NAME.split('管理中心')[0]:'':item.MERCHANTS_NAME}}</span>
                  </div>
                </div>
                <img class="itemRight" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
              </div>
              <div class="itemDetail">
                <div class="message">
                  <span class="value">{{ $util.fmoney(selectTab===1?(item.ROYALTY_PRICE || 0):(item.SUBROYALTY_PRICE || 0),2)}}</span>
                  <span class="label">{{ selectTab===1?'驿达到账':'商家到账' }}</span>
                </div>
                <div class="message">
                  <span class="value">{{ $util.fmoney(selectTab===1?(item.ROYALTYDAILY_THEORY || 0):(item.SUBROYALTYDAILY_THEORY || 0),2) }}</span>
                  <span class="label">{{ selectTab===1?'驿达入账':'商家入账' }}</span>
                </div>
                <div class="message">
                  <span class="value">{{ selectTab===1?$util.fmoney(((item.ROYALTY_PRICE || 0) - (item.ROYALTYDAILY_THEORY || 0)),2):
                      $util.fmoney(((item.SUBROYALTY_PRICE || 0) - (item.SUBROYALTYDAILY_THEORY || 0)),2)}}</span>
                  <span class="label">{{ selectTab===1?'驿达差额':'商家应缴' }}</span>
                </div>
              </div>
            </div>

            <div class="childList" v-if="item.showChild && item.children && item.children.length>0">
              <div class="childItem" @click.stop="handleShowSecondChildren(item,subItem,subIndex)" v-for="(subItem,subIndex) in item.children" :key="subIndex">
                <div class="secondItemBox" :style="{borderBottom:subItem.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
                  <div class="childTop">
                    <div class="topLeft">
                      <div class="imgBox">
                        <image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/mapIcon.svg"/>
                      </div>
                      <span class="serviceName">{{subItem.SERVERPART_NAME}}</span>
                    </div>
                    <image class="topRight" :style="{transform:subItem.showChild?'rotate(90deg)':''}" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
                  </div>
                  <div class="childDetailBox">
                    <div class="message">
                      <span class="value">{{ $util.fmoney(selectTab===1?(subItem.ROYALTY_PRICE || 0):(subItem.SUBROYALTY_PRICE || 0),2)}}</span>
                      <span class="label">{{ selectTab===1?'驿达到账':'商家到账' }}</span>
                    </div>
                    <div class="message">
                      <span class="value">{{ $util.fmoney(selectTab===1?(subItem.ROYALTYDAILY_THEORY || 0):(subItem.SUBROYALTYDAILY_THEORY || 0),2) }}</span>
                      <span class="label">{{ selectTab===1?'驿达入账':'商家入账' }}</span>
                    </div>
                    <div class="message">
                  <span class="value">{{ selectTab===1?$util.fmoney(((subItem.ROYALTY_PRICE || 0) - (subItem.ROYALTYDAILY_THEORY || 0)),2):
                      $util.fmoney(((subItem.SUBROYALTY_PRICE || 0) - (subItem.SUBROYALTYDAILY_THEORY || 0)),2)}}</span>
                      <span class="label">{{ selectTab===1?'驿达差额':'商家应缴' }}</span>
                    </div>
                  </div>
                </div>


                <div class="childDetailList" v-if="subItem.showChild && subItem.children && subItem.children.length>0">
                  <div class="thirdItem" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex" :style="{borderBottom:thirdIndex===subItem.children.length-1?'0 solid #EEEEEE':'2px solid #EEEEEE'}">
                    <div class="thirdItemTop">
                      <div class="itemBox">
                        <span class="label">经营单位:</span>
                        <span>{{selectTab===1?thirdItem.MERCHANTS_NAME:thirdItem.SERVERPARTSHOP_NAME}}</span>
                      </div>
                      <div class="itemBox" v-if="selectTab===1">
                        <span class="label">经营门店:</span>
                        <span>{{thirdItem.SERVERPARTSHOP_NAME}}</span>
                      </div>
                    </div>
                    <div class="thirdItemBottom">
                      <div class="bottomItem">
                        <span class="value">{{ $util.fmoney(selectTab===1?(thirdItem.ROYALTY_PRICE || 0):(thirdItem.SUBROYALTY_PRICE || 0),2)}}</span>
                        <span class="label">{{ selectTab===1?'驿达到账':'商家到账' }}</span>
                      </div>
                      <div class="bottomItem">
                        <span class="value">{{ $util.fmoney(selectTab===1?(thirdItem.ROYALTYDAILY_THEORY || 0):(thirdItem.SUBROYALTYDAILY_THEORY || 0),2) }}</span>
                        <span class="label">{{ selectTab===1?'驿达入账':'商家入账' }}</span>
                      </div>
                      <div class="bottomItem">
                      <span class="value">{{ selectTab===1?$util.fmoney(((thirdItem.ROYALTY_PRICE || 0) - (thirdItem.ROYALTYDAILY_THEORY || 0)),2):
                      $util.fmoney(((thirdItem.SUBROYALTY_PRICE || 0) - (thirdItem.SUBROYALTYDAILY_THEORY || 0)),2)}}</span>
                        <span class="label">{{ selectTab===1?'驿达差额':'商家应缴' }}</span>
                      </div>
                    </div>
                    <div class="thirdItemBottom">
                      <div class="bottomItem">
                        <span class="value">{{thirdItem.BUSINESS_TYPE===1000?'合作经营':thirdItem.BUSINESS_TYPE===2000?'固定租金':thirdItem.BUSINESS_TYPE===3000?'自营提成':thirdItem.BUSINESS_TYPE===4000?'业主自营':''}}</span>
                        <span class="label">经营模式</span>
                      </div>
                      <div class="bottomItem">
                        <span class="value">{{thirdItem.SETTLEMENT_MODES?settlement[thirdItem.SETTLEMENT_MODES]:'-'}}</span>
                        <span class="label">结算模式</span>
                      </div>
                      <div class="bottomItem">
                        <span class="value">{{thirdItem.COMPACT_TYPE?compactType[thirdItem.COMPACT_TYPE]:'-'}}</span>
                        <span class="label">合同类型</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


        </view>
        <view class="noDataBox" v-else>
          <NoData/>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/util/index.js'
import NoData from "./components/noData.vue";
import {getFieldEnum, wrapTreeNode} from "../../util/dateTime";

export default {
  components: {NoData},
  data() {
    return {
      searchText:'',// 搜索的时间
      menu:{}, //手机参数,
      lastDay:'',
      statusBarHeight:'',
      serviceInfo:{},// 当前服务区信息
      selectTab: 1,
      showList: [],// 显示的列表
      realList:[],// 请求到真实的列表
      otherData:{},// 接口返回的其他信息
      settlement:{},// 结算模式的枚举
      compactType:{},// 合同类型的枚举
      searchField:0,// 排序字段
      fieldList:[{label:'驿达到账',value:0},{label:'驿达入账',value:1},{label:'驿达差额',value:2}],
      descType:'ascend',// 排序状态
      showTab:true,// 是否显示选项卡
    }
  },
  onLoad(query){
    if (query.noShowTab==='true'){
      this.showTab = false
    }
    if (query.type){
      this.selectTab = Number(query.type)
    }
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    this.handleGetSETTLEMENT()
    this.handleGetCOMPACTTYPE()
  },
  onShow(){
    this.fieldList = this.selectTab===1?[{label:'驿达到账',value:0},{label:'驿达入账',value:1},{label:'驿达差额',value:2}]:[{label:'商家到账',value:0},{label:'商家入账',value:1},{label:'商家应缴',value:2}]
    let lastDay = uni.getStorageSync('lastDay')
    const date = new Date(lastDay)
    const y = date.getFullYear()
    let m = date.getMonth() + 1
    if (m<10){
      m = '0'+m
    }
    this.searchText = `${y}-${m}`
    this.lastDay = uni.getStorageSync('lastDay')
    this.serviceInfo = uni.getStorageSync('currentService')
    this.handleGetPageData()
  },
  methods:{
    handleChangeTime(e){
      const date = new Date(e.detail.value)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      if (m<10){
        m = '0'+m
      }
      this.searchText = `${y}-${m}`
      this.handleGetPageData()
    },
    async handleGetPageData(){
      // Finance/GetProjectSummary 是驿达应收
      // Finance/GetProjectMerchantSummary 是商家欠款
      uni.showLoading({
        title: '正在加载...'
      })
      const date = new Date(this.searchText)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      if (m<10){
        m = '0'+m
      }
      const req = {
        // StartDate: `${y}-${m}-01`,
        StartDate: this.lastDay,
        EndDate: this.lastDay,
        // ServerpartId:this.serviceInfo.Serverpart_ID,
        CompactType:'340001'
      }
      if (this.selectTab===1){
        const data = await request.$webGet('EShangApiMain/Finance/GetProjectSummary',req)
        this.showList = wrapTreeNode(data.Result_Data.List)
        this.otherData = data.Result_Data.OtherData
        uni.hideLoading()
        this.$forceUpdate()
      }else{
        const data = await request.$webGet('EShangApiMain/Finance/GetProjectMerchantSummary',req)
        let list = wrapTreeNode(data.Result_Data.List)
        // this.realList = list
        this.showList = list
        this.otherData = data.Result_Data.OtherData
        uni.hideLoading()
        this.$forceUpdate()
      }
    },
    // // 排序方法
    // handleDescList(list){
    //   let descList = JSON.parse(JSON.stringify(list))
    //   if (this.searchField===0){
    //     //按照到账排序
    //     if (this.descType === 'ascend'){
    //       for (let i=0;i<=descList.length-1;i++){
    //         for (let j=0;j<=descList.length - i - 1;j++){
    //           if (descList[j] && descList[j + 1] && descList[j].ROYALTY_PRICE && descList[j+1].ROYALTY_PRICE){
    //             if (descList[j].ROYALTY_PRICE < descList[j+1].ROYALTY_PRICE){
    //               let temp = descList[j]
    //               descList[j] = descList[j + 1]
    //               descList[j + 1] = temp
    //             }
    //           }
    //         }
    //       }
    //     }else{
    //
    //     }
    //   }
    // },
    //跳转到地图
    handleGoSelectService() {
      uni.navigateTo({
        url:`/pages/map/index?chartType=${true}&page=/pages/projectProfitSharing/index&serviceInfo=${JSON.stringify(this.serviceInfo)}`
      })
    },
    // 回退方法
    handleBack(){
      uni.navigateBack({
        delta: 1
      })
    },
    // 切换选项卡
    handleChangeSelectTab(num){
      this.selectTab = num
      this.handleGetPageData()
    },
    // 显示子集
    handleNoneChild(obj){
      this.showList.forEach(item=>{
        if (this.selectTab===1){
          if (item.SPREGIONTYPE_NAME === obj.SPREGIONTYPE_NAME){
            item.showChild = !item.showChild
          }
        }else{
          if (item.MERCHANTS_NAME === obj.MERCHANTS_NAME){
            item.showChild = !item.showChild
          }
        }

      })
      this.$forceUpdate()
    },
    // 显示第二层子集
    handleShowSecondChildren(obj,subObj,index){
      this.showList.forEach(item=>{
        if (item.SPREGIONTYPE_NAME === obj.SPREGIONTYPE_NAME){
          item.children.forEach((subItem,subIndex)=>{
            if (subItem.SPREGIONTYPE_NAME === subObj.SPREGIONTYPE_NAME && index ===subIndex){
              subItem.showChild = !subItem.showChild
            }
          })
        }
      })
      this.$forceUpdate()
    },
    // 拿到结算模式的枚举
    async handleGetSETTLEMENT(){
      const data = await getFieldEnum({ FieldExplainField: 'SETTLEMENT_MODES' });
      if (data && data.length>0){
        let obj = {}
        data.forEach(item=>{
          obj[item.value] = item.label
        })
        this.settlement = obj
      }
    },
    // 拿到合同类型的枚举
    async handleGetCOMPACTTYPE(){
      const data = await getFieldEnum({ FieldExplainField: 'COMPACT_CHARACTER' });
      if (data && data.length>0){
        let obj = {}
        data.forEach(item=>{
          obj[item.value] = item.label
        })
        this.compactType = obj
      }
    },
    // 改变排序状态
    handleChangeDesc(){
      if (this.descType==='ascend'){
        this.descType = 'descend'
      }else{
        this.descType = 'ascend'
      }
    },
    // 改变排序字段
    handleChangeField(e){
      this.searchField = Number(e.detail.value)
    }
  }
}
</script>
<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  height: 100%;
  .headerTop{
    width: 100%;
    height: 152px;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
    .header{
      position: absolute;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }
      .timeSelect{
        display: flex;
        align-items: center;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
            color: #fff;
          }
          .icon{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
    .picker{
      position: absolute;
      left: 16px;
      .selectService{
        display: flex;
        align-items: center;
        .img{
          width: 40px;
          height: 40px;
          z-index: 2;
        }
        .select{
          height: 32px;
          background: #F8F8FA;
          border-radius: 0 16px 16px 0;
          transform: translateX(-20px);
          box-sizing: border-box;
          padding-left: 25px;
          display: flex;
          align-items: center;
          .content{
            display: flex;
            align-items: center;
            .uni-input{
              padding: 0;
              background: transparent;
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
            }
            .area{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 40px;
              margin-left: 4px;
            }
            .rightArrow{
              width: 24px;
              height: 12px;
            }
          }

        }
      }
    }
  }
  .pageContent{
    width: 100%;
    height: 100%;
    padding: 16rpx 32rpx 0;
    box-sizing: border-box;
    background: #f8f8f8;
    .tabBox{
      width: 100%;
      height: 76rpx;
      box-sizing: border-box;
      padding: 8rpx;
      background: #F2F1F1;
      border-radius: 8rpx;
      display: flex;
      justify-content: space-between;
      .tab{
        width: calc((100% - 16rpx)/2);
        height: 100%;
        border-radius: 8rpx;
        text-align: center;
        line-height: 60rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #786B6C;
      }
      .selectTab{
        background: #FFFFFF;
        color: #160002;
      }
    }
    .descBox{
      width: 100%;
      .smallBox{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .leftBox{
          display: flex;
          align-items: center;
        }
        .rightBox{
          display: flex;
          align-items: center;
          .descIcon{
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }
    .listBox{
      padding-top: 24rpx;
      .listItem{
        width:calc(100% - 16rpx);
        margin-bottom: 12px;
        border: 1px solid #D9DBE0;
        border-radius: 8px;
        position: relative;
        .bg{
          position: absolute;
          right: 0;top: 0;
          width: 97px;
          height: 97px;
        }
        .listBox{
          width: 100%;
          box-sizing: border-box;
          padding: 12px 16px;
          background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
          border-bottom: 1px solid #D9DBE0;
          border-radius: 8px;
          .itemTop{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .itemLeft{
              display: inline-block;
              padding: 2px 8px;
              background: rgba(26, 95, 255, 0.1);
              border-radius: 14px;
              .itemFixed{
                width: 12px;
                height: 14px;
                margin-right: 4px;
              }
              .serverName{
                font-size: 16px;
                font-family: Alimama ShuHeiTi;
                color: #1A5FFF;
                line-height: 22px
              }
            }
            .itemRight{
              width: 26px;
              height: 14px;
            }
          }
          .itemDetail{
            margin-top: 16px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .message{
              width: 33%;
              display: flex;
              flex-direction: column;
              .cirRate{
                width: 40px;
                height: 40px;
              }
              .label{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 20px
              }
              .value{
                font-size: 18px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 24px;
                white-space: nowrap;
              }
            }
          }
        }
        .childList{
          border-radius: 8px 8px 0 0;
          width: 100%;
          .childItem{
            width: 100%;
            .secondItemBox{
              padding: 12px 16px;
              box-sizing: border-box;
              border-bottom: 1px solid #EEEEEE;
              border-radius: 8px;
              .childTop{
                width: 100%;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .topLeft{
                  display: flex;
                  align-items: center;
                  .imgBox{
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    border: 1px solid #FFFFFF;
                    overflow: hidden;
                    .topIcon{
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .serviceName{
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 22px;
                    margin-left: 6px;
                  }
                }
                .topRight{
                  width: 16px;
                  height: 16px;
                }
              }
              .childDetailBox{
                margin-top: 16px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .message{
                  width: 33%;
                  display: flex;
                  flex-direction: column;
                  .cirRate{
                    width: 40px;
                    height: 40px;
                  }
                  .label{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 20px
                  }
                  .value{
                    font-size: 18px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 24px;
                    white-space: nowrap;
                  }
                }
              }
            }
            .childDetailList{
              box-sizing: border-box;
              padding: 0 16px;

              .thirdItem{
                padding: 12px 0;
                box-sizing: border-box;
                border-bottom: 2px solid #EEEEEE;
                .thirdItemTop{

                }
                .thirdItemBottom{
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .bottomItem{
                    width: 33%;
                    display: flex;
                    flex-direction: column;
                  }
                }
              }
            }
          }
        }
      }
      .noDataBox{
        width: 100%;
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;

      }
    }
  }
}
</style>
