<template>
<div class="app-container home">
    <kyc-tip-bar v-model:status="kycStatus" />
    <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
    <div class="page-content">
        <div class="title-bar">
        <span class="title">{{ t('partner.pageTitle') }}</span>
      </div>
      <div class="mt-tabs">
        <div class="tab-items">
          <div v-if="userInfo.user_type == 1 && permissionStore.powerList.includes('ibStat')" :class="['tab-item', { 'tab-item-active': activeTabName === 'overview'}]" @click="tabClick('overview')">{{ t('partner.overview') }}</div>
          <div v-if="userInfo.user_type == 1" :class="['tab-item', { 'tab-item-active': activeTabName === 'myCustomer'}]" @click="tabClick('myCustomer')">{{ t('partner.myCustomer') }}</div>
<!--          <div v-if="userInfo.user_type == 1" :class="['tab-item', { 'tab-item-active': activeTabName === 'myIb'}]" @click="tabClick('myIb')">{{ t('partner.myIb') }}</div>-->
          <div v-if="permissionStore.powerList.includes('share')" :class="['tab-item', { 'tab-item-active': activeTabName === 'promotion'}]" @click="tabClick('promotion')">{{ t('partner.promotion') }}</div>
          <div :class="['tab-item', { 'tab-item-active': activeTabName === 'report'}]" @click="tabClick('report')">{{ t('partner.report') }}</div>
        </div>
        <div class="tab-active-bar"></div>
      </div>
      <!-- 概览 -->
      <div class="tab-pannel" v-show="activeTabName === 'overview'">
          <!-- 卡片区域 -->
          <div class="card-wrap">
            <div class="normal-card" v-htfx-loading="overviewLoading">
                <el-form autocapitalize="off" :inline="true" size="large" >
                    <el-form-item>
                        <el-radio-group v-model="timeRange" @change="handleTimeRange" style="margin-right: 40px;">
                            <el-radio style="margin-right: 20px;" label="today">{{ t('common.today') }}</el-radio>
                            <el-radio style="margin-right: 20px;" label="recentWeek">{{ t('common.recentWeek') }}</el-radio>
                            <el-radio style="margin-right: 20px;" label="recentMonth">{{ t('common.recentMonth') }}</el-radio>
                            <el-radio style="margin-right: 20px;" label="recent3Month">{{ t('common.recent3Month') }}</el-radio>
                        </el-radio-group>
                        <el-date-picker
                            v-model="ibDateRange" size="large" style="width: 270px;"
                            value-format="YYYY-MM-DD"
                            type="daterange"
                            range-separator="-"
                            :start-placeholder="t('form.applyTime.start')"
                            :end-placeholder="t('form.applyTime.end')"
                            :clearable="false"
                            :shortcuts="shortcuts" @change="handleDateRange"
                        ></el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="cards">
                    <el-space wrap style="width: 100%" >
                        <el-card class="overview" :class="{'active-card': overview == 'profit'}" @click="changeOverview('profit')" >
                            <div>{{ t('partner.profit') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.my_yk) }}</span>
                        </el-card>
                        <el-card style="width: 210px;height: 98px;" >
                            <div>{{ t('partner.equity') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.my_jz) }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'fund'}" @click="changeOverview('fund')" >
                            <div>{{ t('partner.fund') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.yj) }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'goldin'}" @click="changeOverview('goldin')" >
                            <div>{{ t('partner.goldin') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.rj) }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'goldout'}" @click="changeOverview('goldout')" >
                            <div>{{ t('partner.goldout') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.mt_cj) }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'fundout'}" @click="changeOverview('fundout')" >
                            <div>{{ t('partner.fundout') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.yj_cj) }}</span>
                        </el-card>
                        <el-card class="overview" >
                            <div>{{ t('partner.equity_fen') }}</div>
                            <span>{{ ibPhaseSummarizing.mf_jz }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'lot'}" @click="changeOverview('lot')" >
                            <div>{{ t('partner.lot') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.my_jyl) }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'lot_fen'}" @click="changeOverview('lot_fen')" >
                            <div>{{ t('partner.lot_fen') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.mf_jyl) }}</span>
                        </el-card>
                        <el-card class="overview" :class="{'active-card': overview == 'profit_fen'}" @click="changeOverview('profit_fen')" >
                            <div>{{ t('partner.profit_fen') }}</div>
                            <span>{{ returnFloat3(ibPhaseSummarizing.mf_yk) }}</span>
                        </el-card>
                    </el-space>
                </div>
            </div>
            <el-card class="ib-card" v-if="userInfo.user_type == 1" v-htfx-loading="fundLoading" >
                <div class="item-row">
                    <div style="font-weight: 700;">{{ t('partner.fundBalance') }}</div>
                    <div>
                        <span style="font-size: 36px;font-weight: 700;">{{ returnFloat(ibFund.amount) }}</span>
                        <span style="font-size: 18px;">USD</span>
                    </div>
                </div>
                <div class="item-row">
                    <div style="font-weight: 400;font-size: 16px;">{{ t('partner.totalAmount') }}</div>
                    <div>
                        <span>{{ returnFloat(ibFund.totalAmount) }}</span>
                        <span>USD</span>
                    </div>
                </div>
                <div class="item-row">
                    <div style="font-weight: 400;font-size: 16px;">{{ t('partner.fundOut') }}</div>
                    <div>
                        <span>{{ returnFloat(ibFund.fundOut) }}</span>
                        <span>USD</span>
                    </div>
                </div>
                <div class="item-row">
                    <div style="font-weight: 400;font-size: 16px;">{{ t('partner.fundTransfer') }}</div>
                    <div>
                        <span>{{ returnFloat(ibFund.fundTransfer) }}</span>
                        <span>USD</span>
                    </div>
                </div>
                <div class="item-btn-row">
                    <router-link to="/capital/fundout" v-slot="{ navigate }" >
                        <el-button type="primary" class="cus-btn" @click="navigate" >{{ t('home.goldout') }}</el-button>
                    </router-link>
                    <router-link to="/capital/fundTransfer" v-slot="{ navigate }" >
                        <el-button type="primary" class="cus-btn dark-btn" @click="navigate" >{{ t('home.transfer') }}</el-button>
                    </router-link>
                </div>
            </el-card>
          </div>
          <!-- 图表区域 -->
          <div style="font-size: 20px;font-weight: 700;margin-top: 60px;position: relative;width: 100%;">
            <div>{{ t('partner.dataStatistics') }}</div>
            <div style="position: absolute;bottom: 0;right: 100px;">
                <svg-icon v-if="chartType == 'line'" icon-class="chatsLine1" style="width: 20px;height: 20px;margin-right: 22px;" />
                <svg-icon v-else icon-class="chatsLine2" style="width: 20px;height: 20px;cursor: pointer;margin-right: 22px;" @click="switchChart('line')" />
                <svg-icon v-if="chartType == 'bar'" icon-class="chatsBar2" style="width: 20px;height: 20px;margin-right: 22px;" />
                <svg-icon v-else icon-class="chatsBar1" style="width: 20px;height: 20px;cursor: pointer;margin-right: 22px;" @click="switchChart('bar')" />
            </div>
          </div>
          <div class="chart-wrap">
            <div id="chart"></div>
          </div>
      </div>
      <!-- 我的客户 -->
      <div class="tab-pannel" v-if="activeTabName === 'myCustomer'" >
        <div style="font-size: 24px;font-weight: 700;">{{ t('partner.currentCustomer') }}</div>
        <el-space wrap style="width: 100%;margin-top: 20px;" v-htfx-loading="customerLoading" size="large">
            <el-card style="width: 298px;height: 160px;position: relative;">
                <svg-icon icon-class="blueLine" style="position: absolute;right: 20px;top: 35px;width: 150px;height: 90px;" />
                <div style="font-size: 20px;font-weight: 400;margin-top: 15px;margin-left: 10px;">{{ t('partner.zs_ib_num') }}</div>
                <span style="font-size: 26px;font-weight: 700;color: #25BAE4;position: absolute;bottom: 40px;left: 30px;">{{ customerNum.zs_ib_num + t('common.people') }}</span>
            </el-card>
            <el-card style="width: 298px;height: 160px;position: relative;">
                <svg-icon icon-class="darkLine" style="position: absolute;right: 20px;top: 35px;width: 150px;height: 90px;" />
                <div style="font-size: 20px;font-weight: 400;margin-top: 15px;margin-left: 10px;">{{ t('partner.zs_kh_num') }}</div>
                <span style="font-size: 26px;font-weight: 700;color: #384D83;position: absolute;bottom: 40px;left: 30px;">{{ customerNum.zs_kh_num + t('common.people') }}</span>
            </el-card>
            <el-card style="width: 298px;height: 160px;position: relative;">
                <svg-icon icon-class="greenLine" style="position: absolute;right: 20px;top: 35px;width: 150px;height: 90px;" />
                <div style="font-size: 20px;font-weight: 400;margin-top: 15px;margin-left: 10px;">{{ t('partner.jj_kh_num') }}</div>
                <span style="font-size: 26px;font-weight: 700;color: #ABCF37;position: absolute;bottom: 40px;left: 30px;">{{ customerNum.jj_kh_num + t('common.people') }}</span>
            </el-card>
            <div style="height: 160px;display: flex;flex-direction: column;justify-content: flex-end;">
                <div class="zs_ib_num">{{ t('partner.zs_ib_num') + customerNum.zs_ib_num + t('common.people') }}</div>
                <div class="zs_kh_num">{{ t('partner.zs_kh_num') + customerNum.zs_kh_num + t('common.people') }}</div>
                <div class="jj_kh_num">{{ t('partner.jj_kh_num') + customerNum.jj_kh_num + t('common.people') }}</div>
            </div>
        </el-space>
        <el-form style="margin-top: 20px;" :model="queryMyCustomerParams" autocapitalize="off" :inline="true" label-position="top" size="large" >
          <el-form-item :label="t('form.fullName.label')" prop="name">
            <el-input
                v-model="queryMyCustomerParams.name"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('form.email.label')" prop="email">
            <el-input
                v-model="queryMyCustomerParams.email"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('capital.mt4_login')" prop="mt4_login">
            <el-input
                v-model="queryMyCustomerParams.mt4_login"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('form.superior.label')" prop="superior">
            <el-input
                v-model="queryMyCustomerParams.superior"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('form.createTime.label')" >
            <el-date-picker
                v-model="myCustomerDateRange" size="large" style="width: 270px;"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                :start-placeholder="t('form.applyTime.start')"
                :end-placeholder="t('form.applyTime.end')"
                :shortcuts="shortcuts"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="&emsp;">
            <el-button type="primary" icon="Search" @click="handleQuery">{{ t('form.search') }}</el-button>
            <el-button :loading="exportLoading" icon="Download" @click="handleExport">{{ t('form.export') }}
                <template #loading>
                    <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                </template>
            </el-button>
            <el-button v-if="permissionStore.powerList.includes('hierarchySet')"  class="dark-btn" icon="Setting" @click="showRebateSetting = true">{{ t('partner.fundSetting') }}</el-button>
            <el-button icon="User" plain type="success" @click="showIbtree = true">{{ t('partner.ibTree') }}</el-button>
          </el-form-item>
        </el-form>
        <el-dialog v-model="showRebateSetting" destroy-on-close :title="t('partner.fundSetting')" width="1280" align-center class="rs" >
            <rebate-setting />
        </el-dialog>
        <el-dialog v-model="showIbtree" destroy-on-close :title="t('partner.ibTree')" width="1280" align-center class="rs" >
            <ibtree />
        </el-dialog>
        <el-table v-htfx-loading="loadingMyCustomer" :data="myCustomerList" style="width: 100%;">
          <el-table-column v-for="(item,index) in myCustomerCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'140'" >
            <template #default="scope">
              <template v-if="item.field == 'mt4_login_arr'" >
                <div v-if="scope.row[item.field]">
                    <el-link @click="openMtDetail(scope.row['mt4_server_arr'].split(',')[0], scope.row[item.field].split(',')[0])" >{{ scope.row[item.field].split(',')[0] }}</el-link>
                    <el-popover
                        v-if="scope.row[item.field].split(',').length > 1"
                        placement="bottom"
                        :width="140"
                        trigger="click"
                    >
                        <div style="display: flex;flex-direction: column;row-gap: 4px;">
                            <div v-for="(item, index) in scope.row[item.field].split(',')" :key="index" >
                                <el-link @click="openMtDetail(scope.row['mt4_server_arr'].split(',')[index], item)" >{{ item }}</el-link>
                            </div>
                        </div>
                        <template #reference>
                            <el-icon style="margin-left: 6px;cursor: pointer;"><MoreFilled /></el-icon>
                        </template>
                    </el-popover>
                </div>
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="myCustomerTotal > 0" :total="myCustomerTotal" :autoScroll="false"
            v-model:page="queryMyCustomerParams.curr_page"
            v-model:limit="queryMyCustomerParams.page_size"
            @pagination="loadMyCustomer" />
        <mt-detail v-model:show="showMtDetail" :mtServer="detailServer" :mtLogin="detailLogin" />
      </div>
      <!-- 我的代理 -->
      <div class="tab-pannel" v-show="activeTabName === 'myIb'" >
        <el-form style="margin-top: 20px;" :model="queryMyIbParams" autocapitalize="off" :inline="true" label-position="top" size="large" >
          <el-form-item :label="t('form.fullName.label')" prop="name">
            <el-input
                v-model="queryMyIbParams.name"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('form.email.label')" prop="email">
            <el-input
                v-model="queryMyIbParams.email"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('form.superior.label')" prop="superior">
            <el-input
                v-model="queryMyIbParams.superior"
               clearable
               style="width: 270px"
            />
          </el-form-item>
          <el-form-item :label="t('form.createTime.label')" >
            <el-date-picker
                v-model="myIbDateRange" size="large" style="width: 270px;"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                :start-placeholder="t('form.applyTime.start')"
                :end-placeholder="t('form.applyTime.end')"
                :shortcuts="shortcuts"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="&emsp;">
            <el-button type="primary" icon="Search" @click="handleQueryIb">{{ t('form.search') }}</el-button>
            <!-- <el-button icon="Download" @click="">{{ t('form.export') }}</el-button> -->
          </el-form-item>
        </el-form>
        <el-table v-htfx-loading="loadingMyIb" :data="myIbList" style="width: 100%;">
          <el-table-column v-for="(item,index) in myIbCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'140'" >
            <template #default="scope">
              <template v-if="item.field == 'mt4_login_arr'" >
                <div v-if="scope.row[item.field]">
                    <span>{{ scope.row[item.field].split(',')[0] }}</span>
                    <el-popover
                        v-if="scope.row[item.field].split(',').length > 1"
                        placement="bottom"
                        :width="140"
                        trigger="click"
                    >
                        <div>
                            <div v-for="(item, index) in scope.row[item.field].split(',')" :key="index" >{{ item }}</div>
                        </div>
                        <template #reference>
                            <el-icon style="margin-left: 6px;cursor: pointer;"><MoreFilled /></el-icon>
                        </template>
                    </el-popover>
                </div>
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="myIbTotal > 0" :total="myIbTotal" :autoScroll="false"
            v-model:page="queryMyIbParams.curr_page"
            v-model:limit="queryMyIbParams.page_size"
            @pagination="loadMyIb" />
      </div>
      <!-- 推广链接 -->
      <div class="tab-pannel" v-show="activeTabName === 'promotion'" >
        <div style="min-width: 100%;min-height: 364px;" v-htfx-loading="shareLoading">
            <el-space wrap style="width: 100%;margin-bottom: 50px;" :size="30">
                <div class="share-card" v-for="(item, index) in shareList" :key="index" >
                    <el-icon style="position: absolute;top: 22px;right: 25px;cursor: pointer;" size="24" color="rgba(196, 196, 196, 1)" @click="removeShareCode(item)" ><Close /></el-icon>
                    <div class="share-title">{{ item.name }}</div>
                    <div class="qr-bg">
                        <div class="img-wrap">
                            <vue-qrcode v-if="item.share_code" :value="getShareUrl(item.share_code)" :width="138" :margin="1" />
                        </div>
                    </div>
                    <div class="share-link" style="margin-bottom: 0;">
                        <span>{{ getShareUrl(item.share_code) }}</span>
                        <el-button class="dark-btn" style="margin-left: 14px;" size="small" icon="CopyDocument" type="primary" @click="copy(getShareUrl(item.share_code))" >{{ t('form.copy') }}</el-button>
                    </div>
                    <div class="share-link" >
                        <span>{{ t('share.shareCode') + ': ' + item.share_code }}</span>
                        <el-button class="dark-btn" style="margin-left: 14px;" size="small" icon="CopyDocument" type="primary" @click="copy(item.share_code)" >{{ t('form.copy') }}</el-button>
                    </div>
                    <div v-if="item.sys_share_system_id" style="display: flex;justify-content: space-between;" >
                        <el-button type="primary" size="large" style="width: 48%;" @click="openMoreShareCode(item.share_code)" >{{ t('share.downloadMore') }}</el-button>
                        <el-button type="primary" plain size="large" style="width: 45%;" @click="openDownloadShare(item)" >{{ t('share.downloadMaterial') }}</el-button>
                    </div>
                    <div v-else >
                        <el-button type="primary" size="large" style="width: 100%;" @click="openMoreShareCode(item.share_code)" >{{ t('share.downloadMore') }}</el-button>
                    </div>
                </div>
                <div class="share-card new-share" @click="openCreateShareLink(null)" >
                    <svg-icon icon-class="largePlus" style="width: 86px;height: 86px;margin-bottom: 25px;"/>
                    <div style="color: rgba(51, 51, 51, 1);font-size: 20px;font-weight: 400;user-select: none;" >{{ t('share.add') }}</div>
                </div>
            </el-space>
            <el-space wrap style="width: 100%;" :size="30">
                <div class="sys-share-card" v-for="(item, index) in sysShareList" :key="index" >
                    <el-image class="img" :src="item.img_url.split(',')[0]" fit="cover" />
                    <div style="width: 100%;height: 74px;display: flex;justify-content: center;align-items: center;user-select: none;">
                        <el-link type="primary" @click="openCreateShareLink(item)" >
                            <div style="font-size: 20px;">{{ t('share.activityLink') }}</div>
                        </el-link>
                    </div>
                </div>
            </el-space>
        </div>
        <more-share-code v-model:show="showDownloadShareCode" :sc="shareCode" />
        <download-share v-model:show="showDownloadShare" :data="sysShare" />
        <create-share-link v-model:show="showCreateShareLink" :data="sysShare" @save="handleSaveShare" />
      </div>
      <!-- 统计报表 -->
      <div class="tab-pannel" v-show="activeTabName === 'report'" >
        <div v-if="userInfo.user_type == 1">
            <el-space wrap style="width: 100%;" size="large" v-htfx-loading="reportLoading">
