<template>
  <div style=" background: #f0f0f0;">
    <div class="header">
      <div :class="type == '02' ? 'active' : ''" @click="fn">PC端</div>
      <div :class="type == '01' ? 'active' : ''" @click="fn1">小程序端</div>
    </div>
    <div class="wiboxs">
      <div class="frequency">
        <div>
          <div class="topbox">
            <span>累计访问次数</span>
            <span class="quan">全</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.allCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>累计访问人数</span>
            <span class="or">全</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.allPeopleCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>年度访问次数</span>
            <span class="quan">年</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.yearCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>年度访问人数</span>
            <span class="or">年</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.yearPeopleCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>季度访问次数</span>
            <span class="quan">季</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.quarterCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>季度访问人数</span>
            <span class="or">季</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.quarterPeopleCount || 0 }}</span>
          </div>
        </div>
      </div>
      <div class="frequency">
        <div>
          <div class="topbox">
            <span>本月访问次数</span>
            <span class="quan">月</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.monthCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>本月访问人数</span>
            <span class="or">月</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.monthPeopleCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>本周访问次数</span>
            <span class="quan">周</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.weekCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>本周访问人数</span>
            <span class="or">周</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.weekPeopleCount || 0 }}</span>
          </div>
        </div>

        <div>
          <div class="topbox">
            <span>今日访问次数</span>
            <span class="quan">日</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.dayCount || 0 }}</span>
          </div>
        </div>
        <div>
          <div class="topbox">
            <span>今日访问人数</span>
            <span class="or">日</span>
          </div>
          <div class="botox" v-loading="loadingCount">
            <span class="numbox">{{ fromdata.dayPeopleCount || 0 }}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" @SortChange="SortChange" style="width:49%;" :actionsW="100">
          <template #level="{ row }">
            <dict-tag :options="D_BZ_LWJB" :value="row.level" :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operesee" v-if="['10', '20', '30'].includes(row.orgLevel)" @click="seeClick(row)"><el-icon>
                <View />
              </el-icon>查看</span>
            <span v-else>--</span>
          </template>
        </MOSTY.Table>

        <div class="chartBox" v-loading="loadingChart">
          <slideDoubleLine :linesNum="allPeoNum" :linesTitle="allPeoTitle" v-if="allPeoTitle.length > 0" :key="keys">
          </slideDoubleLine>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="titles" :close-on-click-modal="false">
      <div class="tabsm">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData2" :tableloading="tableloading2"
          :isSelect="false" :isSort="false" @SortChange="SortChange" style="width:100%;" :actionsW="100">
          <template #level="{ row }">
            <dict-tag :options="D_BZ_LWJB" :value="row.level" :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operesee" v-if="['10', '20', '30'].includes(row.orgLevel)" @click="seeClick(row)"><el-icon>
                <View />
              </el-icon>查看</span>
            <span v-else>--</span>
          </template>
        </MOSTY.Table>

      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>


        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import slideDoubleLine from "../components/charts/slideDoubleLine.vue";
