<template>
  <div class="zl">
    <div class="zl_title">
      <span v-for="(item, index) in list" :key="index">{{ item.label }}</span>
    </div>
    <div class="zl_table">
      <div
        class="zl_table_item"
        v-for="(item, index) in tableList"
        :key="index"
      >
        <div class="tab_item">
          <img
            v-if="index === 0"
            :src="require('../../../../assets/gxapp/j.png')"
            alt=""
            width="18"
            height="22"
          />
          <img
            v-else-if="index === 1"
            :src="require('../../../../assets/gxapp/y.png')"
            alt=""
            width="18"
            height="22"
          />
          <img
            v-else-if="index === 2"
            :src="require('../../../../assets/gxapp/t.png')"
            alt=""
            width="18"
            height="22"
          />
          <span v-else>{{ index + 1 }}</span>
        </div>
        <div class="tab_item">{{ item.name }}</div>
        <div class="tab_item">
          {{ Number(item.ytotal) + Number(item.ntotal) }}
        </div>
        <div class="tab_item">{{ item.ytotal }}</div>
        <div class="tab_item">{{ item.ntotal }}</div>
        <div class="tab_item">
          {{ item.wcl ? (item.wcl * 100).toFixed(2) + "%" : "--" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, watch } from "vue";
import { zlPhTjxx } from "../../../..//api/zlzx.js";
const props = defineProps({
  timeType: {
    type: String,
    default: "1",
  },
});
watch(
  () => props.timeType,
  () => {
    getList();
  },{deep:true}
);
const list = ref([
  { label: "排名" },
  { label: "部门名称" },
  { label: "总数" },
  { label: "已完成" },
  { label: "未完成" },
  { label: "完成率" },
]);
const tableList = ref([]);
function getList() {
  tableList.value = []
  zlPhTjxx({ type: props.timeType }).then((res) => {
    for (let i = 0; i < res.length; i++) {
      if (res[i].name == "高新区分局") {
        res[i].name = "高新分局";
      } else {
        res[i].name = res[i].name
          .replace(/高新区分局/g, "")
          .replace(/派出所/g, "");
      }
    }
    tableList.value = res;
    const total = res.length;
  });
}
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";
.zl {
  margin: 5px 0;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
  .zl_title {
    margin: 0 5px;
    padding: 0 7px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .zl_table {
    margin-top: 5px;
    .zl_table_item {
      min-height: 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tab_item {
        flex: 1;
        text-align: center;
      }
    }
  }
}
</style>