<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="dataScreen-header">
        <div class="header-lf">
          <span class="header-screening" @click="router.push(HOME_URL)">首页</span>
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>不良资产综合管理平台</span>
          </div>
        </div>
        <div class="header-ri">
          <span class="header-time">当前时间：{{ time }}</span>
        </div>
      </div>
      <div class="dataScreen-Number flex justify-between">
        <div class="number-box">
          <p class="number-value text-white">{{ numberFormat(staticNumber.caseNum) }}</p>
          <p class="number-title text-lg">案件总数</p>
        </div>
        <div class="number-box">
          <p class="number-value text-white">{{ numberFormat(staticNumber.borrowerNum) }}</p>
          <p class="number-title text-lg">案件人数</p>
        </div>
        <div class="number-box">
          <p class="number-value text-white">{{ numberFormat(staticNumber.amount) }}</p>
          <p class="number-title text-lg">案件总额</p>
        </div>
        <div class="number-box">
          <p class="number-value text-white">{{ numberFormat(staticNumber.sumRepayTotal) }}</p>
          <p class="number-title text-lg">回款金额</p>
        </div>
        <div class="number-box">
          <p class="number-value text-white">{{ staticNumber.rate?.toFixed(2) }}%</p>
          <p class="number-title text-lg">回款率</p>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="dataScreen-lf">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <img src="./images/baohu.png" alt="" style="height: 35px" />
              三级等保安全监测
            </div>
            <div class="dataScreen-main-chart">
              <AgeRatioChart :isAdmin="isAdmin" :tenantId="tenantId" />
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title"> 数据安全防护 </div>
            <div class="dataScreen-main-chart">
              <RealTimeAccessChart :isAdmin="isAdmin" :tenantId="tenantId" />
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title"> 客户注册数据 </div>
            <div class="dataScreen-main-chart">
              <PlatformSourceChart :isAdmin="isAdmin" :tenantId="tenantId" />
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="dataScreen-map" v-if="isAdmin">
            <!-- <div class="dataScreen-map-title">调解中心分布点</div> -->
            <ChinaMapChart />
            <div class="linebox">
              <img src="./images/lines1.png" alt="" class="lines1" />
              <img src="./images/xuan.png" alt="" class="lines3" />
            </div>
            <div class="qiu"> </div>
            <div class="bg2">
              <img src="./images/animation.svg" alt="" srcset="" />
            </div>
          </div>
          <div class="dataScreen-map" v-else>
            <MaleFemaleRatioChart :tenantId="tenantId" />
          </div>
          <div class="dataScreen-cb">
            <div class="absolute top-1 right-40 flex my-select items-center" v-if="isAdmin">
              <div style="width: 95px; margin-right: 5px"> 调解中心 </div>
              <el-select v-model="tenant">
                <el-option
                  v-for="item in Tenantlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="tabs flex">
              <div
                class="tab-item"
                @click="dayActiveName = '日'"
                :class="{ active: dayActiveName === '日' }"
                >日</div
              >
              <div
                class="tab-item"
                @click="dayActiveName = '月'"
                :class="{ active: dayActiveName === '月' }"
                >月</div
              >
            </div>
            <div class="dataScreen-main-chart" style="height: 100%">
              <OverNext30Chart :dayActiveName="dayActiveName" :tenant="tenant" />
            </div>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title"> 产品回款率 </div>
            <div class="dataScreen-main-chart">
              <HotPlateChart :isAdmin="isAdmin" :tenantId="tenantId" />
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title"> {{ isAdmin ? '调解中心' : 'CPE' }}回款金额 </div>
            <div class="dataScreen-main-chart">
              <AnnualUseChart :isAdmin="isAdmin" :tenantId="tenantId" />
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title"> 调解中心跟进完成率 </div>
            <div class="dataScreen-main-chart">
              <computerRateChart :isAdmin="isAdmin" :tenantId="tenantId" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="dataScreen">
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import { HOME_URL } from '@/config';
  import { getTenantPage } from '@/api/tenant';
  import { useRoute } from 'vue-router';
  import Decimal from 'decimal.js';
  import { computed } from 'vue';
  import { useRouter } from 'vue-router';
  import AgeRatioChart from './components/AgeRatioChart.vue';
  import AnnualUseChart from './components/AnnualUseChart.vue';
  import ChinaMapChart from './components/ChinaMapChart.vue';
  import HotPlateChart from './components/HotPlateChart.vue';
  import computerRateChart from './components/computerRateChart.vue';
  import MaleFemaleRatioChart from './components/MaleFemaleRatioChart.vue';
  import OverNext30Chart from './components/OverNext30Chart.vue';
  import PlatformSourceChart from './components/PlatformSourceChart.vue';
  import { useUserStore } from '@/stores/modules/user';
  import RealTimeAccessChart from './components/RealTimeAccessChart.vue';
  import dayjs from 'dayjs';
  const userStore = useUserStore();
  const route = useRoute();
  import { getLoanKanBanTotal } from '@/api/dataScreen';
  import { useAuthStore } from '@/stores/modules/auth';
  const { authButtonListGet } = useAuthStore(); // 获取用户权限列表
  const isAdmin = ref(false);
  const tenant = ref('全部');
  const tenantId = ref();
  // userStore.tenant.id
  const load = ref(false);
  const timer1 = ref();

  if (authButtonListGet.includes('admin_screen') && !route.query.tenantId) {
    isAdmin.value = true;
  } else {
    isAdmin.value = false;
  }
  if (authButtonListGet.includes('admin_screen') && window.location.search) {
    const searchParams = new URLSearchParams(window.location.search);
    const id = searchParams.get('tenantId');
    tenant.value = id;
    tenantId.value = id;
  } else if (userStore.userInfo?.tenants && userStore.userInfo?.tenants.length > 0) {
    let id = '';
    if (userStore.userInfo?.tenants.length < 2) {
      id = userStore.userInfo?.tenants[0].id;
    } else {
      id = userStore.tenant.id;
    }
    tenant.value = id;
    tenantId.value = id;
  }
  const router = useRouter();
  const dataScreenRef = ref(null);
  const staticNumber = ref({});
  const dayActiveName = ref('日');
  const Tenantlist = ref([]);
  const numberFormat = (number) => {
    if (!number || isNaN(Number(number))) {
      return '--';
    }
    const num = Number(number);
    if (num > 100000000) {
      return Decimal(num).div(Decimal(100000000)).toNumber().toFixed(2) + '亿';
    } else if (num > 10000) {
      return Decimal(num).div(Decimal(10000)).toNumber().toFixed(2) + '万';
    }
    return num;
  };
  onMounted(() => {
    if (dataScreenRef.value) {
      dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
      dataScreenRef.value.style.width = `1920px`;
      dataScreenRef.value.style.height = `1080px`;
    }
    window.addEventListener('resize', resize);
  });
  onBeforeUnmount(() => {
    if (timer1.value) {
      clearInterval(timer1.value);
      timer1.value = null;
    }
  });

  // 设置响应式
  const resize = () => {
    if (dataScreenRef.value) {
      dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
  };

  // 根据浏览器大小推断缩放比例
  const getScale = (width = 1920, height = 1080) => {
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    return ww < wh ? ww : wh;
  };
  const query = () => {
    load.value = true;
    getTenantPage({ current: 1, size: 9999999, status: 'enable', tenantType: 'mediate' }).then(
      (res) => {
        if (res.success) {
          load.value = false;

          Tenantlist.value = res.result.content;
          Tenantlist.value.unshift({ name: '全部', id: '全部' });
        }
      }
    );
    const params = {};
    if (!isAdmin.value) {
      params['tenant'] = tenantId.value;
    }
    getLoanKanBanTotal(params).then((res) => {
      if (res.success) {
        staticNumber.value = res.result;
      }
    });
  };
  query();
  timer1.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 6000);
  // 获取当前时间
  let timer = null;
  let time = ref(dayjs().format('YYYY年MM月DD HH:mm:ss'));
  timer = setInterval(() => {
    time.value = dayjs().format('YYYY年MM月DD HH:mm:ss');
    let timest = dayjs().valueOf();
    userStore.setTime(timest);
  }, 1000);

  onBeforeUnmount(() => {
    window.removeEventListener('resize', resize);
    clearInterval(timer);
  });
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