<!--                <el-card style="width: 260px;height: 132px;position: relative;">-->
<!--                    <svg-icon icon-class="fundIcon" class="report-icon" />-->
<!--                    <span class="report-label" >{{ t('report.totalFund') }}</span>-->
<!--                    <el-statistic class="report-amount" :value="statReport.yj" :value-style="{fontSize: '28px',fontWeight: '700',color:'#25BAE4'}" >-->
<!--                        <template #suffix>-->
<!--                            <div style="font-size: 18px;">USD</div>-->
<!--                        </template>-->
<!--                    </el-statistic>-->
<!--                </el-card>-->
                <el-card style="width: 260px;height: 132px;position: relative;">
                    <svg-icon icon-class="goldinIcon" class="report-icon" />
                    <span class="report-label" >{{ t('report.totalGoldin') }}</span>
                    <el-statistic class="report-amount" :value="statReport.rj" :value-style="{fontSize: '28px',fontWeight: '700',color:'#25BAE4'}" >
                        <template #suffix>
                            <div style="font-size: 18px;">USD</div>
                        </template>
                    </el-statistic>
                </el-card>
                <el-card style="width: 260px;height: 132px;position: relative;">
                    <svg-icon icon-class="goldoutIcon" class="report-icon" />
                    <span class="report-label" >{{ t('report.totalGoldout') }}</span>
                    <el-statistic class="report-amount" :value="statReport.mt_cj" :value-style="{fontSize: '28px',fontWeight: '700',color:'#25BAE4'}" >
                        <template #suffix>
                            <div style="font-size: 18px;">USD</div>
                        </template>
                    </el-statistic>
                </el-card>
                <el-card style="width: 260px;height: 132px;position: relative;">
                    <svg-icon icon-class="tradeIcon" class="report-icon" />
                    <span class="report-label" >{{ t('report.totalTrade') }}</span>
                    <el-statistic class="report-amount" :value="statReport.jyl" :value-style="{fontSize: '28px',fontWeight: '700',color:'#25BAE4'}" >
                    </el-statistic>
                </el-card>
                <el-card style="width: 260px;height: 132px;position: relative;">
                    <svg-icon icon-class="profitIcon" class="report-icon" />
                    <span class="report-label" >{{ t('report.profit') }}</span>
                    <el-statistic v-if="statReport.profit > 0" :precision="3" class="report-amount" :value="statReport.profit" :value-style="{fontSize: '28px',fontWeight: '700',color:'#43CF7C'}" >
                        <template #suffix>
                            <div style="font-size: 18px;">USD</div>
                        </template>
                    </el-statistic>
                    <el-statistic v-else class="report-amount" :value="statReport.profit" :value-style="{fontSize: '28px',fontWeight: '700',color:'#D43030'}" >
                        <template #suffix>
                            <div style="font-size: 18px;">USD</div>
                        </template>
                    </el-statistic>
                </el-card>
            </el-space>
        </div>
        <!-- 报表 -->
        <div style="font-size: 20px;font-weight: 700;margin-top: 30px;margin-bottom: 12px;">{{ t('partner.reportType') }}</div>
        <el-form autocapitalize="off" :inline="true" size="large" >
            <el-select v-model="currentReport" :placeholder="t('common.selectChoose')" size="large" style="width: 240px" >
                <el-option v-for="(item,index) in reportMenuList" :key="index" :label="item.name" :value="item.value" />
            </el-select>
            <el-button style="margin-left: 24px;" type="primary" icon="Filter" @click="showReportFilter = !showReportFilter" v-if="currentReport" >
                <span style="margin-right: 10px;">{{ t('common.filter') }}</span>
                <el-icon v-if="!showReportFilter" ><ArrowDown /></el-icon>
                <el-icon v-else ><ArrowUp /></el-icon>
            </el-button>
            <el-button style="margin-left: 24px;" type="primary" @click="showStructure = !showStructure" v-if="currentReport && showStructureBtn" >
                <svg-icon icon-class="structure" />
                <span style="margin-left: 8px;">{{ t('form.structure') }}</span>
            </el-button>
            <structure v-model:show="showStructure" v-model:structureValue="structureValue" v-model:structureType="structureType"
                v-if="currentReport && showStructureBtn" @ok="handleQueryReport" @clean="handleQueryReport"
                :pageDataPower="pageDataPower" :pageId="structurePageId"  />
            <report14 v-if="currentReport === 'report14' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report16 v-if="currentReport === 'report16' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report17 v-if="currentReport === 'report17' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report18 v-if="currentReport === 'report18' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report20 v-if="currentReport === 'report20' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report21 v-if="currentReport === 'report21' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report22 v-if="currentReport === 'report22' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report24 v-if="currentReport === 'report24' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report26 v-if="currentReport === 'report26' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report27 v-if="currentReport === 'report27' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report28 v-if="currentReport === 'report28' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
            <report81 v-if="currentReport === 'report81' " ref="report" :showFilter="showReportFilter" />
            <report40 v-if="currentReport === 'report40' " ref="report" :showFilter="showReportFilter" @structure="handleStructure" :structureValue="structureValue" :structureType="structureType" />
        </el-form>
      </div>
    </div>
