<script lang="ts" setup name="DeviceBench">
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import type { IPlanMonthlyStatisticsReturn, IPlanReturn, ITableData } from './bench-interface'
import Linechart from '@/components/Echart/LineChart.vue'
import type { lineDataI } from '@/components/Echart/echart-interface'
import { getMeasureTrend, getMonthlyStatistics, getMyEquipment, getStandardTrend, getStandingBookRemind } from '@/api/device/bench'
import { getRemindListPage } from '@/api/device/standard'
import type { IexpiraListQuery } from '@/views/device/standardEquipment/standard_interface'

// 每个展示块高度
const blockHeight = ref(300)
const blockWidth = ref(400)
const standingBookLoading = ref(false) // 设备台账检定提醒表格loading
const equipmentTrendLoading = ref(false) // 设备检定趋势loading
const standardLoading = ref(false) // 标准装置到期提醒表格loading
const standardTrendLoading = ref(false) // 装置检定趋势loading
const MonthlyStatisticsLoading = ref(false) // 本月统计数据loading
const myEquipmentLoading = ref(false) // 我的设备loading

// const standardLoading = ref(false) // 标准装置到期提醒表格loading
// 设备台账检定提醒表格数据
const standingBookTableData = ref<ITableData[]>([])
// 设备台账检定提醒表头
const standingBookTableHead = [
  { text: '设备名称', value: 'equipmentName' },
  { text: '负责人', value: 'usePersonName', width: '120' },
  { text: '上次检定时间', value: 'mesureDate', width: '180' },
]

// 标准装置查询参数
const listQuery: Ref<IexpiraListQuery> = ref({
  category: '', // 类别
  id: '', // 主键id
  managerState: '', // 管理状态
  preparationEndDate: '', // 结束时间
  preparationStartDate: '', // 开始时间
  standardLaboratory: '', // 标准所在部门
  standardName: '', // 标准名称
  standardNo: '', // 标准编号
  validEndTime: '', // 结束时间
  validStartTime: '', // 开始时间
  offset: 1, // 当前页
  limit: 20, // 每页多少条
})
// 标准装置到期提醒表格数据
const standardTableData = ref<ITableData[]>([])
// 标准装置到期提醒表头
const standardTableHead = [
  { text: '标准名称', value: 'standardName', align: 'center' },
  { text: '负责人', value: 'standardOwnerName', align: 'center' },
  { text: '有效日期', value: 'preparationDate', width: '180', align: 'center' },
]
const total = ref(20)

// 设备检定趋势x轴
const equipmentTrendXData: Ref<string[]> = ref([])
// 设备检定趋势数据
const equipmentTrendData: Ref<lineDataI[]> = ref([])
// 设备检定趋势y轴最大值
const equipmentTrendYDataMax = ref()

// 装置检定趋势x轴
const standardTrendXData: Ref<string[]> = ref([])
// 装置检定趋势数据
const standardTrendData: Ref<lineDataI[]> = ref([])
// 装置检定趋势y轴最大值
const standardTrendYDataMax = ref()

// 我的设备
const myEquipment = ref({
  verifiedNum: '', // 待检测设备数量
  overtimeNum: '', // 超期未检测设备数量
})
// 本月统计数据
const theMonthTotalData = ref({
  measureSum: '', // 测量设备
  testIn: '', // 在用设备
  testLeave: '', // 闲置设备
  testSeal: '', // 封存设备
  standardSum: '', // 标准装置
  standardIn: '', // 在用装置
  standardStop: '', // 暂停装置
  standardAnnul: '', // 撤销装置
  receive: '', // 领用
  borrow: '', // 借用
})

// 获取设备检定趋势
const fetchMeasureTrend = () => {
  equipmentTrendLoading.value = true
  getMeasureTrend().then((res) => {
    equipmentTrendXData.value = res.data.map((item: IPlanReturn) => item.date)
    const yValue = res.data.map((item: IPlanReturn) => Number(item.count))
    equipmentTrendYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
    equipmentTrendData.value = [{ name: '到期设备', data: yValue }]
    equipmentTrendLoading.value = false
  })
}

