<template>
  <div class="device-analysis">
    <report-header title="设备保障监控" :hideTimePicker="true">
      <t-select
        style="width: 200px; margin-right: 10px"
        :options="supplierList"
        v-model="supplierId"
        :keys="{ label: 'name', value: 'id' }"
      ></t-select>
      <t-select
        style="width: 200px"
        :options="modelList"
        v-model="model"
      ></t-select>
    </report-header>
    <div class="page-main">
      <div class="scroll-content">
        <div class="card card1">
          <div class="title">库存监控</div>
          <div class="flex" style="height: calc(100% - 36px)">
            <div class="chart-wrap">
              <my-chart :options="options1"></my-chart>
            </div>
            <div class="table-wrap1">
              <t-table
                size="small"
                row-key="index"
                :columns="columns"
                :data="tableData1"
                bordered
                v-loading="loading2"
              >
              </t-table>
              <t-pagination
                v-if="pagination1.total > 0"
                style="margin-top: 15px"
                v-model="pagination1.current"
                v-model:pageSize="pagination1.pageSize"
                :total="pagination1.total"
                :showPageSize="false"
              />
            </div>
          </div>
        </div>
        <div class="card card2 m-t-10px">
          <div class="title">资源预警监控</div>
          <div class="detail">
            总配额：{{ result3?.DEVICES }} | 总差额空闲比：{{
              result3?.DEVICES - result3?.ISOUT
            }}/{{ result3?.ISIN }} | 总占用：{{ result3?.ISOUT }} | 总满足率：{{
              division(result3?.ISOUT, result3?.DEVICES) + '%'
            }}
          </div>
          <t-table
            size="small"
            row-key="index"
            :columns="columns2"
            :data="tableData2"
            bordered
            v-loading="loading4"
          >
          </t-table>
          <t-pagination
            v-if="pagination2.total > 0"
            style="margin-top: 15px"
            v-model="pagination2.current"
            v-model:pageSize="pagination2.pageSize"
            :total="pagination2.total"
            :showPageSize="false"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="DeviceAnalysis">
import { ref, computed, onMounted, watch, reactive } from 'vue';
import { useRequest } from 'vue-request';
import { createCakePieOption } from '@/utils/chart';
import {
  deviceStatusAnalysis,
  deviceStatusTable,
  resourceWarningAnalysis,
  resourceWarningTable,
} from '@/api/report';
import { supplierListApi, deviceBrandListApi } from '@/api/system';
import { division } from '@/utils/tool';

const supplierId = ref('');
const supplierList = ref([]);
const model = ref(null);
const modelList = ref([]);
const statusMap = {
  ISIN: '空闲',
  ISOUT: '占用',
  BREAK_DOWN: '故障',
};
supplierListApi({ type: 'DEVICE' }).then((res) => {
  supplierList.value = res || [];
  res?.length && (supplierId.value = res[0].id);
});
deviceBrandListApi().then((res) => {
  let mList = [];
  let arr = res
    .map((item) => {
      return (item.list || []).map((v) => {
        v.name = item.brand + ' - ' + v.model;
        return v;
      });
    })
    .flat();
  for (let i = 0; i < arr.length; i++) {
    if (!mList.find((item) => item.model == arr[i].model)) {
      mList.push(arr[i]);
    }
  }
  modelList.value = [
    { label: '全部型号', value: '' },
    ...mList.map((item) => ({ label: item.name, value: item.model })),
  ];
});
const {
  data: result1,
  loading: loading1,
  run: run1,
} = useRequest(deviceStatusAnalysis);
const {
  data: result2,
  loading: loading2,
  run: run2,
} = useRequest(deviceStatusTable);
const { data: result3, run: run3 } = useRequest(resourceWarningAnalysis);
const { data: result4, run: run4 } = useRequest(resourceWarningTable);
onMounted(() => {
  run3();
  run4();
});
const pagination1 = reactive({
  current: 1,
  pageSize: 3,
  total: 0,
});
const tableData1 = computed(() => {
  let data = [];
  if (!model.value) {
    data = result2.value || [];
  } else {
    data = (result2.value || [])?.filter((item) => item.MODEL == model.value);
  }
  data = data.map((item, index) => {
    item.index = index + '';
    item.occupyRate =
      item.TOTAL == 0 ? 0 : ((item.ISOUT / item.TOTAL) * 100).toFixed(2) + '%';
    return item;
  });
  pagination1.total = data.length;
  return data.slice(
    pagination1.pageSize * (pagination1.current - 1),
    pagination1.pageSize * (pagination1.current - 1) + pagination1.pageSize
  );
});

const pagination2 = reactive({
  current: 1,
  pageSize: 4,
  total: 0,
});
const tableData2 = computed(() => {
  let data = (result4?.value || []).map((item) => {
    item.difference = (item.devices || 0) - item.OUTS;
    item.rate = division(item?.OUTS, item?.devices || 0) + '%';
    return item;
  });
  pagination2.total = data.length;
  return data.slice(
    pagination2.pageSize * (pagination2.current - 1),
    pagination2.pageSize * (pagination2.current - 1) + pagination2.pageSize
  );
});

const columns = [
  { colKey: 'MODEL', title: '设备型号' },
  { colKey: 'ISIN', title: '空闲' },
  { colKey: 'BREAK_DOWN', title: '故障' },
  { colKey: 'ISOUT', title: '占用' },
  { colKey: 'occupyRate', title: '占用率' },
  { colKey: 'TOTAL', title: '小计' },
];
const columns2 = [
  { colKey: 'NAME', title: '服务单元' },
  { colKey: 'devices', title: '配额' },
  { colKey: 'OUTS', title: '占用' },
  { colKey: 'difference', title: '差额' },
  { colKey: 'rate', title: '占用率' },
];
watch(model, () => {
  if (supplierId.value) {
    run1({
      supplierId: supplierId.value,
      model: model.value,
    });
  }
});
watch(supplierId, () => {
  model.value = '';
  run1({
    supplierId: supplierId.value,
    model: model.value,
  });
  run2({
    supplierId: supplierId.value,
  });
});

const options1 = computed(() => {
  return createCakePieOption({
    data: Object.keys(statusMap).map((key) => {
      return {
        name: statusMap[key],
        value: result1?.value?.[key],
      };
    }),
    radius: [0, 65],
  });
});
</script>

<style lang="less" scoped>
.device-analysis {
  .page-main {
    height: calc(100vh - 57px);
    padding: 15px;
    overflow: auto;
    .scroll-content {
      height: 100%;
      min-height: 600px;
      min-width: 1000px;
    }

    .card {
      padding: 4px 10px 10px 10px;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 4px;

      &.card1 {
        height: calc(45% - 5px);
      }
      &.card2 {
        height: calc(55% - 5px);
      }
      .detail {
        color: #8c8c8c;
        font-size: 12px;
        margin-bottom: 10px;
      }
      .title {
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .label {
          color: #262626;
          font-size: 14px;
          // font-weight: bold;
        }
      }
      .chart-wrap {
        height: 100%;
        width: 310px;
      }
      .table-wrap1 {
        width: calc(100% - 360px);
        margin-left: 50px;
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>