</div>

</template>

<script setup name="Partner" >
import KycTipBar from "@/components/KycTipBar"
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import usePermissionStore from '@/store/modules/permission'
import { queryBannerList } from '@/api/common'
import { getIbFund, getPhaseSummarizing, statCustomerNum, queryMyCustomerList, queryMyAgentList, statOverviewChart } from '@/api/ib'
import { queryShareRecord, querySysShareList, delShareRecord } from '@/api/share'
import { statReportInfo } from '@/api/report'
import { serverLang } from '@/utils/i18n'
import { returnFloat, returnFloat3 } from '@/utils/htfx'
import { useLocale } from 'element-plus'
import { onMounted, onUnmounted, ref, watch, nextTick } from "vue"
import { generateShortcuts, recent3Month, today, recentWeek, recentMonth } from '@/utils/shortcutsUtils';
import RebateSetting from "./rebateSetting.vue"
import ibtree from "./ibtree.vue"
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import Structure from '@/components/Structure'
import Report14 from './report/report14.vue'
import Report16 from './report/report16.vue'
import Report17 from './report/report17.vue'
import Report18 from './report/report18.vue'
import Report20 from './report/report20.vue'
import Report21 from './report/report21.vue'
import Report22 from './report/report22.vue'
import Report24 from './report/report24.vue'
import Report26 from './report/report26.vue'
import Report27 from './report/report27.vue'
import Report28 from './report/report28.vue'
import Report40 from './report/report40.vue'
import Report81 from './report/report81.vue'
import useClipboard from "vue-clipboard3"
import VueQrcode  from 'vue-qrcode'
import MoreShareCode from './moreShareCode'
import CreateShareLink from './createShareLink'
import DownloadShare from './downloadShare'
import MtDetail from '@/components/MtDetail'

