<template>
	<NavBar v-if="showNav" />
	<view class="container">
		<view class="filter">
			<uni-datetime-picker ref="timeRange" class="time" type="daterange" v-model="timeRange"
				@change="handleDaterangeChange" />
			<view class="right-class" @click="showUserModal">
				<image src="/static/home/hierarchy.svg" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
			</view>
		</view>
    <view class="checkBtn" v-if="ifOrg" @click="switchData(true)"><image src="/static/check.svg" style="width: 17px;height: 14px;margin-right: 10px;" ></image>{{ $t('home.switchToPersonalPerformance') }}</view>
    <view class="checkBtn" v-else @click="switchData(false)"><image src="/static/check.svg" style="width: 17px;height: 14px;margin-right: 10px;" ></image>{{ $t('home.switchToTeamPerformance') }}</view>
		<view class="collect">
			<view class="title">
				<!--        <image src="/static/titleIcon.svg" class="title-bg" ></image>-->
				<view class="title-bg">
					<image src="/static/dthz.svg" mode="aspectFit"
						style="width: 32upx;height: 32upx;margin-left: 20rpx"></image>
					<text style="margin-left: 12rpx;">{{ $t('home.dynamicSummary') }}</text>
				</view>
				<view class="noBg"></view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData">
				</qiun-data-charts>
			</view>
			<view style="padding-top: 20px;">

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/registerIcon.svg" mode="aspectFit"
							style="width: 16px;height: 16px;margin-top: 2px"></image>
						<text>{{ $t('home.registeredNumberOfUsers') }}</text>
					</view>
					<text class="item-right">
						{{ registeredNumberOfUsers }}
					</text>
				</view>

        <view class="item-value">
          <view class="item-left">
            <image src="/static/home/goldInNum.svg" mode="aspectFit" style="width: 16px;height: 16px">
            </image>
            <text>{{ $t('home.numberOfDepositAccounts') }}</text>
          </view>
          <text class="item-right">
            {{ goldInUserNum }}
          </text>
        </view>

        <view class="item-value">
          <view class="item-left">
            <image src="/static/home/tradeUserNum.svg" mode="aspectFit" style="width: 16px;height: 16px">
            </image>
            <text>{{ $t('home.transactionNumberOfUsers') }}</text>
          </view>
          <text class="item-right">
            {{ tradeUserNum }}
          </text>
        </view>

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/goldInIcon.svg" mode="aspectFit" style="width: 16px;height: 16px">
						</image>
						<text>{{ $t('home.depositAmount') }}</text>
					</view>
					<text class="item-right">
						{{ '$' + depositAmount }}
					</text>
				</view>

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/goldOutIcon.svg" mode="aspectFit" style="width: 16px;height: 16px">
						</image>
						<text>{{ $t('home.withdrawalAmount') }}</text>
					</view>
					<text class="item-right">
						{{ withdrawalAmount }}
					</text>
				</view>

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/fundIcon.svg" mode="aspectFit"
							style="width: 16px;height: 16px;margin-top: 2px"></image>
						<text>{{ $t('home.agencyCommission') }}</text>
					</view>
					<text class="item-right">
						{{ '$' + agencyCommission }}
					</text>
				</view>

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/fundOutIcon.svg" mode="aspectFit"
							style="width: 16px;height: 16px;margin-top: 2px"></image>
						<text>{{ $t('home.commissionWithdrawal') }}</text>
					</view>
					<text class="item-right">
						{{ commissionWithdrawal }}
					</text>
				</view>

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/tradingIcon.svg" mode="aspectFit"
							style="width: 16px;height: 16px;margin-top: 2px"></image>
						<text>{{ $t('home.lotVolume') }}</text>
					</view>
					<text class="item-right">
						{{ lotVolume }}
					</text>
				</view>

				<view class="item-value">
					<view class="item-left">
						<image src="/static/home/profitIcon.svg" mode="aspectFit"
							style="width: 16px;height: 16px;margin-top: 2px"></image>
						<text>{{ $t('home.tradingProfitAndLoss') }}</text>
					</view>
					<text class="item-right">
						{{ '$' + tradingProfitAndLoss }}
					</text>
				</view>

			</view>

		</view>

		<view class="customer-status">
			<view class="title">
				<!--        <image src="/static/titleIcon.svg" class="title-bg" ></image>-->
				<view class="title-bg">
					<image src="/static/home/customerStatus.svg" mode="aspectFit"
						style="width: 16px;height: 16px;margin-left: 10px"></image>
					<text style="margin-left: 12rpx;">{{ $t('home.customerStatus') }}</text>
				</view>
				<view class="noBg"></view>
			</view>

			<view class="customer-status-top">
				<view class="item-box" style="background: rgba(255, 248, 240, 1);">
					<image class="bg-icon" src="/static/home/waitGoldIn.svg" mode="aspectFit"></image>
					<view class="item-top">
						<text class="item-title">{{ $t('home.waitingDeposit') }}</text>
						<text class="item-num">{{ waitingDeposit }}</text>
					</view>
					<view class="item-btn" @click="skipSell(2)">{{ $t('home.goAndCheck') }}
						<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
						</image>
					</view>
				</view>
				<view class="item-box" style="background: rgba(67, 207, 124, 0.06);">
					<image class="bg-icon" src="/static/home/transformIcon.svg" mode="aspectFit"></image>
					<view class="item-top">
						<text class="item-title">{{ $t('home.secondaryTransformation') }}</text>
						<text class="item-num">{{ secondaryTransformation }}</text>
					</view>
					<view class="item-btn" @click="skipSell(1)">{{ $t('home.goAndCheck') }}
						<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
						</image>
					</view>
				</view>
				<view class="item-box" style="background: rgba(247, 244, 254, 1);">
					<image class="bg-icon" src="/static/home/followUpIcon.svg" mode="aspectFit"></image>
					<view class="item-top">
						<text class="item-title">{{ $t('home.followUpContinuously') }}</text>
						<text class="item-num">{{ followUpContinuously }}</text>
					</view>
					<view class="item-btn" @click="skipSell(4)">{{ $t('home.goAndCheck') }}
						<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
						</image>
					</view>
				</view>
			</view>

			<view class="customer-status-bottom">
				<view class="item-box" style="background: rgba(242, 248, 254, 1);">
					<image class="bg-icon" src="/static/home/contactIcon.svg" mode="aspectFit"></image>
					<view class="item-top">
						<text class="item-title">{{ $t('home.noContact') }}</text>
						<text class="item-num">{{ noContact }}</text>
					</view>
					<view class="item-btn" @click="skipSell(0)">{{ $t('home.goAndCheck') }}
						<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
						</image>
					</view>
				</view>
				<view class="item-box" style="background: rgba(247, 248, 250, 1);">
					<image class="bg-icon" src="/static/home/noIntentionIcon.svg" mode="aspectFit"></image>
					<view class="item-top">
						<text class="item-title">{{ $t('home.unintentionalDirection') }}</text>
						<text class="item-num">{{ unintentionalDirection }}</text>
					</view>
					<view class="item-btn" @click="skipSell(5)">{{ $t('home.goAndCheck') }}
						<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
						</image>
					</view>
				</view>
			</view>

		</view>

    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="popupView">
        <view class="query-view">
          <input class="searchInput" v-model="qcc_fuzzy_search" :placeholder="$t('home.customer.sellPage.name')">
          <button class="btn primaryButton" @click="getSubordinate">
            <image src="/static/search.svg" mode="aspectFit" style="width: 14px;height: 14px"></image>
            <text class="filterText">{{ $t('form.search') }}</text>
          </button>
        </view>
        <view class="user-box">
          <view class="user-item" :class="{' user-active ' : power_id == user.id}" v-for="user in subordinateList" @click="activeUser(user.id)">
            {{ user.name }}
          </view>
        </view>
        <view class="operateBox">
          <button class="btn secondaryButton" @click="this.$refs.popup.close()">
            {{ $t('common.cancelText') }}
          </button>
          <button class="btn primaryButton" @click="switchUserData">
            {{ $t('common.okText') }}
          </button>
        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
	import {
		getPhaseSummaryOne,
		getPhaseSummaryTwo,
		getPhaseSummaryThree,
		statSaleLeadData,
    getCustomerSummary,
    getDynamicSummary,
    getSubordinate
	} from '@/services/home/home';
	import QiunDataCharts from "../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	import dayjs from "dayjs";
  import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
	export default {
		data() {
			return {
				showNav: false,
				timeRange: [dayjs().subtract(Number(1), 'day').format('YYYY-MM-DD'), dayjs().subtract(Number(1), 'day')
					.format('YYYY-MM-DD')
				],
				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#29BBE4", "#27417D"],
					padding: [1, 1, 1, 1],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 20
					},
					subtitle: {
						name: "0",
						fontSize: 20,
						color: "#000000"
					},
					title: {
						name: this.$t('home.numberOfClients'),
						fontSize: 12,
						color: "#666666"
					},
					extra: {
						ring: {
							ringWidth: 25,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				registeredNumberOfUsers: 0,
				depositAmount: 0,
        goldInUserNum: 0,
        tradeUserNum: 0,
				withdrawalAmount: 0,
				agencyCommission: 0,
				commissionWithdrawal: 0,
				lotVolume: 0,
				tradingProfitAndLoss: 0,
				waitingDeposit: 0,
				secondaryTransformation: 0,
				followUpContinuously: 0,
				noContact: 0,
				unintentionalDirection: 0,
        ifOrg:true,
        power:'all',
        power_id:undefined,
        qcc_fuzzy_search:undefined,
        subordinateList:[],
			};
		},
		methods: {
			async statSaleLeadData() {
				const res = await statSaleLeadData();
				if (res && res.code === 0) {
					let data = res.data;
					this.waitingDeposit = data.goldInNum ? data.goldInNum : 0
					this.secondaryTransformation = data.eczhNum ? data.eczhNum : 0
					this.followUpContinuously = data.cxgjNum ? data.cxgjNum : 0
					this.noContact = data.noContactNum ? data.noContactNum : 0
					this.unintentionalDirection = data.wyxNum ? data.wyxNum : 0
				}
			},
      switchData(f){
        if (f){
          this.ifOrg = false
          this.power = 'one'
        }else {
          this.ifOrg = true
          this.power = 'all'
        }
        this.getCustomerSummary()
        this.getDynamicSummary()
      },
			handleDaterangeChange() {
        this.$nextTick(() =>{
          this.getCustomerSummary()
          this.getDynamicSummary()
        })
			},
      activeUser(id){
        this.power_id = id
      },
      switchUserData(){
        this.$refs.popup.close();
        this.power = 'user';
        this.getCustomerSummary()
        this.getDynamicSummary()
      },
      async getCustomerSummary(){
        const res = await getCustomerSummary({
          power:this.power,
          power_id:this.power_id,
          time_start: this.timeRange[0],
          time_end: this.timeRange[1]
        });
        if (res && res.code === 0) {
          let data = res.data;
          let chart = {
            series: [{
              data: [{
                "name": this.$t('form.userType.ib') + " : " + Number(data
                    .new_ib_num),
                "value": Number(data.new_ib_num),
                labelShow: false
              }, {
                "name": this.$t('form.userType.customer') + " : " + Number(data
                    .new_client_num),
                "value": Number(data.new_client_num),
                labelShow: false
              }]
            }]
          };
          this.chartData = JSON.parse(JSON.stringify(chart))
          this.opts.subtitle.name = Number(data.new_ib_num) + Number(data.new_client_num)
          this.registeredNumberOfUsers = Number(data.new_ib_num) + Number(data.new_client_num)
        }
      },
      async getDynamicSummary() {
        const res = await getDynamicSummary({
          power:this.power,
          power_id:this.power_id,
          time_start: this.timeRange[0],
          time_end: this.timeRange[1]
        });
        if (res && res.code === 0) {
          let data = res.data;
          this.goldInUserNum = Number(data.gold_in_user_num)
          this.tradeUserNum = Number(data.trade_user_num)
          this.depositAmount = Number(data.mt_gold_in_amount)
          this.withdrawalAmount = Number(data.mt_gold_out_amount)
          this.agencyCommission = Number(data.receive_rebate_amount)
          this.commissionWithdrawal = Number(data.crm_gold_out_amount)
          this.lotVolume = Number(data.trades_volume)
          this.tradingProfitAndLoss = Number(data.trades_profit)
        }
      },
      async getSubordinate() {
        const res = await getSubordinate({
          qcc_fuzzy_search:this.qcc_fuzzy_search
        });
        if (res && res.code === 0) {
          this.subordinateList = res.data
        }
      },
      showUserModal() {
        this.getSubordinate()
        this.$refs.popup.open()
      },
			showtimeRange() {
				this.$refs.timeRange.show();
			},
			skipSell(status) {
				uni.redirectTo({
					url: '/pages/customer/sell/index?status=' + status
				});
			}
		},
		created() {
			this.handleDaterangeChange();
			this.statSaleLeadData();
		},
		components: {
      UniDataSelect,
			QiunDataCharts,
		},
		onShow() {
			this.showNav = true
		},
		onHide() {
			this.showNav = false
		}
	};
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>