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

    <view class="title">
      <PageTitle :title="$t('home.customer.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="queryCustomerParams.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="user in userList" :key="user.id">
          <view class="top" @click="showDetails(user.id)">
            <view class="itemTitle">
<!--              <image class="title-bg" src="/static/titleIcon2.svg" mode="aspectFit"></image>-->
              <view class="title-bg">
                <text class="title-text">{{ user.id }}</text>
              </view>
            </view>
          </view>
          <uni-collapse class="box" style="margin-top: 12px" >
            <uni-collapse-item title-border="none" :show-arrow="false" :border="false" :open="user.if_show" :disabled="true">
              <template v-slot:title>

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

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

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

                <view class="bottomItem" v-show="!user.if_show" style="padding-bottom: 8px">
                  <text @click="showItem(user)">{{ $t('home.customer.sellPage.open') }}</text>
                  <image @click="showItem(user)" 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.customer_type_text">
                  <view class="column">{{ filterColumns.customer_type_text?.title }}</view>
                  <view class="value">{{ user.customer_type_text }}</view>
                </view>
                <view class="row" v-show="filterColumns.phone">
                  <view class="column">{{ filterColumns.phone?.title }}</view>
                  <view class="value">{{ user.phone }}</view>
                </view>

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

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

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

                <view class="row" v-show="filterColumns.ib_user_group">
                  <view class="column">{{ filterColumns.ib_user_group?.title }}</view>
                  <view class="value">{{ user.ib_user_group_text }}</view>
                </view>

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

                <view class="bottomItem">
                  <text @click="hideItem(user)">{{ $t('home.customer.sellPage.packUp') }}</text>
                  <image @click="hideItem(user)" 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.id?.ifFilter">
            <view class="filterTitle">
              <text>ID</text>
            </view>
            <input type="number" class="filterInput" v-model="queryCustomerParams.id" :placeholder="$t('form.pleaseEnter')">
          </view>
          <view class="filterRow" v-show="filterColumns.email?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.email?.title }}</text>
            </view>
            <input class="filterInput" v-model="queryCustomerParams.email" :placeholder="$t('form.pleaseEnter')">
          </view>
          <!--        <view class="filterRow">-->
          <!--          <view class="filterTitle">-->
          <!--            <text>{{ $t('home.customer.sellPage.org') }}</text>-->
          <!--          </view>-->
          <!--          <input class="filterInput"  :placeholder="$t('form.pleaseEnter')">-->
          <!--        </view>-->
          <view class="filterRow" v-show="filterColumns.salesman_name?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.salesman_name?.title }}</text>
            </view>
            <input class="filterInput" v-model="queryCustomerParams.salesman_name" :placeholder="$t('form.pleaseEnter')">
          </view>
          <view class="filterRow" v-show="filterColumns.superior_id?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.superior_id?.title }}</text>
            </view>
            <input class="filterInput" v-model="queryCustomerParams.superior_id" :placeholder="$t('form.pleaseEnter')">
          </view>
          <view class="filterRow" v-show="filterColumns.superior_code?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.superior_code?.title }}</text>
            </view>
            <input class="filterInput" v-model="queryCustomerParams.superior_code" :placeholder="$t('form.pleaseEnter')">
          </view>
          <view class="filterRow" v-show="filterColumns.superior_name?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.superior_name?.title }}</text>
            </view>
            <input class="filterInput" v-model="queryCustomerParams.superior_name" :placeholder="$t('form.pleaseEnter')">
          </view>
          <view class="filterRow" v-show="filterColumns.ib_user_group?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.ib_user_group?.title }}</text>
            </view>
            <uni-data-select
                :placeholder="$t('form.pleaseSelect')"
                :localdata="ib_user_group_dict_options"
                v-model="queryCustomerParams.ib_user_group"
                placement="top"
            ></uni-data-select>
          </view>
          <view class="filterRow" v-show="filterColumns.auth?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.auth?.title }}</text>
            </view>
            <uni-data-checkbox selectedColor="#29BBE4" v-model="queryCustomerParams.auth" :localdata="authOptions" >

            </uni-data-checkbox>
          </view>
          <view class="filterRow" v-show="filterColumns.status?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.status?.title }}</text>
            </view>
            <uni-data-checkbox selectedColor="#29BBE4" v-model="queryCustomerParams.status" :localdata="statusOptions" >

            </uni-data-checkbox>
          </view>
          <view class="filterRow" v-show="filterColumns.create_time_format?.ifFilter">
            <view class="filterTitle">
              <text>{{ filterColumns.create_time_format?.title }}</text>
            </view>
            <uni-datetime-picker ref="timeRange" class="time" type="daterange" v-model="timeRange"/>
          </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>

    <uni-popup ref="popup2" background-color="#fff" type="bottom">
      <view style="padding: 42px 0px">
        <Segmented
            styleType="text"
            fontSize="16px"
            gap="6px"
            :current="current2"
            :values="items2"
            @clickItem="onClickItem2"
            inActiveColor="#999999"
            activeColor="#000"
        ></Segmented>
        <scroll-view style="max-height: 70vh;min-height: 70vh;" scroll-y="true">
          <view class="userDetail" v-show="current2 == 0">
            <view class="row">
              <view class="column">{{ $t('form.firstName.label') }}</view>
              <view class="value">{{ userDetail.first_name }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('form.lastName.label') }}</view>
              <view class="value">{{ userDetail.last_name }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('home.customer.sellPage.email') }}</view>
              <view class="value">{{ userDetail.email }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('home.customer.sellPage.phone') }}</view>
              <view class="value">{{ userDetail.phone }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('form.residence.label') }}</view>
              <view class="value">{{ userDetail.address_detailed }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('form.country.label') }}</view>
              <view class="value">{{ userDetail.country }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('form.state.label') }}</view>
              <view class="value">{{ userDetail.address_state }}</view>
            </view>

            <view class="row">
              <view class="column">{{ $t('form.city.label') }}</view>
              <view class="value">{{ userDetail.address }}</view>
            </view>
          </view>

          <view class="BankDetail" v-show="current2 == 1">

            <view class="bankCardWrapper" v-for="values in bankList" >
              <view class="bankCardContent">
                <view class="cardTitle">
                  <view class="bankStatusWrapper">
                    <view>
                      <image v-if="values.bank_standby_1 == 'B1'" src="/static/user/yhzh.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
                      <image v-else src="/static/user/szhb.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
                    </view>
                    <text v-if="values.bank_standby_1 == 'B1'" class="bankType">{{ $t('form.bankAccount.label') }}</text>
                    <text v-else class="bankType">{{ $t('form.personalData.financialInformation.digitalCurrency.label') }}</text>
                    <view
                        class="bankStatus"
                        :style="{color: applyStatusMap[getStatus(values)]?.color,backgroundColor: applyStatusMap[getStatus(values)]?.bgc}"
                    >
                      {{ applyStatusMap[getStatus(values)]?.text ?? '-' }}
                    </view>

                  </view>
                </view>
                <view class="divider"></view>
                <view class="bankCardDetails">
                  <view class="detailItem">
                    <view class="point">
                      <text class="uni-subtitle" v-if="values.bank_standby_1 == 'B1'">{{ $t(`form.personalData.financialInformation.bankNo.label_B1`) }}</text>
                      <text class="uni-subtitle" v-else >{{ $t(`form.personalData.financialInformation.bankNo.label_B2`) }}</text>
                    </view>
                    <text>{{ values.bank_no }}</text>
                  </view>
                  <view class="detailItem">
                    <view class="point">
                      <text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankCurrency.label') }}</text>
                    </view>
                    <text>{{ values.bank_currency }}</text>
                  </view>
                  <view class="detailItem">
                    <view class="point">
                      <text class="uni-subtitle">{{ $t('form.fullName.label') }}</text>
                    </view>
                    <text>{{ values.bank_cards }}</text>
                  </view>
                  <view class="detailItem" v-if="values.bank_standby_1 === 'B1'">
                    <view class="point">
                      <text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankSubName.label') }}</text>
                    </view>
                    <text>{{ values.bank_sub_name }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-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 { queryCustomerList } from '@/services/customer/ib.ts';
import { getUserDetail, queryBankList } from '@/services/customer/customer.ts';
import { getDictByCode } from '@/services/home/home.ts';
import { UserLanguage, customerMenu } from '@/utils/const';
import { getFilterColumns, queryMenuList } from '@/services/home/home.ts';

export default {
  data() {
    return{
      qcc_page_id:103,
      filterColumns:{},
      ib_user_group_dict:{},
      ib_user_group_dict_options:[],
      loading:false,
      current: 0,
      items: [],
      itemsLink: [],
      inTheEnd:false,
      noData:false,
      queryCustomerParams:{
        qcc_fuzzy_search:null,
        curr_page:1,
        page_size:5,
        id:null,
        email:null,
        salesman_name:null,
        superior_id:null,
        superior_code:null,
        superior_name:null,
        ib_user_group:null,
        auth:null,
        status:null,
        date_start:null,
        date_end:null,
      },
      timeRange: ['', ''],
      authOptions: [
        { text: this.$t('home.customer.customerPage.all'), value: null }, // 全部
        { text: this.$t('home.customer.customerPage.auth0'), value: 0 }, //已认证
        { text: this.$t('home.customer.customerPage.auth1'), value: 1 } //未认证
      ],
      statusOptions: [
        { text: this.$t('home.customer.customerPage.all'), value: null }, // 全部
        { text: this.$t('home.customer.customerPage.status0'), value: 0 }, //启用
        { text: this.$t('home.customer.customerPage.status1'), value: 1 }, //禁用
        { text: this.$t('home.customer.customerPage.status9'), value: 9 } //删除
      ],
      userList:[],
      totalRecords:0,
      current2:0,
      items2:['基本资料','财务资料'],
      userDetail:{},
      bankList:[],
      applyStatusMap: {
        approved: {
          color: 'rgba(67, 207, 124, 1)',
          bgc: 'rgba(67, 207, 124, 0.2)',
          text: this.$t('form.personalData.financialInformation.bankStatus.approved')
        },
        verified: {
          color: 'rgba(67, 207, 124, 1)',
          bgc: 'rgba(67, 207, 124, 0.2)',
          text: this.$t('form.personalData.financialInformation.bankStatus.verified')
        },
        pending: {
          color: 'rgba(255, 195, 0, 1)',
          bgc: 'rgba(255, 195, 0, 0.2)',
          text: this.$t('form.personalData.financialInformation.bankStatus.pending')
        },
        unverified: {
          color: 'rgba(255, 195, 0, 1)',
          bgc: 'rgba(255, 195, 0, 0.2)',
          text: this.$t('form.personalData.financialInformation.bankStatus.unverified')
        },
        rejected: {
          color: 'rgba(255, 87, 51, 1)',
          bgc: 'rgba(255, 87, 51, 0.2)',
          text: this.$t('form.personalData.financialInformation.bankStatus.rejected')
        }
      }
    }
  },
  methods:{
    async getMenuListData() {
      const res = await queryMenuList();
      if (res && res.code === 0) {
        const menuList = [];
        for (var i = 0; i < res.data.length; i++) {
          const { saleRouteKey } = res.data[i]
          if (saleRouteKey == 'customer') {
            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(customerMenu[res.data[i].children[j].saleRouteKey])
                  if (res.data[i].children[j].saleRouteKey == 'ib'){
                    this.current = index
                  }
                  index++
                }
              }
            }
          }
        }
      }
    },
    async getIbUserGroupDict(){
      this.getFilterColumns()
      const res = await getDictByCode({
        dict_code: 'ib_user_group',
        qcc_language: UserLanguage
      });
      if (res && res.code === 0) {
        let data = res.data
        for (let i = 0; i < data.length; i++) {
          let dict = data[i];
          this.ib_user_group_dict[dict.fun_item_code] =dict.fun_item_text;
          this.ib_user_group_dict_options[i] = {text:dict.fun_item_text,value:dict.fun_item_code}
        }
      }
      this.queryUserList()
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        uni.navigateTo({url: this.itemsLink[e.currentIndex]});
      }
    },
    onClickItem2(e) {
      this.current2 = e.currentIndex
    },
    search(){
      this.queryCustomerParams.curr_page = 1
      this.queryCustomerParams.page_size = 5
      this.queryUserList()
    },
    async queryUserList() {
      this.$refs.popup.close();
      this.userList = []
      this.loading=true
      this.queryCustomerParams.date_start = this.timeRange[0]
      this.queryCustomerParams.date_end = this.timeRange[1]
      const res = await queryCustomerList(this.queryCustomerParams);
      if (res && res.code === 0) {
        let data = res.data;
        this.userList = data.records
        this.totalRecords = data.totalRecords
      }
      if (this.userList == null || this.userList.length == 0){
        this.noData = true
      }else {
        this.noData = false
      }
      if (this.userList !=null){
        for (let i = 0; i < this.userList.length; i++) {
          this.userList[i].ib_user_group_text = this.ib_user_group_dict[this.userList[i].ib_user_group]
        }
      }
      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;
    },
    openFilter() {
      this.$refs.popup.open()
    },
    async scrolltolowerQuery(){
      if ((this.queryCustomerParams.page_size + 5)<(this.totalRecords + 5)){
        this.inTheEnd = false;
        this.queryCustomerParams.page_size = this.queryCustomerParams.page_size +5
        this.queryUserList()
      }else {
        this.inTheEnd = true;
      }
    },
    reset() {
      this.queryCustomerParams.id = null
      this.queryCustomerParams.email = null
      this.queryCustomerParams.salesman_name = null
      this.queryCustomerParams.superior_id = null
      this.queryCustomerParams.superior_code = null
      this.queryCustomerParams.superior_name = null
      this.queryCustomerParams.ib_user_group = null
      this.queryCustomerParams.auth = null
      this.queryCustomerParams.status = null
      this.$refs.timeRange.clear()
    },
    async getUserDetail(id) {
      const res = await getUserDetail({id:id});
      if (res && res.code === 0) {
        this.userDetail =res.data
      }
    },
    async queryBankList(id) {
      const res = await queryBankList({id:id});
      if (res && res.code === 0) {
        this.bankList =res.data
      }
    },
    showDetails(id) {
      this.current2 = 0
      this.getUserDetail(id)
      this.queryBankList(id)
      this.$refs.popup2.open()
    },
    getStatus(values) {
      if (values.bank_standby_1 === 'B1') {
        switch (Number(values.apply_status)) {
          case 0:
            return 'approved';
            break;
          case 1:
            return 'pending';
            break;
          case 2:
            return 'rejected';
            break;
        }
      } else {
        switch (true) {
          case Number(values.apply_status) === 0 && Number(values.verify_email) === 1:
            return 'verified';
            break;
          case Number(values.apply_status) === 0 && Number(values.verify_email) === 0:
            return 'unverified';
            break;
          case Number(values.apply_status) === 1:
            return 'pending';
            break;
          case Number(values.apply_status) === 2:
            return 'rejected';
            break;
        }
      }
    }
  },
  mounted() {
    this.getMenuListData()
    this.getIbUserGroupDict()
  },
  components: {
    Segmented,
    UniCollapse,
    UniDataSelect
  }

};
</script>

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