echarts.use([GridComponent, TooltipComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition]);
const { toClipboard } = useClipboard()
const option = ref(null)
let myChart = null
onMounted(() => {
  loadPageData()
  loadIbData()
})

onUnmounted(() => {
  if (myChart) {
      myChart.dispose()
  }
})

const kycStatus = ref(false)

const report = ref(null)

const { t } = useLocale()
const appStore = useAppStore()
const userStore = useUserStore()
const permissionStore = usePermissionStore()
const userInfo = ref(userStore.userInfo)
const { proxy } = getCurrentInstance();

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const activeTabName = ref(userInfo.value.user_type == 1?'overview':'promotion')

const fundLoading = ref()
const overviewLoading = ref()
const customerLoading = ref()
const reportLoading = ref()
const shareLoading = ref()
const showDownloadShareCode = ref(false)
const showCreateShareLink = ref(false)
const showDownloadShare = ref(false)

const showRebateSetting = ref(false)
const showIbtree = ref(false)

const shareList = ref([])
const sysShareList = ref([])
const shareCode = ref(null)
const sysShare = ref(null)

const statReport = ref({
    "yj": 0,
    "rj": 0,
    "mt_cj": 0,
    "jyl": 0
  })

const ibFund = ref({
    "totalAmount": 0,
    "amount": 0,
    "fundOut": 0,
    "fundTransfer": 0
  })

