<!-- 设备列表 -->
<script lang="ts" setup name="Dashboard">
// import verificationDetail from './components/verificationDetail.vue'
const width = ref(document.body.clientWidth - 180)
const height = ref(document.body.clientHeight - 50 - 60 - 10)
window.addEventListener('resize', () => {
  const bodyWidth = document.body.clientWidth - 180
  width.value = bodyWidth
  const bodyHeight = document.body.clientHeight - 50 - 60
  height.value = bodyHeight
})
const tableList = ref([])
const current = ref('1')
const radioMenus = ref([
  {
    name: '在检设备',
    value: '1',
  },
  {
    name: '待检设备',
    value: '2',
  },
  {
    name: '在用设备',
    value: '3',
  },
])
const columns = ref([
  {
    text: '设备编号',
    value: 'no',
    align: 'center',
  },
  {
    text: '设备名称',
    value: 'name',
    align: 'center',
  },
  {
    text: '所属部门',
    value: 'dept',
    align: 'center',
  },
  {
    text: '负责人',
    value: 'user',
    align: 'center',
  },
  {
    text: '送检时间',
    value: 'time',
    align: 'center',
  },
  {
    text: '检定(校准)单位',
    value: 'danwei',
    align: 'center',
  },
  {
    text: '检定完成度',
    value: '',
    align: 'center',
  },
])
const list = ref([
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },

  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
  {
    no: 'sq001',
    name: '测试设备',
    dept: '测试部门',
    user: '张三',
    time: '2023-09-12',
    danwei: '检定单位',
  },
])
const total = ref(15)
const listQuery = ref({
  limit: 10,
  offset: 1,
})
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  // fetchData()
}
</script>

<template>
  <div style="width: 99%;">
    <div class="detail-container" :style="`height:${(height / 2)}px;margin-top:5px;`">
      <div class="top">
        <div class="title">
          <el-radio-group v-model="current">
            <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <!-- <div class="more">
          查看更多
        </div> -->
      </div>
      <div class="table">
        <bench-col
          icon=""
          title=""
          path-url=""
          :pagination="true"
          :query="listQuery"
          :total="total"
          @change="changePage"
        >
          <el-table
            :data="list"
            :height="(height / 2) - 100"
            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 label="#" width="55" align="center">
              <template #default="scope">
                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              v-for="item in columns"
              :key="item.value"
              :prop="item.value"
              align="center"
              :label="item.text"
              show-overflow-tooltip
              :width="item.width"
            />
          </el-table>
        </bench-col>
        <!-- <normal-table
          :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading"
          :is-showmulti-select="false" :height="`height:${(height / 2) - 150}px`" @change="changePage"
        > -->
        <!-- <template #columns>
            <el-table-column label="操作" width="140" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="handler(scope.row, 'detail')">
                  查看
                </el-button>
                <el-button link type="primary" size="small" @click="handler(scope.row, 'update')">
                  编辑
                </el-button>
                <el-button link type="danger" size="small" @click="delHandler(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </template> -->
        <!-- </normal-table> -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.green {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: green;
}

.red {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgb(228 85 29);
}

.detail-container {
  background: #fff;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;

  .top {
    display: flex;
    justify-content: space-between;

    .title {
      padding-left: 10px;
      font-size: 16px;
      font-weight: 700;
    }

    .more {
      color: blue;
    }
  }

  .search {
    display: flex;
    padding: 5px 10px;
    justify-content: space-between;

    .input {
      padding-left: 15px;
      width: 30%;
    }
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .pie1,
    .pie2 {
      width: 50%;
      position: relative;

      .title {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>