<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">
              产品回款率
            </div>
            <div class="dataScreen-main-chart">
              <HotPlateChart :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>
          <div class="dataScreen-map" v-else>
            <div class="dataScreen-map-title">当日跟进分析</div>
            <MaleFemaleRatioChart :tenantId="tenantId"/>
          </div>
        </div>
        <div class="dataScreen-rg">
          
          <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>
      </div>
      <div class="dataScreen-cb">
        <div class="dataScreen-main-title" style="width: auto;">
          作业量趋势分析
        </div>
        <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>
</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 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

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) + '万';
  }else if (num> 1000) {
    return Decimal(num).div(Decimal(1000)).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);
});

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};
const params = {}
if (!isAdmin.value) {
  params['tenant'] = tenantId.value
}
getLoanKanBanTotal(params).then(res=> {
  if (res.success) {
    staticNumber.value = res.result
  }
})
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
getTenantPage({ current: 1, size: 9999999, status: 'enable' }).then(res => {
  if (res.success) {
    Tenantlist.value = res.result.content
    Tenantlist.value.unshift({name: '全部', id: '全部'})
  }
})
// 获取当前时间
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");
}, 1000);

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