const overview = ref('profit')

// watch([
//     fundLoading,
//     overviewLoading,
//     customerLoading,
//     reportLoading,
//     shareLoading
// ], (n, o) => {
//     if (n.filter(v => v).length) {

//     } else {

//     }
// },
// {
//     immediate: true
// })

const currentReport = ref(null)
const showReportFilter = ref(false)
const reportMenuList = ref([])
const showStructureBtn = ref(false)
const showStructure = ref(false)
const pageDataPower = ref(null)

const structureValue = ref('')
const structureType = ref('')
const structurePageId = ref('')

const ibPhaseSummarizing = ref({
    "mf_jz": 0,
    "my_jz": 0,
    "yj": 0,
    "mf_yk": 0,
    "rj": 0,
    "zc": 0,
    "mt_cj": 0,
    "my_jyl": 0,
    "my_yk": 0,
    "mf_jyl": 0,
    "yj_cj": 0
  })

const customerNum = ref({
    "zs_ib_num": 0,
    "zs_kh_num": 0,
    "jj_kh_num": 0
  })

const shortcuts = ref(generateShortcuts(t))
const timeRange = ref('recentWeek')

const data = reactive({
    queryIbParams: {
        qcc_language: serverLang(),
        time_start: undefined,
        time_end: undefined
    },
    ibDateRange: recentWeek(),
    myCustomerDateRange: null,
    myIbDateRange: null,
    queryMyCustomerParams: {
        curr_page: 1,
        page_size: 10,
        qcc_language: serverLang(),
        name: undefined,
        email: undefined,
        superior: undefined,
        create_time_start: undefined,
        create_time_end: undefined,
        mt4_login: undefined
    },
    queryMyIbParams: {
        curr_page: 1,
        page_size: 10,
        qcc_language: serverLang(),
        name: undefined,
        email: undefined,
        superior: undefined,
        create_time_start: undefined,
        create_time_end: undefined
    }
})