const loadingCount = ref(false)
const loadingChart = ref(false)
// 数据
const type = ref('02');
const fromdata = ref({})
const keys = ref(1)
const dialogVisible = ref(false)
const titles = ref('')
const tableData = ref([])
const freNum = ref([0, 0, 0, 0, 0, 0, 0])
const peoNum = ref([0, 0, 0, 0, 0, 0, 0])
const allPeoNum = ref([])
const allPeoTitle = ref([])
const tableData2 = ref([])
const tableloading2 = ref(false)
const loadingTable = ref(false)
const tableColumn = ref([
  {
    title: "单位名称",
    prop: "orgName"
  },
  {
    title: "累计访问率",
    prop: "fwl_all"
  },
  {
    title: "年访问率",
    prop: "fwl_year"
  },
  {
    title: "季度访问率",
    prop: "fwl_quarter"
  },
  {
    title: "月访问率",
    prop: "fwl_month"
  },
  {
    title: "周访问率",
    prop: "fwl_week"
  },
  {
    title: "日访问率",
    prop: "fwl_day"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
// 初始化
onMounted(() => {
  getfwcount()
  getqycylist()
  getCount()
})
// 方法
const fn = () => {
  type.value = '02'
  getfwcount()
  getqycylist()
  getCount()
}
const fn1 = () => {
  type.value = '01'
  getfwcount()
  getqycylist()
  getCount()
}

//查询PC和小程序近7天的访问量和访问人数
function getfwcount() {
  loadingChart.value = true
  getApi({ type: type.value }, '/mosty-base/loginCount/getStatisticsDay7').then(res => {
    freNum.value = res.map(it => { return it.countPeople })
    peoNum.value = res.map(it => { return it.count })

    allPeoTitle.value = res.map(item => {
      return item.week
    })
    allPeoNum.value = [
      {
        data: peoNum.value,
        name: `总访问量:${peoNum.value.reduce((pre, item) => {
          return pre + item
        }, 0)}`
      },
      {
        data: freNum.value,
        name: `总访问人数:${freNum.value.reduce((pre, item) => {
          return pre + item
        }, 0)}`
      },
    ]
    keys.value++
    loadingChart.value = false
  }).catch(() => {
    loadingChart.value = false
  }).finally(() => {
    loadingChart.value = false
  })
}
//	查询PC和小程序的全员参与列表接口
function getqycylist() {
  loadingTable.value = true
  getApi({ type: type.value }, '/mosty-base/loginCount/getListByOrg').then(res => {
    if (res) {
      res.forEach(el => {
        el.fwl_all = el.fwl_all + '%'
        el.fwl_year = el.fwl_year + '%'
        el.fwl_quarter = el.fwl_quarter + '%'
        el.fwl_month = el.fwl_month + '%'
        el.fwl_week = el.fwl_week + '%'
        el.fwl_day = el.fwl_day + '%'
      });
      tableData.value = res
    } else {
      tableData.value = []
    }
  }).finally(() => {
    loadingTable.value = false
  })
}
//	查询PC和小程序的全员参与统计接口
function getCount() {
  loadingCount.value = true;
  getApi({ type: type.value }, '/mosty-base/loginCount/getStatistics').then(res => {
    fromdata.value = res
    loadingCount.value = false;
  }).catch(() => {
    loadingCount.value = false;
  })
}
//查看
function seeClick(row) {
  dialogVisible.value = true
  tableloading2.value = true
  titles.value = row.orgName + '详情'
  getApi({ type: type.value, orgcode: row.orgId }, '/mosty-base/loginCount/getListByOrg').then(res => {
    if (res) {
      res.forEach(el => {
        el.fwl_all = el.fwl_all + '%'
        el.fwl_year = el.fwl_year + '%'
        el.fwl_quarter = el.fwl_quarter + '%'
        el.fwl_month = el.fwl_month + '%'
        el.fwl_week = el.fwl_week + '%'
        el.fwl_day = el.fwl_day + '%'
      });
      tableData2.value = res
    } else {
      tableData2.value = []
    }
  }).finally(() => {
    tableloading2.value = false
  })
}


</script>

<style lang="scss" scoped>
.header {
  display: flex;
  height: 60px;
  border-bottom: 1px solid var(--el-color-primary);
  align-items: flex-end;

  div {
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    cursor: pointer;
    color: #000;
  }
}

.wiboxs {
  background: #f0f0f0;
}

.active {
  border-bottom: 2px solid var(--el-color-primary);
  color: var(--el-color-primary) !important;
}

.frequency {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;

  >div {
    width: 350px;
    border: 1px solid var(--el-color-primary);
    border-radius: 5px;
    font-size: 18px;
    margin: 0 10px;
    background: #fff;

    .topbox {
      height: 30px;
      width: 100%;
      font-size: 16px;
      color: #000;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: none;
      border-bottom: 1px solid #ccc;

      .quan {
        display: block;
        padding: 2px 3px;
        font-size: 13px;
        color: #fff;
        border-radius: 3px;
        background-color: rgb(0, 162, 255);
      }
    }

    .botox {
      border: none;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      text-align: center;

      >span {
        display: block;
      }

      .numbox {
        font-size: 23px;
      }

      .ljbox {
        font-size: 16px;
        color: #ccc;
      }
    }

    .or {
      display: block;
      padding: 3px 3px;
      color: #fff;
      font-size: 13px;
      border-radius: 3px;
      background-color: rgb(255, 184, 0);
    }
  }
}

.content {
  height: calc(100vh - 380px);
  display: flex;
  justify-content: space-between;

  div {
    width: 49%;
  }

  .chartBox {
    height: 99%;
    background: #fff;
    margin: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    border: 1px solid var(--el-color-primary);
  }
}

.tabsm {
  height: calc(100vh - 400px);
}
</style>