<template>
  <NavBar />
  <view class="container">

    <view class="title">
      <PageTitle :title="$t('home.report.title')" />
    </view>
    <view style="margin-top: 20px">
      <Segmented
          styleType="text"
          fontSize="16px"
          gap="6px"
          :current="current"
          :values="items"
          @clickItem="onClickItem"
          inActiveColor="#999999"
          activeColor="#000"
      ></Segmented>
    </view>

    <view style="margin-top: 20px">
      <view class="search">
        <input class="searchInput" v-model="queryListParams.qcc_fuzzy_search" :placeholder="$t('home.customer.sellPage.name')+'/'+$t('home.customer.sellPage.email')">
        <button class="btn primaryButton" @click="search">
          <image src="/static/search.svg" mode="aspectFit" style="width: 14px;height: 14px"></image>
          <text class="filterText">{{ $t('form.search') }}</text>
        </button>
      </view>
      <view class="search2">
        <button class="btn primaryButton" @click="openFilter">
          <image src="/static/filtrate.svg" mode="aspectFit" style="width: 20px;height: 20px"></image>
          <text class="filterText">{{ $t('common.filter') }}</text>
        </button>
      </view>

      <scroll-view style="height: calc(100vh - 260px);" scroll-y="true" @scrolltolower="scrolltolowerQuery" >
        <view class="item" v-for="item in records" >
          <view class="top">
            <view class="itemTitle">
              <image class="title-bg" src="/static/titleIcon2.svg" mode="aspectFit"></image>
              <text class="title-text">{{ item.login }}</text>
            </view>
          </view>
          <uni-collapse class="box" style="margin-top: 12px" >
            <uni-collapse-item title-border="none" :show-arrow="false" :border="false" :open="item.if_show" :disabled="true">
              <template v-slot:title>

                <view class="row" v-show="filterColumns.mt4_server">
                  <view class="column">{{ filterColumns.mt4_server?.title }}</view>
                  <view class="value">{{ item.mt4_server }}</view>
                </view>

                <view class="row" v-show="filterColumns.superior">
                  <view class="column">{{ filterColumns.superior?.title }}</view>
                  <view class="value">{{ item.superior }}</view>
                </view>

                <view class="row" v-show="filterColumns.regdate">
                  <view class="column">{{ filterColumns.regdate?.title }}</view>
                  <view class="value">{{ item.regdate }}</view>
                </view>

                <view class="bottomItem" v-show="!item.if_show" style="padding-bottom: 8px">
                  <text @click="showItem(item)">{{ $t('home.customer.sellPage.open') }}</text>
                  <image @click="showItem(item)" src="/static/openIcon.svg" mode="aspectFit" style="width: 14px;height: 8px"></image>
                </view>
              </template>
              <view class="content" style="padding-bottom: 8px">

                <view class="row" v-show="filterColumns.credit">
                  <view class="column">{{ filterColumns.credit?.title }}</view>
                  <view class="value">{{ item.credit }}</view>
                </view>

                <view class="row" v-show="filterColumns.swaps">
                  <view class="column">{{ filterColumns.swaps?.title }}</view>
                  <view class="value">{{ item.swaps }}</view>
                </view>

                <view class="row" v-show="filterColumns.commission">
                  <view class="column">{{ filterColumns.commission?.title }}</view>
                  <view class="value">{{ item.commission }}</view>
                </view>

                <view class="row" v-show="filterColumns.ticket">
                  <view class="column">{{ filterColumns.ticket?.title }}</view>
                  <view class="value">{{ item.ticket }}</view>
                </view>

                <view class="row" v-show="filterColumns.lot">
                  <view class="column">{{ filterColumns.lot?.title }}</view>
                  <view class="value">{{ item.lot }}</view>
                </view>

                <view class="row" v-show="filterColumns.profitIn">
                  <view class="column">{{ filterColumns.profitIn?.title }}</view>
                  <view class="value">{{ item.profitIn }}</view>
                </view>

                <view class="row" v-show="filterColumns.profitOut">
                  <view class="column">{{ filterColumns.profitOut?.title }}</view>
                  <view class="value">{{ item.profitOut }}</view>
                </view>

                <view class="row" v-show="filterColumns.profit">
                  <view class="column">{{ filterColumns.profit?.title }}</view>
                  <view class="value">{{ item.profit }}</view>
                </view>


                <view class="bottomItem">
                  <text @click="hideItem(item)">{{ $t('home.customer.sellPage.packUp') }}</text>
                  <image @click="hideItem(item)" src="/static/packUpIcon.svg" mode="aspectFit" style="width: 14px;height: 8px"></image>
                </view>
              </view>

            </uni-collapse-item>
          </uni-collapse>
        </view>
        <Spin v-show="loading" />
        <view class="inTheEnd" v-show="inTheEnd">{{ $t('common.inTheEnd') }}</view>
        <view class="inTheEnd" v-show="noData">{{ $t('common.noData') }}</view>
        <view style="height: 20px;width: 100%;"></view>
      </scroll-view>
    </view>

    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view style="padding: 37px 0;">
        <scroll-view style="max-height: 70vh;" scroll-y="true">


          <view class="filterRow" v-show="filterColumns.mt4_server?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.mt4_server?.title }}</text>
            </view>
            <uni-data-select
                :placeholder="$t('form.pleaseSelect')"
                :localdata="mtServerList"
                v-model="queryListParams.mt4_server"
                placement="top"
            ></uni-data-select>
          </view>


          <view class="filterRow" v-show="filterColumns.login?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.login?.title }}</text>
            </view>
            <input class="filterInput" v-model="queryListParams.login" :placeholder="$t('form.pleaseEnter')">
          </view>

          <view class="filterRow" v-show="filterColumns.regdate?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.regdate?.title }}</text>
            </view>
            <uni-datetime-picker ref="timeRange1" class="time" type="daterange" v-model="timeRange1"/>
          </view>

        </scroll-view>
        <view style="display: flex;gap: 12px;padding: 14px 16px;">
          <buttom class="btn secondaryButton" @click="reset">
            {{ $t('home.customer.sellPage.reset') }}
          </buttom>
          <buttom class="btn primaryButton" @click="search">
            {{ $t('home.customer.sellPage.confirm') }}
          </buttom>
        </view>
      </view>
    </uni-popup>

  </view>
