<template>
  <div>
    <div class="btnBoxss">
      <div class="title">系统使用情况</div>
      <div class="btnBox">
        <el-radio-group v-model="tabPos" @change="getTab">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">近7日</el-radio-button>
          <el-radio-button label="3">近30日</el-radio-button>
          <el-radio-button label="4">近90日</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart_box">
      <div class="chart_item left_item">
          <div class="sy_pep">使用次数</div>
        <div class="cen_box">
            <pie :data="sbLxData" />
        </div>
      </div>
      <div class="chart_item right_item">
        <div class="sy_pep">使用人数</div>
        <div class="cen_box">
          <div class="content">
            <div class="stat_box">
              <div>人数</div>
              <div class="num-text">{{ peopleNum }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tablebox" ref="tableList">
      <div class="stitle ranktitle">
        排行榜
        <div class="rankText">
          <el-radio-group v-model="radioList" @change="checkActive">
            <el-radio :label="1">人员</el-radio>
            <el-radio :label="2">部门</el-radio>
            <el-radio :label="3">模块</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="table-List">
        <div class="table-header">
          <span class="table-item">排名</span>
          <span class="table-item">使用成功数</span>
          <span class="table-item">使用失败数</span>
          <span class="table-item">总数</span>
          <span class="table-item" v-if="radioList === 1">人员</span>
          <span class="table-item">{{
            radioList === 3 ? "模块名称" : "部门名称"
          }}</span>
        </div>
        <div
          class="table-body"
          :class="index % 2 === 0 ? 'bg' : ''"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="table-item">
            <img
              v-if="index === 0"
              :src="require('@/assets/images/gold.png')"
              alt=""
              width="20"
              height="25"
            />
            <img
              v-else-if="index === 1"
              :src="require('@/assets/images/silver.png')"
              alt=""
              width="20"
              height="25"
            />
            <img
              v-else-if="index === 2"
              :src="require('@/assets/images/copper.png')"
              alt=""
              width="20"
              height="25"
            />
            <span v-else>{{ index + 1 }}</span>
          </div>
          <span class="table-item">{{ active ? item.pass : item.aa }}</span>
          <span class="table-item">{{ active ? item.noPass : item.a }}</span>
          <span class="table-item">{{ active ? item.count : item.a }}</span>
          <span class="table-item" v-if="radioList === 1">{{
            item.oper_name
          }}</span>
          <span class="table-item" v-if="radioList != 3">{{ item.ssbm }}</span>
          <span class="table-item" v-if="radioList === 3">
            <dict-tag :options="D_BZ_FWMC" :value="item.mkmc" :tag="false" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import pie from "./pie.vue";
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseIcon from "@/components/MyComponents/ChooseIcon";
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
import {
  ref,
  reactive,
  watch,
  nextTick,
  onMounted,
  getCurrentInstance,
  onUnmounted
} from "vue";
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
import {
  ryStatistics,
  bmStatistics,
  mkStatistics,
  useStatistics
} from "@/api/sys.js";
const { D_BZ_FWMC } = proxy.$dict("D_BZ_FWMC");
const router = useRouter();
const route = useRoute();
const active = ref(true);
const tabPos = ref("1");
const params = ref({
  type: "1"
});
function getTab(val) {
  params.value.type = val;
  getTableData();
  getpie();
}
const tableData = ref([]); //表格数据
function getTableData() {
  if (radioList.value === 1) {
    ryStatistics(params.value).then((res) => {
      tableData.value = res;
    });
  } else if (radioList.value === 2) {
    bmStatistics(params.value).then((res) => {
      tableData.value = res;
    });
  } else if (radioList.value === 3) {
    mkStatistics(params.value).then((res) => {
      tableData.value = res;
    });
  }
}

const radioList = ref(1);
function checkActive(val) {
  getTableData();
}

const sbLxData = ref([
  {
    name: "成功次数",
    value: 0
  },
  {
    name: "失败次数",
    value: 0
  }
]);
const peopleNum = ref(0);
function getpie() {
  useStatistics(params.value).then((res) => {
    peopleNum.value = res.fwrs;
    sbLxData.value[0].value = res.qqcgcs;
    sbLxData.value[1].value = res.qqsbcs;
  });
}

// 表格高度计算
const tabHeightFn = () => {
 tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
onMounted(() => {
  getTableData();
  getpie();
});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.user-manage-container {
  .table-header-wrap {
    margin-bottom: 22px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  .pagination {
    margin-top: 20px;
  }
}
.map {
  width: 100%;
  height: 400px;
  position: relative;
}
.latlng {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.btnBoxss {
  height: 60px;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
  }
  .btnBox {
    margin-top: 14px;
  }
}
.chart_box {
  display: flex;
  justify-content: center;
  align-items: center;
  .chart_item {
    flex: 1;
    height: 300px;
    border: 1px solid #07539a;
    padding: 10px;
  }
  .left_item {
    margin-right: 10px;
  }
  .right_item {
    margin-left: 10px;
  }
  .cen_box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.tablebox {
  margin-top: 15px;
  border: 1px solid #07539a;
  height: 54vh;
  padding: 10px;
  .ranktitle {
    display: flex;
    justify-content: space-between;
    .rankText {
      color: #2892ff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .rankText:hover {
      color: rgb(59, 162, 231);
    }
  }
  .table-List {
    margin-top: 10px;
  }
}
.table-List {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #54c5ff;
    background-color: #004485;
    padding: 10px 10px;
  }
  .table-body {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
  }
  .table-item {
    flex: 1;
    text-align: center;
  }
  .table-item-dep {
    flex: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bg {
    background-color: #002f5b;
  }
}
.content {
  height: 76.5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  width: 160px;
  :last-child {
    margin-right: 0vw;
  }
}
.stat_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(76, 166, 251, 0.8);
  border-radius: 2px;
  margin-right: 1vw;
  padding: 13px 0;
  .num-text {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    background: linear-gradient(to bottom right, #36e5ff, #1092ff);
    -webkit-background-clip: text;
    color: transparent;
  }
}
.sy_pep {
  font-size: 18px;
  font-weight: bold;
}
</style>
