<script lang="ts" setup name="DeviceBench">
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import Linechart from '@/components/Echart/LineChart.vue'
import type { lineDataI } from '@/components/Echart/echart-interface'

// 每个展示块高度
const blockHeight = ref(300)
const blockWidth = ref(400)
const { proxy } = getCurrentInstance() as any
// 设备台账检定提醒表格数据
const standingBookTableData = ref([
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
])
// 设备台账检定提醒表头
const standingBookTableHead = [
  { text: '设备名称', value: 'equipmentName' },
  { text: '负责人', value: 'usePersonName', width: '120' },
  { text: '上次检定时间', value: 'lastTime', width: '180' },
]
// 标准装置到期提醒表格数据
const standardTableData = ref([
  {
    equipmentName: '设备1',
    usePersonName: '负责人1',
    lastTime: '2022-12-21 12:10:30',
  },
])
// 标准装置到期提醒表头
const standardTableHead = [
  { text: '设备名称', value: 'equipmentName' },
  { text: '负责人', value: 'usePersonName', width: '120' },
  { text: '上次检定时间', value: 'lastTime', width: '180' },
]
// 设备检定趋势x轴
const equipmentTestXData: Ref<string[]> = ref([])
// 设备检定趋势数据
const equipmentTestData: Ref<lineDataI[]> = ref([])
// 设备检定趋势y轴最大值
const equipmentTestYDataMax = ref()

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

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

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()
  setTimeout(() => {
    equipmentTestXData.value = ['2022-08', '2022-12']
    equipmentTestData.value = [{ name: '到期设备', data: [1, 11] }]
    standardTestXData.value = ['2022-01', '2022-12', '2023-09']
    standardTestData.value = [{ name: '标准装置', data: [1, 10, 2] }]
  })
})
</script>

<template>
  <app-container>
    <div class="device-bench">
      <el-row :gutter="10">
        <el-col :span="8">
          <bench-col
            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
            icon="icon-line"
            title="设备检定趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="equipmentTestXData"
              :width="`${blockWidth - 20}px`"
              :data="equipmentTestData"
              unit="件"
            />
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            icon="icon-book"
            title="本月统计数据"
            :height="blockHeight"
          >
            <div class="the-month-total-Data">
              <div>
                <div class="title">
                  <span>测量设备</span>
                  <span style="margin-right: 6px;">{{ theMonthTotalData.testValue }}</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.standardValue }}</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
            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
            icon="icon-line"
            title="设备检定趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="standardTestXData"
              :width="`${blockWidth - 20}px`"
              :data="standardTestData"
              unit="件"
            />
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            icon="icon-book"
            title="我的设备"
            :height="blockHeight"
          >
            <div class="my-equipment">
              <div class="item">
                <span>待检定设备数量</span>
                <span style="margin-top: 16px;">{{ myEquipment.stay }}</span>
              </div>
              <div class="item">
                <span>超期未检定设备数量</span>
                <span style="margin-top: 16px;">{{ myEquipment.not }}</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>