const { queryIbParams, ibDateRange, myCustomerDateRange, myIbDateRange, queryMyCustomerParams, queryMyIbParams } = toRefs(data);

const myCustomerTotal = ref(0)
const myIbTotal = ref(0)
const myCustomerList = ref([])
const myIbList = ref([])
const loadingMyCustomer = ref(false)
const loadingMyIb = ref(false)
const myCustomerCols = ref([])
const myIbCols = ref([])
const chartType = ref('line')

function handleTimeRange(value) {
    if (value === 'today') {
        ibDateRange.value = today()
    } else if (value === 'recentWeek') {
        ibDateRange.value = recentWeek()
    } else if (value === 'recentMonth') {
        ibDateRange.value = recentMonth()
    } else if (value === 'recent3Month') {
        ibDateRange.value = recent3Month()
    }
    loadOverview()
}

function handleDateRange() {
    timeRange.value = null
    loadOverview()
}

function tabClick(data) {
  if (data == activeTabName.value) {
    return
  }
  activeTabName.value = data
  if (data == 'overview') {
    loadIbData()
  }
  else if (data == 'myCustomer') {
    customerLoading.value = true
    statCustomerNum().then(resp => {
        if (resp.data) {
            customerNum.value = resp.data
        }
        customerLoading.value = false
    }).catch(() => {customerLoading.value = false})
    loadMyCustomer()
  }
  else if (data == 'myIb') {
    loadMyIb()
  }
  else if (data == 'promotion') {
    loadShare()
  }
  else if (data == 'report') {
    loadReport()
  }
}

function closeBanner() {
  showBanner.value = false
  appStore.setShowBanner('0')
}

function loadBannerList() {
  queryBannerList({
    qcc_language: serverLang(),
    position: 1,
    type: 2
  }).then(resp => {
    if (resp.data) {
      bannerList.value = resp.data
    }
  })
}

function loadIbData() {
    fundLoading.value = true
    if (userInfo.value.user_type == 1) {
        getIbFund().then(resp => {
            if (resp.data) {
                ibFund.value = resp.data
            }
            fundLoading.value = false
        }).catch(() => {fundLoading.value = false})
        loadOverview()
    }
}

function loadOverview() {
    if (!ibDateRange.value || !ibDateRange.value.length) {
        return
    }
    if (ibDateRange.value && ibDateRange.value.length) {
        queryIbParams.value.time_start = ibDateRange.value[0]
        queryIbParams.value.time_end = ibDateRange.value[1]
    } else {
        queryIbParams.value.time_start = undefined
        queryIbParams.value.time_end = undefined
    }
    overviewLoading.value = true
    getPhaseSummarizing(queryIbParams.value).then(resp => {
        if (resp.data) {
            ibPhaseSummarizing.value = resp.data
        }
        overviewLoading.value = false
    }).catch(()=>{
        overviewLoading.value = false
    })
    loadChart()
}

function changeOverview(data) {
    overview.value = data
    loadChart()
}

function loadChart() {
    const type = overview.value
    let typeNum = null
    if (type == 'profit_fen') {
        typeNum = '1';
    } else if (type == 'fund') {
        typeNum = '2';
    } else if (type == 'goldin') {
        typeNum = '3';
    } else if (type == 'goldout') {
        typeNum = '4';
    } else if (type == 'new_crm') {
        typeNum = '5';
    } else if (type == 'lot') {
        typeNum = '6';
    } else if (type == 'lot_fen') {
        typeNum = '7';
    } else if (type == 'profit') {
        typeNum = '8';
    } else if (type == 'fundout') {
        typeNum = '9';
    }
    if (typeNum) {
        option.value = null
        let params = {
            type: typeNum
        }
        if (ibDateRange.value && ibDateRange.value.length) {
            params.time_start = ibDateRange.value[0]
            params.time_end = ibDateRange.value[1]
        } else {
            params.time_start = undefined
            params.time_end = undefined
        }
        statOverviewChart(params).then(resp => {
            if (resp.data) {
                let color;
                const max = Math.max(...resp.data.map(i => i.amount));
                const min = Math.min(...resp.data.map(i => i.amount));
                if (max >= 0 && min >= 0) {
                    color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 1,
                        color: "rgba(51, 130, 246, 0)"
                    },
                    {
                        offset: 0,
                        color: "rgba(37, 192, 229, 1)"
                    }
                    ]);
                } else if (max < 0 && min < 0) {
                    color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(51, 130, 246, 0)"
                    },
                    {
                        offset: 1,
                        color: "rgba(37, 192, 229, 1)"
                    }
                    ]);
                } else {
                    const diff = max - min;
                    let mid = 0.5;
                    if (diff) {
                    mid = max / diff;
                    }
                    color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(37, 192, 229, 1)"
                    },
                    {
                        offset: mid,
                        color: "rgba(51, 130, 246, 0)"
                    },
                    {
                        offset: 1,
                        color: "rgba(37, 192, 229, 1)"
                    }
                    ]);
                }

                option.value = {
                    color: ["rgba(41, 187, 228, 1)"],
                    tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: resp.data.map(i => i.date)
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            data: resp.data.map(i => i.amount),
                            type: chartType.value,
                            smooth: true,
                            areaStyle: { color: color }
                        }
                    ]
                }
            }
        })
    }
}

