<template>
  <div class="page-statistics">
    <div class="padding-xs">
      <el-card class="box-card" :body-style="{ height: 'calc( 50vh - 100px)' }">
        <template #header>
          <div class="card-header">
            <span class="text-bold">失效比例</span>
          </div>
        </template>
        <pieRoseTypeSimple style="height: 100%" :data="chartFailureRatio" />
      </el-card>
    </div>
    <div class="padding-xs">
      <el-card class="box-card" :body-style="{ height: 'calc( 50vh - 100px)' }">
        <!-- <template #header>
          <div class="card-header">
            <span class="text-bold">Card name</span>
          </div>
        </template>
       <pieRoseTypeSimple style="height: 100%" /> -->
      </el-card>
    </div>
    <div class="padding-xs">
      <el-card class="box-card" :body-style="{ height: 'calc( 50vh - 100px)' }">
        <template #header>
          <div class="card-header">
            <span class="text-bold">到期提示</span>
          </div>
        </template>
        <barYCategory style="height: 100%" :data="chartExpirationPrompt" />
      </el-card>
    </div>
    <div class="padding-xs">
      <el-card class="box-card" :body-style="{ height: 'calc( 50vh - 100px)' }">
        <template #header>
          <div class="card-header">
            <span class="text-bold">套餐比例</span>
          </div>
        </template>
        <pieRoseTypeSimple
          style="height: 100%"
          :data="chartPackageProportion"
        />
      </el-card>
    </div>
    <div class="padding-xs">
      <el-card class="box-card" :body-style="{ height: 'calc( 50vh - 100px)' }">
        <template #header>
          <div class="card-header">
            <span class="text-bold">卡片状态</span>
          </div>
        </template>
        <barDataColor style="height: 100%" :data="chartCardStatus" />
      </el-card>
    </div>
    <div class="padding-xs">
      <el-card class="box-card" :body-style="{ height: 'calc( 50vh - 100px)' }">
        <template #header>
          <div class="card-header">
            <span class="text-bold">项目比例</span>
          </div>
        </template>
        <pieRoseTypeSimple
          style="height: 100%"
          :data="chartProjectProportion"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { listEquipment } from "@/api/equipment/equipment";
import pieRoseTypeSimple from "@/views/dashboard/pieRoseTypeSimple";
import barYCategory from "@/views/dashboard/barYCategory";
import barDataColor from "@/views/dashboard/barDataColor";

const { proxy } = getCurrentInstance();
const { com_operator, com_project } = proxy.useDict(
  "com_operator",
  "com_project"
);

const loading = ref(true);
const equipmentList = ref([]);
const total = ref(0);
const failureRatio = ref([
  { value: 40, name: "rose 1" },
  { value: 38, name: "rose 2" },
  { value: 18, name: "rose 8" },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 9999,
  },
  // 失效比例
  chartFailureRatio: [
    {
      value: 60,
      name: "有效卡片",
      itemStyle: {
        color: "#73C0DE",
      },
    },
    {
      value: 40,
      name: "失效卡片",
      itemStyle: {
        color: "#DDDDDD",
      },
    },
  ],
  // 到期提示
  chartExpirationPrompt: [
    {
      value: {
        value: 70,
        itemStyle: {
          color: "#EE6666",
        },
      },
      name: "3个月以内",
    },

    {
      value: {
        value: 60,
        itemStyle: {
          color: "#FAC858",
        },
      },
      name: "3-6个月",
    },

    {
      value: {
        value: 20,
        itemStyle: {
          color: "#91CC75",
        },
      },
      name: "6-12个月",
    },
    {
      value: {
        value: 30,
        itemStyle: {
          color: "#5470C6",
        },
      },
      name: "1-3年",
    },

    {
      value: {
        value: 10,
        itemStyle: {
          color: "#73C0DE",
        },
      },
      name: "3年以上",
    },
  ],
  // 套餐比例
  chartPackageProportion: [
    { value: 44, name: "20G/月 1200元/年" },
    { value: 40, name: "10G/月  800元/年" },
  ],
  // 卡片状态
  chartCardStatus: [
    {
      value: {
        value: 10,
        itemStyle: {
          color: "#73C0DE",
        },
      },
      name: "正常",
    },
    {
      value: {
        value: 30,
        itemStyle: {
          color: "#5470C6",
        },
      },
      name: "无流量",
    },
    {
      value: {
        value: 20,
        itemStyle: {
          color: "#91CC75",
        },
      },
      name: "未激活",
    },
    {
      value: {
        value: 30,
        itemStyle: {
          color: "#FAC858",
        },
      },
      name: "快到期",
    },
    {
      value: {
        value: 70,
        itemStyle: {
          color: "#EE6666",
        },
      },
      name: "已停机",
    },
  ],
  // 项目比例
  chartProjectProportion: [
    { value: 40, name: "海狮卫士" },
    { value: 78, name: "猎豹卫士" },
  ],
});

const {
  queryParams,
  chartFailureRatio,
  chartExpirationPrompt,
  chartPackageProportion,
  chartCardStatus,
  chartProjectProportion,
} = toRefs(data);

/** 查询设备列列表 */
function getList() {
  loading.value = true;
  listEquipment(queryParams.value).then((response) => {
    equipmentList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

setTimeout(() => {
  failureRatio.value = [
    { value: 40, name: "rose 1" },
    { value: 38, name: "rose 2" },
    { value: 38, name: "rose 3" },
    { value: 38, name: "rose 4" },
    { value: 18, name: "rose 8" },
  ];
  console.log("asdas");
}, 3000);

getList();
</script>

<style lang="scss">
.desktop {
  .page-statistics {
    height: calc(100vh - 84px);
    padding: 10px;
    // background: red;
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 33.33%;
    }
  }
  .box-card {
    height: 100%;
  }
}
</style>>

