<template>
  <Row :gutter="16">
    <Col :span="12">
      <Card title="各种状态电梯数量统计表">
        <Row>
          <Col v-for="(item, index) in statusList1" :key="index" :span="6">
            <div class="common-title">{{ item.title }}</div>
            <div class="common-num">{{ item.num }}</div>
          </Col>
        </Row>

        <Tabs v-model:activeKey="activeKey" @change="tabChange">
          <Tab-pane v-for="(item, index) in tabList1" :key="item.key" :tab="item.title">
            <List size="large" bordered :data-source="data">
              <template #renderItem="{ item }">
                <ListItem>
                  <div class="flex justify-between" style="width: 100%">
                    <div>{{ item.name }}</div>
                    <div>{{ item.num }}</div>
                  </div>
                </ListItem>
              </template>
            </List>
          </Tab-pane>
        </Tabs>
      </Card></Col
    >
    <Col :span="12">
      <Card title="各种状态发生频率统计表">
        <Row>
          <Col v-for="(item, index) in statusList2" :key="index" :span="6">
            <div class="common-title">{{ item.title }}</div>
            <div class="common-num">{{ item.num }}</div>
          </Col>
        </Row>
        <Tabs v-model:activeKey="activeKey1" @change="tabChange1">
          <Tab-pane v-for="(item, index) in tabList2" :key="item.key" :tab="item.title">
            <List size="large" bordered :data-source="data1">
              <template #renderItem="{ item }">
                <ListItem>
                  <div class="flex justify-between" style="width: 100%">
                    <div>{{ item.name }}</div>
                    <div>{{ item.num }}</div>
                  </div>
                </ListItem>
              </template>
            </List>
          </Tab-pane>
        </Tabs>
      </Card></Col
    >
  </Row>
</template>
<script lang="ts" setup>
import { Ref, ref, watch } from "vue";
import { Card, Row, Col, Tabs, TabPane, ListItem, List } from "ant-design-vue";

const activeKey = ref(1);
const activeKey1 = ref(1);
const data = ref<any>([]);
const data1 = ref<any>([]);
const props = defineProps({
  allAnaInfo: {
    type: Object,
    default: {},
  },
});
const statusList1 = ref([
  {
    title: "管理电梯总数",
    num: 40,
  },
  {
    title: "正常电梯总数",
    num: 40,
  },
  {
    title: "故障电梯总数",
    num: 40,
  },
  {
    title: "异常电梯总数",
    num: 40,
  },
]);
const statusList2 = ref([
  {
    title: "总故障发生率",
    num: 40,
  },
  {
    title: "总异常发生率",
    num: 40,
  },
]);
const tabList1 = ref([
  {
    title: "故障电梯数",
    key: 1,
  },
  {
    title: "异常电梯数",
    key: 2,
  },
  {
    title: "维保",
    key: 3,
  },
  {
    title: "年检",
    key: 4,
  },
]);
const tabList2 = ref([
  {
    title: "故障统计",
    key: 1,
  },
  {
    title: "异常统计",
    key: 2,
  },
  {
    title: "维保统计",
    key: 3,
  },
  {
    title: "反馈统计",
    key: 4,
  },
]);
watch(
  () => props.allAnaInfo,
  () => {
    data1.value = props.allAnaInfo.faultList?.map((item) => {
      return {
        name: item.faultName,
        num: item.faultRatio + "%",
      };
    });
    data.value = props.allAnaInfo.faultList?.map((item) => {
      return {
        name: item.faultName,
        num: item.faultElevatorTotal,
      };
    });
    statusList1.value = [
      {
        title: "管理电梯总数",
        num: props.allAnaInfo.total,
      },
      {
        title: "正常电梯总数",
        num: props.allAnaInfo.normalTotal,
      },
      {
        title: "故障电梯总数",
        num: props.allAnaInfo.faultTotal,
      },
      {
        title: "异常电梯总数",
        num: props.allAnaInfo.exceptionFaultTotal,
      },
    ];
    statusList2.value = [
      {
        title: "总故障发生率",
        num: props.allAnaInfo.faultTotalRatio + "%",
      },
      {
        title: "总异常发生率",
        num: props.allAnaInfo.exceptionFaultRatio + "%",
      },
    ];
  },
  { immediate: true }
);
function tabChange1(e) {
  switch (e) {
    case 1:
      data1.value = props.allAnaInfo.faultList.map((item) => {
        return {
          name: item.faultName,
          num: item.faultRatio + "%",
        };
      });
      break;
    case 2:
      data1.value = props.allAnaInfo.exceptionFaultList.map((item) => {
        return {
          name: item.faultName || "-",
          num: item.faultRatio + "%",
        };
      });
      break;
    case 3:
      data1.value = [
        { name: "维修率", num: `${props.allAnaInfo.repairRatio}% ` },
        { name: "维保率", num: `${props.allAnaInfo.maintenanceRatio}%` },
      ];
      break;
    case 4:
      data1.value = [
        { name: "工作评价率", num: `${props.allAnaInfo.workEvaluateRatio}% ` },
        { name: "好评率", num: `${props.allAnaInfo.favorableRatio}%` },
      ];
      break;
    default:
      break;
  }
}
function tabChange(e) {
  console.log(e, "e");
  switch (e) {
    case 1:
      data.value = props.allAnaInfo.faultList.map((item) => {
        return {
          name: item.faultName || "-",
          num: item.faultElevatorTotal,
        };
      });
      break;

    case 2:
      data.value = props.allAnaInfo.exceptionFaultList.map((item) => {
        return {
          name: item.faultName || "-",
          num: item.faultElevatorTotal,
        };
      });
      break;
    case 3:
      data.value = props.allAnaInfo.maintenancePlanList.map((item) => {
        return {
          name: item.maintenanceName,
          num: item.maintenanceElevatorTotal,
        };
      });
      break;
    case 4:
      data.value = [
        { name: "未年检", num: props.allAnaInfo.unInspectAnnuallyTotal },
        { name: "已年检", num: props.allAnaInfo.inspectAnnuallyTotal },
      ];
      break;
    default:
      break;
  }
}
</script>

<style lang="less" scoped>
.common-title {
}
.common-num {
  font-size: 30px;
  font-weight: bolder;
}
</style>