// 获取装置检定趋势
const fetchStandardTrend = () => {
  standardTrendLoading.value = true
  getStandardTrend().then((res) => {
    standardTrendXData.value = res.data.map((item: IPlanReturn) => item.date)
    const yValue = res.data.map((item: IPlanReturn) => Number(item.count))
    standardTrendYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
    standardTrendData.value = [{ name: '标准装置', data: yValue }]
    standardTrendLoading.value = false
  })
}

// 获取本月统计数据
const fetchMonthlyStatistics = () => {
  MonthlyStatisticsLoading.value = true
  getMonthlyStatistics().then((res) => {
    theMonthTotalData.value.measureSum = res.data.measureSum // 测量设备
    theMonthTotalData.value.standardSum = res.data.standardSum // 标准装置

    // 本月设备借用
    res.data.equipmentApplyList.forEach((item: IPlanMonthlyStatisticsReturn) => {
      if (item.state === '本月设备借用') {
        theMonthTotalData.value.borrow = item.count
      }
      else if (item.state === '本月设备领用') {
        theMonthTotalData.value.receive = item.count
      }
    })

    // 测量设备
    res.data.measureStateList.forEach((item: IPlanMonthlyStatisticsReturn) => {
      if (item.state === '在用设备') {
        theMonthTotalData.value.testIn = item.count
      }
      else if (item.state === '闲置设备') {
        theMonthTotalData.value.testLeave = item.count
      }
      else if (item.state === '封存设备') {
        theMonthTotalData.value.testSeal = item.count
      }
    })
    // 标准装置
    res.data.standardStateList.forEach((item: IPlanMonthlyStatisticsReturn) => {
      if (item.state === '暂停装置') {
        theMonthTotalData.value.standardStop = item.count
      }
      else if (item.state === '撤销装置') {
        theMonthTotalData.value.standardAnnul = item.count
      }
      else if (item.state === '在用装置') {
        theMonthTotalData.value.standardIn = item.count
      }
    })
    MonthlyStatisticsLoading.value = false
  })
}

// 获取我的设备
const fetchMyEquipment = () => {
  myEquipmentLoading.value = true
  getMyEquipment().then((res) => {
    myEquipment.value.verifiedNum = res.data.verifiedNum // 待检测设备数量
    myEquipment.value.overtimeNum = res.data.overtimeNum // 超期未检测设备数量
    myEquipmentLoading.value = false
  })
}

// 获取设备台账提醒
const fetchStandingBookRemind = () => {
  standingBookLoading.value = true
  getStandingBookRemind().then((res) => {
    standingBookTableData.value = res.data
    standingBookLoading.value = false
  })
}

// 获取标准装置到期提醒
const fetchRemindListPage = () => {
  standardLoading.value = true
  getRemindListPage(listQuery.value).then((res) => {
    standardTableData.value = res.data.rows
    total.value = parseInt(res.data.total)
    standardLoading.value = false
  })
}

function calcBlockSize() {
  // 计算工作台区域高度 - 顶部-面包屑-边距
  const bodyHeight = document.body.clientHeight - 60 - 50 - 20
  blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
  blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
  console.log(blockHeight.value, blockWidth.value - 20)
}
window.addEventListener('resize', () => {
  calcBlockSize()
})

onMounted(() => {
  calcBlockSize()
  fetchMeasureTrend() // 获取设备检定趋势
  fetchStandardTrend() // 获取装置检定趋势
  fetchMonthlyStatistics() // 获取本月统计数据
  fetchMyEquipment() // 获取我的设备
  fetchStandingBookRemind() // 获取设备台账提醒
  fetchRemindListPage() // 获取标准装置到期提醒
})
</script>

