<template>
    <view class="container">
      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
         
        <view class="search-view">
          <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择POS机" suffixIcon="search"
          suffixIconStyle="color: #909399" class="search-input">
          </u-input>  
      </view>
      </u-sticky>
        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
        <view class="search-view">
          <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
          suffixIconStyle="color: #909399" class="search-input">
          </u-input>
          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
        <u-transition :show="filterPanel" mode="fade">
          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
            <view class="filter-panel-content">
             
              <view class="select-header">刷卡时间</view>
            <view class="selcet-content" style="padding: 0 24rpx">
              <u-input
                :disabled="true"
                :disabledColor="'#fff'"
                class="dateInput"
                border="surround"
                v-model="queryParams.startTime"
                placeholder="请选择开始时间"
              >
                <template v-slot:suffix>
                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
                </template>
              </u-input>
              <u-input
                :disabled="true"
                :disabledColor="'#fff'"
                class="dateInput"
                border="surround"
                v-model="queryParams.endTime"
                placeholder="请选择结束时间"
              >
                <template v-slot:suffix>
                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
                </template>
              </u-input>
            </view>
            </view>
            <view class="btn-box">
              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
            </view>
            <u-datetime-picker
              :closeOnClickOverlay="true"
              :show="timeShow"
              v-model="time"
              mode="date"
              @close="openOrCloseDate"
              @cancel="openOrCloseDate"
              @confirm="confirm"
            ></u-datetime-picker>
          </view>
        </u-transition>
      </view>
      </u-sticky>
        <div class="app-container" style="overflow: auto">
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="@/static/images/one.png" alt="" />
        <div class="info-sum">
          <div class="title">刷卡金额</div>
          <div class="num">{{ pos.amount }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="@/static/images/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">刷卡手续费</div>
          <div class="num">{{ pos.commission }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="@/static/images/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">入账金额</div>
          <div class="num">{{ pos.actualAmount }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="@/static/images/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">刷卡次数</div>
          <div class="num">{{ pos.count }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div></div>
  </div>
      <u-list  :spaceHeight="116" lowerThreshold="100">
        <u-list-item v-for="(item, index) in listData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <u--text  lines="1" 
                :text="item.time+' 刷卡金额：'+item.value" size="30rpx" color="#333333" ></u--text>
            </view>
            <view class="item-row">
            <text class="row-label">刷卡明细：</text>
            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
          </view>
          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
      <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
        @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
  </template>
  
  <script setup>
  import { getPosAnalysis } from '@/api/invest/statisticAnalysis'
  import { getDicts } from '@/api/system/dict/data.js'
    import dayjs from 'dayjs'
  import { timeHandler } from '@/utils/common.ts'
  import { listAccounts } from '@/api/invest/accounts'
  import {onLoad,onShow} from "@dcloudio/uni-app";
      // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
  import {reactive ,toRefs,ref,computed }from "vue";
  const pageNum = ref(1)
  const listData = ref([])
  const isShow = ref(false)
  const accountList = ref([])
  const accountTypeList = ref([])
  const settingPickShow = ref(false)
  const settingColumns = ref([])
  const showAccount = ref(false)
  const timeShow= ref(false)
  const time =ref( Number(new Date()))
  const  flag= ref(true)
  const pos = ref({
    amount: '',
  commission: '',
  actualAmount: '',
  count: '',
  posList: []
})
  const data = reactive({
    filterPanel: false,
    queryAccountParams: {
    pageNum: 1,
    state: '1',
    type: '6',
    pageSize: 100
  },
    queryParams: {
    type: 1,
    time: null,
    dataType: null,
    id: null
     } 
  })

  const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
  const windowHeight = computed(() => {
              uni.getSystemInfoSync().windowHeight - 50
          })	
  onLoad(() => {
      getDict()
      getList()
    });
  
   onShow(() => {
      if (isShow.value) {
        getList()
        isShow.value = false
      }
    });

    function formatMultiLineData(data) {
  if (data != null) {
    return data.replace(/<br\/>/g, '')
  }
}
function  openOrCloseDate(data) {
      timeShow.value = !timeShow.value
      flag.value = data
    }
    function confirm(e) {
      const date = timeHandler(new Date(e.value), '-', ':')
            let formatValue = 'YYYY-MM-DD'
            dayjs(date).format(formatValue)
      if (flag.value) {
        queryParams.value.startTime =  dayjs(date).format(formatValue)
      } else {
        queryParams.value.endTime =  dayjs(date).format(formatValue)
      }
      timeShow.value = false
    }
function searchSubmit() {
  queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime 
      pageNum.value = 1
      listData.value = []
      getList()
      filterPanel.value = false
    }
    function resetQuery() {
        queryParams.value.id = ''
        queryParams.value.type = '1'
        let formatValue = 'YYYY-MM-DD'
    const today = new Date()
    const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
   const start = dayjs(end).add(-1, 'months')
       queryParams.value.startTime =  dayjs(start).format(formatValue)
      queryParams.value.endTime =  dayjs(end).format(formatValue)
      queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
    }
  function getList() {
    
    getPosAnalysis({...queryParams.value }).then(res => {
            pos.value = { ...res.data }
          listData.value = listData.value.concat(res.data.tablePosList)
        }).catch(() => {
        })
      }
  function   getDict() {
      let formatValue = 'YYYY-MM-DD'
    const today = new Date()
    const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
   const start = dayjs(end).add(-1, 'months')
       queryParams.value.startTime =  dayjs(start).format(formatValue)
      queryParams.value.endTime =  dayjs(end).format(formatValue)
      queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
    listAccounts(queryAccountParams.value).then((response) => {
        accountList.value = [response.rows] 
      })
        
      }
  function settingConfirm(e) {
        queryParams.value.settingId = e.value[0].settingId
        queryParams.value.settingName = e.value[0].settingName
        settingPickShow.value = false
      }
  function settingCancel() {
        settingPickShow.value = false
      }
      function handleAccount() {
          if (accountList.value[0].length === 0) {
            proxy.$refs['uToast'].show({
              message: 'POS机为空  ', type: 'warning'
            })
          } else {
            showAccount.value = true
          }
       }
    function   handleAccountConfirm(e) {
      queryParams.value.accountName = e.value[0].nameCode
      queryParams.value.id= e.value[0].id
          showAccount.value = false
          pageNum.value = 1
        listData.value = []
        getList()
    }
   function handleAccountCancel() {
    queryParams.value.accountName = ''
      queryParams.value.id=''

         showAccount.value = false
         listData.value = []
        getList()
        filterPanel.value = false
    }
    

  </script>
  
  <style lang="scss" scoped>

.app-container {
  .header-con {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 50%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      margin: 5px 10px 5px 10px;
      .title {
        margin-left: 5px;
        color: rgb(133, 133, 148);
        margin-bottom: 5px;
        font-size: 14px;
      }
      .num {
        margin-left: 5px;
        font-weight: bold;
        font-size: 14px;
      }
    }
    img {
      height: 30px;
      width: 30px;
    }
  }
  .header-title {
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
  }
}
  .btnAdd {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        display:float;
        text-align: center;
      }
  
  .search-view {
    padding: 12rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    position: relative;

  
    .search-input {
      background: #F5F5F5;
      color: #333333;
      margin-right: 36rpx;
    }
  
    .filter-panel {
      width: 100%;
      position: absolute;
      left: 0;
      top: 96rpx;
      background-color: rgba(0, 0, 0, 0.5);
  
      .filter-panel-content {
        background-color: #ffff;
        padding: 0 30rpx 30rpx;
  
        .filter-title {
          color: #000000;
          font-size: 30rpx;
          font-weight: 500;
          padding: 30rpx 0;
        }
  
        .state-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
  
          .state-item {
            width: 210rpx;
            height: 72rpx;
            border: 1rpx solid rgba(0, 0, 0, 0.25);
            border-radius: 72rpx;
            text-align: center;
            line-height: 72rpx;
            margin: 0 20rpx 20rpx 0;
            font-size: 28rpx;
            color: #000000;
          }
  
          .active {
            background-color: rgba(222, 241, 255, 1);
            border: 1rpx solid rgba(22, 119, 255, 1);
          }
        }
      }
  
      .btn-box {
        display: flex;
        padding: 24rpx 30rpx;
        background-color: #fff;
        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
      }
    }
  }
  
  .list-item {
    margin: 0 24rpx 24rpx;
    padding: 32rpx;
    background-color: #fff;
  
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16rpx;
  
      .status {
        .status-item {
          width: 120rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
        }
  
        .status1 {
          background: #F0F0F0;
          color: #8C8C8C;
        }
  
        .status2 {
          background: rgba(38, 129, 255, 0.2);
          color: #2681FF;
        }
  
        .status3 {
          background: #F7F7F7;
          color: #2681FF;
        }
  
        .status4 {
          background: rgba(255, 85, 51, 0.2);
          color: #FF5533;
        }
  
        .status5 {
          background: #F7F7F7;
          color: rgba(0, 0, 0, 0.85);
        }
  
        .status7 {
          background: rgba(255, 129, 51, 0.2);
          color: #FF8133;
        }
  
        .status8 {
          background: rgba(65, 217, 165, 0.2);
          color: #41D9A5;
        }
      }
    }
  
    .item-row {
      padding: 16rpx 0;
  
      .row-label {
        color: rgba(0, 0, 0, 0.55);
      }
  
      .row-value {
        color: rgba(0, 0, 0, 0.85)
      }
    }
  
    .operate {
      display: flex;
      justify-content: flex-end;
  
      .btn {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        margin-left: 5rpx;
        text-align: center;
      }
  
      .circulation {
        background: rgba(0, 0, 0, 0.04);
        margin-right: 24rpx;
        color: rgba(0, 0, 0, 0.85);
      }
  
      .filling {
        background: #2681FF;
        border-radius: 8rpx;
        color: #FFFFFF;
      }
    }
  }
  </style>