function switchChart(type) {
    chartType.value = type
    loadChart()
}

watch(option, (n, o) => {
    if (n) {
        if (!myChart) {
            var chartDom = document.getElementById('chart');
            myChart = echarts.init(chartDom);
        }
        myChart.setOption(n)
    } else {
        if (myChart) {
            myChart.clear()
        }
    }
}, {
    immediate: true,
    deep: true
})

function loadMyCustomer() {
    if (myCustomerDateRange.value && myCustomerDateRange.value.length) {
        queryMyCustomerParams.value.create_time_start = myCustomerDateRange.value[0]
        queryMyCustomerParams.value.create_time_end = myCustomerDateRange.value[1]
    } else {
        queryMyCustomerParams.value.create_time_start = undefined
        queryMyCustomerParams.value.create_time_end = undefined
    }
    loadingMyCustomer.value = true
    queryMyAgentList(queryMyCustomerParams.value).then(resp => {
        if (resp.data) {
            myCustomerCols.value = resp.data.columns
            myCustomerList.value = resp.data.records
            myCustomerTotal.value = resp.data.totalRecords
        }
        loadingMyCustomer.value = false
    })
}

function loadMyIb() {
    if (myIbDateRange.value && myIbDateRange.value.length) {
        queryMyIbParams.value.create_time_start = myIbDateRange.value[0]
        queryMyIbParams.value.create_time_end = myIbDateRange.value[1]
    } else {
        queryMyIbParams.value.create_time_start = undefined
        queryMyIbParams.value.create_time_end = undefined
    }
    loadingMyIb.value = true
    queryMyAgentList(queryMyIbParams.value).then(resp => {
        if (resp.data) {
            myIbCols.value = resp.data.columns
            myIbList.value = resp.data.records
            myIbTotal.value = resp.data.totalRecords
        }
        loadingMyIb.value = false
    })
}

function handleQuery() {
    if (myCustomerDateRange.value && myCustomerDateRange.value.length) {
        queryMyCustomerParams.value.create_time_start = myCustomerDateRange.value[0]
        queryMyCustomerParams.value.create_time_end = myCustomerDateRange.value[1]
    } else {
        queryMyCustomerParams.value.create_time_start = undefined
        queryMyCustomerParams.value.create_time_end = undefined
    }
    queryMyCustomerParams.value.curr_page = 1;
    loadingMyCustomer.value = true
    queryMyAgentList(queryMyCustomerParams.value).then(resp => {
        if (resp.data) {
            myCustomerCols.value = resp.data.columns
            myCustomerList.value = resp.data.records
            myCustomerTotal.value = resp.data.totalRecords
        }
        loadingMyCustomer.value = false
    })
}

const exportLoading = ref(false)
function handleExport() {
  exportLoading.value = true
  proxy.download("/app/partners/queryMyAgentListExport", {
    ...queryMyCustomerParams.value
  }, `export.xlsx`,null , () => {
    exportLoading.value = false
  });
}

function handleQueryIb() {
    if (myIbDateRange.value && myIbDateRange.value.length) {
        queryMyIbParams.value.create_time_start = myIbDateRange.value[0]
        queryMyIbParams.value.create_time_end = myIbDateRange.value[1]
    } else {
        queryMyIbParams.value.create_time_start = undefined
        queryMyIbParams.value.create_time_end = undefined
    }
    queryMyIbParams.value.curr_page = 1;
    loadingMyIb.value = true
    queryMyAgentList(queryMyIbParams.value).then(resp => {
        if (resp.data) {
            myIbCols.value = resp.data.columns
            myIbList.value = resp.data.records
            myIbTotal.value = resp.data.totalRecords
        }
        loadingMyIb.value = false
    })
}

function loadReportList() {
    const list = [
        { name: t('report.614'), value: 'report14' },
        { name: t('report.616'), value: 'report16' },
        { name: t('report.617'), value: 'report17' },
        { name: t('report.618'), value: 'report18' },
        { name: t('report.620'), value: 'report20' },
        { name: t('report.621'), value: 'report21' },
        { name: t('report.622'), value: 'report22' },
        { name: t('report.624'), value: 'report24' },
        { name: t('report.626'), value: 'report26' },
        { name: t('report.627'), value: 'report27' },
        { name: t('report.628'), value: 'report28' },
        { name: t('report.681'), value: 'report81' },
        { name: t('report.640'), value: 'report40' }
    ]
    reportMenuList.value = permissionStore.powerList ? list.filter(v => permissionStore.powerList.includes(v.value)) : []
}

function loadReport() {
    reportLoading.value = true
    statReportInfo().then(resp => {
        if (resp.data) {
            statReport.value = resp.data
        }
        reportLoading.value = false
    }).catch(() => {
        reportLoading.value = false
    })
}

function loadShare() {
    shareLoading.value = true
    queryShareRecord().then(resp => {
        if (resp.data) {
            shareList.value = resp.data
        }
        shareLoading.value = false
    }).catch(() => {
        shareLoading.value = false
    })
    querySysShareList().then(resp => {
        sysShareList.value = resp.data
    })
}