<template>
  <app-container>
    <div class="device-bench">
      <el-row :gutter="10">
        <el-col :span="8">
          <bench-col
            v-loading="standingBookLoading"
            icon="icon-book"
            title="设备台账检定提醒"
            path-url="/standingBook/adjustDevice"
            :style="{ height: blockHeight }"
            :height="blockHeight"
          >
            <el-table :data="standingBookTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
              <el-table-column
                v-for="item in standingBookTableHead"
                :key="item.value"
                :prop="item.value"
                align="center"
                :label="item.text"
                :width="item.width"
              />
            </el-table>
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            v-loading="equipmentTrendLoading"
            icon="icon-line"
            title="设备检定趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="equipmentTrendXData"
              :width="`${blockWidth - 20}px`"
              :data="equipmentTrendData"
              unit="件"
            />
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            v-loading="MonthlyStatisticsLoading"
            icon="icon-book"
            title="本月统计数据"
            :height="blockHeight"
          >
            <div class="the-month-total-Data">
              <div>
                <div class="title">
                  <span>测量设备</span>
                  <span style="margin-right: 6px;">{{ theMonthTotalData.measureSum }}</span>
                </div>
                <div class="content">
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <div class="item">
                        <span>在用设备</span>
                        <span style="margin-top: 6px;">
                          {{ theMonthTotalData.testIn }}
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="item">
                        <span>闲置设备</span>
                        <span style="margin-top: 6px;">{{ theMonthTotalData.testLeave }}</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="item">
                        <span>封存设备</span>
                        <span style="margin-top: 6px;">{{ theMonthTotalData.testSeal }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div>
                <div class="title">
                  <span>标准装置</span>
                  <span style="margin-right: 6px;">{{ theMonthTotalData.standardSum }}</span>
                </div>
                <div class="content">
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <div class="item">
                        <span>在用装置</span>
                        <span style="margin-top: 6px;">{{ theMonthTotalData.standardIn }}</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="item">
                        <span>暂停装置</span>
                        <span style="margin-top: 6px;">{{ theMonthTotalData.standardStop }}</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="item">
                        <span>撤销装置</span>
                        <span style="margin-top: 6px;">{{ theMonthTotalData.standardAnnul }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>

              <div class="content">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="item">
                      <span>本月设备领用</span>
                      <span style="margin-top: 6px;">{{ theMonthTotalData.receive }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="item">
                      <span>本月设备借用</span>
                      <span style="margin-top: 6px;">{{ theMonthTotalData.borrow }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </bench-col>
        </el-col>
      </el-row>
    </div>
    <div class="device-bench" style="margin-top: 10px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <bench-col
            v-loading="standardLoading"
            icon="icon-book"
            title="标准装置到期提醒"
            path-url="/standard/expirationRemind"
            :style="{ height: blockHeight }"
            :height="blockHeight"
          >
            <el-table :data="standardTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
              <el-table-column
                v-for="item in standardTableHead"
                :key="item.value"
                :prop="item.value"
                align="center"
                :label="item.text"
                :width="item.width"
              />
            </el-table>
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            v-loading="standardTrendLoading"
            icon="icon-line"
            title="装置检定趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="standardTrendXData"
              :width="`${blockWidth - 20}px`"
              :data="standardTrendData"
              unit="件"
            />
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            v-loading="myEquipmentLoading"
            icon="icon-book"
            title="我的设备"
            :height="blockHeight"
          >
            <div class="my-equipment">
              <div class="item">
                <span>待检定设备数量</span>
                <span style="margin-top: 16px;">{{ myEquipment.verifiedNum }}</span>
              </div>
              <div class="item">
                <span>超期未检定设备数量</span>
                <span style="margin-top: 16px;">{{ myEquipment.overtimeNum }}</span>
              </div>
            </div>
          </bench-col>
        </el-col>
      </el-row>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.device-bench {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .the-month-total-Data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 20px;

    .title {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      margin-bottom: 3px;
    }

    .content {
      width: 100%;

      .item {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-right: 10px;
        padding: 3px 0;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to bottom, #e9f5ff, #3d7eff);
        border-radius: 8px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .my-equipment {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20px;

    .item {
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to right, #caddff, #3d7eff);
      border-radius: 16px;
    }
  }
}
</style>

<style lang="scss">
.bench-table {
  .el-table__header-wrapper {
    border-radius: 8px;
  }
}

.bench-table-header {
  th {
    font-weight: normal;
    font-size: 14px;
  }
}

.bench-table-row {
  border-radius: 8px;
}
</style>