<template>
  <van-config-provider :theme-vars="themeVars">
    <div style="padding-top: 13vw">
      <TopNav navTitle="任务中心" :showRight="false" :showLeft="true" />

      <div style="padding: 0 4vw; box-sizing: border-box">
        <!-- 数据统计 -->
        <div class="mainBox">
          <Statics></Statics>
        </div>
        <!-- 任务类型统计 -->
        <div class="item_box">
          <div class="container">
            <div class="strip_box">
              <span class="strip"></span>
              <span class="total_title">任务类型统计</span>
            </div>
            <div class="title-right">
              <span v-if="rwTypeTime == 1"> 今日</span>
              <span v-if="rwTypeTime == 2"> 近7日</span>
              <span v-if="rwTypeTime == 3"> 近30日</span>
              <img
                src="../../../assets/images/xiala.png"
                width
                class="img"
                alt=""
                @click="isShowDataCount1 = true"
              />
              <van-action-sheet v-model:show="isShowDataCount1">
                <van-picker
                  :columns="timeList"
                  @confirm="change_data_count"
                  @cancel="isShowDataCount1 = false"
                />
              </van-action-sheet>
            </div>
          </div>
          <div class="coulum">
            <barChart :list="rwTypeList.list"></barChart>
          </div>
        </div>

        <!-- 任务完成情况 -->
        <div class="item_box">
          <div class="container">
            <div class="strip_box">
              <span class="strip"></span>
              <span class="total_title">任务完成情况</span>
            </div>
            <div class="title-right">
              <span v-if="rwWcTime == 1"> 今日</span>
              <span v-if="rwWcTime == 2"> 近7日</span>
              <span v-if="rwWcTime == 3"> 近30日</span>
              <img
                src="../../../assets/images/xiala.png"
                width
                class="img"
                alt=""
                @click="isShowDataCount2 = true"
              />
              <van-action-sheet v-model:show="isShowDataCount2">
                <van-picker
                  :columns="timeList"
                  @confirm="change_data_count2"
                  @cancel="isShowDataCount2 = false"
                />
              </van-action-sheet>
            </div>
          </div>
          <div class="coulumBar">
            <SircleChart
              :datas="reWcCountDtaa"
              v-if="reWcCountDtaa"
            ></SircleChart>
          </div>
        </div>

        <!-- 排行榜 -->
        <div class="rankBox">
          <van-tabs
            title-active-color="#3e6ee8"
            color="#3e6ee8"
            :background="themeType == 'light' ? '#fff' : '#041634'"
            :title-inactive-color="themeType == 'light' ? '#333' : '#fff'"
            v-model:active="active"
            @change="onActive"
          >
            <van-tab
              :title="item"
              v-for="(item, index) in rankingList"
              :key="index"
            >
            </van-tab>
          </van-tabs>
          <div class="item_box ranking">
            <Ranking :active="active" :key="activeIndex"></Ranking>
          </div>
        </div>
      </div>
    </div>
  </van-config-provider>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import TopNav from "../../../components/topNav.vue";
import Statics from "./components/statics.vue";
import barChart from "./components/barChart.vue";
import SircleChart from "./components/sircleChart.vue";
import Ranking from "./components/ranking.vue";
import { getRwTypeCount, getRwCount } from "../../../api/rwzx.js";
import { Toast } from "vant";
//时间段选择数据
const timeList = ref(["今日", "近7日", "近30天"]);
const rankingList = ref(["部门排行榜", "个人排行榜"]);
const active = ref(0); //选中排行榜
const rwTypeTime = ref(1); //任务类型统计默认时间
const rwWcTime = ref(1); //任务完成统计默认时间
const isShowDataCount1 = ref(false); //任务类型统计时间弹窗
const isShowDataCount2 = ref(false); //任务完成统计时间弹窗
const reWcCountDtaa = ref(null); //任务完成统计数据
const activeIndex = ref(1);
const rwTypeList = reactive({
  list: [],
}); //任务类型统计数据
const themeType = ref(getStorage("themeSetting"));
onMounted(() => {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  Promise.all([_getRwTypeCount(), _getRwCount()])
    .then((res) => {
      Toast.clear();
    })
    .catch((err) => {
      Toast.clear();
    });
});
//切换排行版
function onActive(e) {
  activeIndex.value++;
}
//获取任务成统计数据
function _getRwCount() {
  getRwCount({
    dateType: rwWcTime.value,
  }).then((res) => {
    if (res) reWcCountDtaa.value = res;
  });
}
//获取任务类型统计数据
function _getRwTypeCount() {
  getRwTypeCount({
    dateType: rwTypeTime.value,
  }).then((res) => {
    let arr = [
      ["product", "已完成", "进行中", "超期完成", "超期进行中", "超期未完成"],
    ];
    for (let i = 0; i < res.length; i++) {
      switch (res[i].dm) {
        case "01":
          arr[1] = _setRwTypeData(res[i]);
          break;
        case "02":
          arr[2] = _setRwTypeData(res[i]);
          break;
        case "03":
          arr[3] = _setRwTypeData(res[i]);
          break;
        case "04":
          arr[4] = _setRwTypeData(res[i]);
          break;
        case "05":
          arr[5] = _setRwTypeData(res[i]);
          break;
      }
    }
    rwTypeList.list = arr;
  });
}
//设置任务类型图标数据
function _setRwTypeData(item) {
  let arr = [];
  for (let it in item) {
    if (it == "ct") item[it] = item[it].replace("任务", "");
    switch (it) {
      case "ct":
        arr[0] = item[it];
        break;
      case "ywc":
        arr[1] = item[it];
        break;
      case "jxz":
        arr[2] = item[it];
        break;
      case "cqwc":
        arr[3] = item[it];
        break;
      case "cqjxz":
        arr[4] = item[it];
        break;
      case "cqwwc":
        arr[5] = item[it];
        break;
    }
  }
  return arr;
}
//确认选中的时间
function change_data_count(val) {
  switch (val) {
    case "今日":
      rwTypeTime.value = 1;
      break;
    case "近7日":
      rwTypeTime.value = 2;
      break;
    case "近30天":
      rwTypeTime.value = 3;
      break;
  }
  isShowDataCount1.value = false;
  _getRwTypeCount();
}
//选中的任务完成的查询时间
function change_data_count2(val) {
  switch (val) {
    case "今日":
      rwWcTime.value = 1;
      break;
    case "近7日":
      rwWcTime.value = 2;
      break;
    case "近30天":
      rwWcTime.value = 3;
      break;
  }
  isShowDataCount2.value = false;
  _getRwCount();
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.mainBox {
  box-sizing: border-box;

  .dataCount {
    height: 40vw;
  }
}

.item_box {
  @include font_size($font_medium_s);
  padding: 3vw;
  box-sizing: border-box;
  margin-bottom: 4vw;

  .container {
    margin: 3vw;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .strip_box {
      display: flex;
      align-items: center;

      .strip {
        display: inline-block;
        width: 4px;
        height: 14px;
        background-color: #1989fa;
        margin-right: 2vw;
      }

      .total_title {
        @include font_size($font_medium);
      }
    }

    .title-right {
      background: #3e6ee8;
      color: #fff;
      padding: 0.5vw 2vw;
      border-radius: 1vw;
    }
  }

  .coulum {
    width: 100%;
    height: 54vw;
  }

  .coulumBar {
    width: 100%;
    height: 75vw;
  }
}

.rankBox {
  // margin-top: 8vw;
  .ranking {
    margin-top: 4vw;
  }

  ::v-deep .van-tab__text--ellipsis {
    font-size: 4vw;
    font-weight: 600;
  }
}
</style>