function getShareUrl(sc) {
    let domain = window.location.hostname
    return 'https://' + domain + '/api/promotion/' + sc
}

const copy = async (value) => {
  try {
    await toClipboard(value);
  } catch (e) {
    console.error(e);
  }
}

function openMoreShareCode(sc) {
    shareCode.value = sc
    showDownloadShareCode.value = true
}

function openCreateShareLink(obj) {
    sysShare.value = obj
    showCreateShareLink.value = true
}

function openDownloadShare(obj) {
    sysShare.value = obj
    showDownloadShare.value = true
}

function handleSaveShare(obj) {
    window.showTip({
        title: t('share.saveSuccess'),
        status: 'success'
    })
    loadShare()
}

function removeShareCode(item) {
    openMsg({
        title: t('share.removeShareLink'),
        width: '600',
        status: 'warning',
        btn: {
            cancel: {
                text: t('common.cancelText')
            },
            ok: {
                text: t('common.okText')
            }
        }
    }).then(() => {
        delShareRecord({id: item.id}).then(resp => {
            loadShare()
            window.showTip({
                title: t('common.success.action'),
                status: 'success'
            })
        })
    }).catch(()=> {})
}

const showMtDetail = ref(false)
const detailServer = ref(null)
const detailLogin = ref(null)

function openMtDetail(mtServer, mtLogin) {
    detailServer.value = mtServer
    detailLogin.value = mtLogin
    showMtDetail.value = true
}

function handleStructure(data) {
    pageDataPower.value = data.page_data_power
    structurePageId.value = data.pageId
    showStructureBtn.value = data.show
}

function handleQueryReport() {
    nextTick(() => {
        if (report.value) {
            report.value.handleQuery()
        }
    })
}


function loadPageData() {
  loadBannerList();
  loadReportList()
}
</script>

<style lang="scss" scoped>
.banner-bar {
  margin-bottom: 5px;
}

.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .title-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;

    .title {
      font-size: 34px;
      font-weight: 700;
    }
  }
}


.mt-tabs {
  overflow-x: auto;
  width: 100%;
  .tab-items {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    height: 40px;
    color: rgba(102, 102, 102, 1);
    user-select: none;

    .tab-item {
      padding: 0 50px;
      min-width: 170px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      white-space: nowrap;
    }

    .tab-item-active {
      color: rgba(51, 51, 51, 1);
      font-weight: 700;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: -4px;
        height: 4px;
        width: 100%;
        background-color: rgba(51, 51, 51, 1);
      }
    }
  }

  .tab-active-bar {
    width: 100%;
    height: 4px;
    border-bottom: 1px solid rgba(236, 236, 236, 1);
  }
}

.tab-pannel {
    width: 100%;
    margin-top: 20px;
}

.card-wrap {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;

    .normal-card {
        flex-grow: 1;

        .cards {
            display: flex;
            flex-wrap: wrap;

            :deep(.el-card__body) {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;

                div {
                    font-size: 14px;
                    font-weight: 400;
                    color: #777777;
                }

                span {
                    font-size: 22px;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }
    }

    .overview {
        width: 210px;
        height: 98px;
        cursor: pointer;
        
        &:hover > :deep(.el-card__body) * {
            color: var(--el-color-primary) !important;
        }
    }

    .active-card {
        & > :deep(.el-card__body) * {
            color: var(--el-color-primary) !important;
        }
    }

    .ib-card {
        flex-shrink: 0;
        flex-grow: 0;
        width: 510px;
        height: 266px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;

        :deep(.el-card__body) {
            padding: 24px 44px !important;
        }

        .item-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            font-weight: 500;
            color: #0F3675;
            margin-bottom: 20px;
        }

        .item-btn-row {
            display: flex;
            justify-content: space-between;

            a {
                width: 45%;
                .el-button {
                    width: 100%;
                }
            }
        }
    }
}

.zs_ib_num,.zs_kh_num,.jj_kh_num {
    color: #777777;
    font-size: 17px;
    font-weight: 400;
    display: flex;
    align-items: center;
    line-height: 17px;
    margin-top: 12px;
    margin-bottom: 4px;
}

.zs_ib_num::before {
    content: '';
    background-color: #25BAE4;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.zs_kh_num::before {
    content: '';
    background-color: #384D83;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.jj_kh_num::before {
    content: '';
    background-color: #ABCF37;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}
.share-card {
    width: 510px;
    height: 364px;
    position: relative;
    padding: 17px 25px;
    box-shadow: 0px 2px 17px  rgba(0, 0, 0, 0.09);
    display: flex;
    flex-direction: column;
    position: relative;

    .share-title {
        text-align: center;
        margin: 10px 0 10px;
        font-size: 24px;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
    }

    .qr-bg {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(146, 219, 237, 1) 100%);
        padding: 6px;

        .img-wrap {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
    }

    .share-link {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        margin-bottom: auto;
        font-size: 16px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
    }
}

.new-share {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.sys-share-card {
    width: 510px;
    height: 264px;
    position: relative;
    box-shadow: 0px 2px 17px  rgba(0, 0, 0, 0.09);

    .img {
        width: 100%;
        height: 190px;
        object-fit: cover;
        box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
    }
}
</style>
<style lang="scss">
.rs .el-dialog__body {
    padding-top: 5px !important;
}

.chart-wrap {
    width: 100%;
    padding-top: 27%;
    height: 0;
    position: relative;
}

#chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.report-icon {
    position: absolute;
    width: 38px;
    height: 38px;
    right: 15px;
}

.report-label {
    position: absolute;
    top: 25px;
    font-size: 18px;
    font-weight: 700;
    width: 200px;
}

.report-amount {
    position: absolute;
    bottom: 20px;
}
</style>