</template>

<script>
import Segmented from '@/pages/components/segmented/index.vue';
import UniCollapse from "../../../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
import UniDataSelect from "../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import { getTableData } from '@/services/report/report.ts';
import { getFilterColumns, queryMenuList } from '@/services/home/home.ts';
import { UserLanguage, reportMenu } from '@/utils/const';
import { getMtServer } from '@/services/home/home.ts';

export default {
  data() {
    return{
      url:"/saleH5/report/getReport21",
      qcc_page_id:621,
      loading:false,
      current: undefined,
      items: [],
      itemsLink: [],
      inTheEnd:false,
      noData:false,
      queryListParams:{
        app:"md",
        qcc_fuzzy_search:null,
        curr_page:1,
        page_size:5,
        ticket:null,
        login:null,
        mt4_server:null,
        regdate_start:null,
        regdate_end:null
      },
      records:[],
      totalRecords:0,
      filterColumns:{},
      mtServerList:[],
      timeRange:['',''],
      timeRange1:['','']
    }
  },
  methods:{
    async getMenuListData() {
      const res = await queryMenuList();
      if (res && res.code === 0) {
        for (var i = 0; i < res.data.length; i++) {
          const { saleRouteKey } = res.data[i]
          if (saleRouteKey == 'report') {
            if (res.data[i].children.length>0){
              let index = 0;
              for (let j = 0; j < res.data[i].children.length; j++) {
                if (res.data[i].children[j].saleRouteKey !=null && res.data[i].children[j].saleRouteKey !=''){
                  this.items.push(res.data[i].children[j].name)
                  this.itemsLink.push(reportMenu[res.data[i].children[j].saleRouteKey])
                  if (res.data[i].children[j].saleRouteKey == 'report21'){
                    this.current = index
                  }
                  index++
                }
              }
            }
          }
        }
      }
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        uni.navigateTo({url: this.itemsLink[e.currentIndex]});
      }
    },
    search(){
      this.queryListParams.curr_page = 1
      this.queryListParams.page_size = 5
      this.queryList()
    },
    async queryList(){
      this.$refs.popup.close();
      this.records = []
      this.loading=true
      this.queryListParams.regdate_start = this.timeRange[0]
      this.queryListParams.regdate_end = this.timeRange[1]
      const res = await getTableData(this.url,this.queryListParams);
      if (res && res.code === 0) {
        let data = res.data;
        this.records = data.records
      }
      if (this.records == null || this.records.length == 0){
        this.noData = true
      }else {
        this.noData = false
      }

      this.loading=false
    },
    async getFilterColumns(){
      const res = await getFilterColumns({
        qcc_page_id: this.qcc_page_id,
        qcc_language: UserLanguage
      });
      if (res && res.code === 0) {
        let data = res.data
        for (let i = 0; i < data.length; i++) {
          this.filterColumns[data[i].field]=data[i]
        }
      }
    },
    showItem(user) {
      user.if_show = true;
    },
    hideItem(user) {
      user.if_show = false;
    },
    async scrolltolowerQuery(){
      if ((this.queryListParams.page_size + 5)<(this.totalRecords + 5)){
        this.inTheEnd = false;
        this.queryListParams.page_size = this.queryListParams.page_size +5
        this.queryList()
      }else {
        this.inTheEnd = true;
      }
    },
    openFilter() {
      this.$refs.popup.open()
    },
    reset() {
      this.queryListParams.curr_page=1
      this.queryListParams.page_size=5
      this.queryListParams.ticket=null
      this.queryListParams.user_code=null
      this.queryListParams.login=null
      this.queryListParams.mt4_server=null
      this.$refs.timeRange.clear()
    },
    async getMtServerList(){
      const res = await getMtServer({
        qcc_language:UserLanguage
      });
      if (res && res.code === 0) {
        let data = res.data
        this.mtServerList = data.map((item) => ({
          text: item.server_name,
          value: item.id,
        }));
      }
    }
  },
  mounted() {
    this.getMenuListData()
    this.queryList()
    this.getFilterColumns()
    this.getMtServerList()
  },
  components: {
    Segmented,
    UniCollapse,
    UniDataSelect
  }

};
</script>

<style lang="scss" scoped>
@import './index.scss';
.is-input-border {
  border: none;
}
</style>
