<template>
    <hc-body split :options="bodySplitOptions" class="hc-tentative-acquisition-data">
        <template #left>
            <hc-card scrollbar>
                <template #header>
                    <span class="text-18px">数据采集分类</span>
                </template>
                <el-menu unique-opened>
                    <template v-for="(item, index) in menuData" :key="index">
                        <el-sub-menu :index="item.key">
                            <template #title>
                                <span>{{ item.name }}</span>
                            </template>
                            <template v-for="(items, indexs) in item.children" :key="indexs">
                                <el-menu-item :index="items.key">{{ items.name }}</el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </hc-card>
        </template>
        <hc-card>
            <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }">
                <template #key23="{ row }">
                    <span v-if="row.key23 === 1" class="text-green">合格</span>
                    <span v-else class="text-red">不合格</span>
                </template>
                <template #key24="{ row }">
                    <el-link v-if="row.key24 === 3" type="primary">选择</el-link>
                    <el-link v-if="row.key24 === 2" type="info">选择</el-link>
                    <el-link v-if="row.key24 === 1" type="warning">取消选择</el-link>
                </template>
            </hc-table>
            <template #action>
                <hc-pages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card>
    </hc-body>
</template>

<script setup>
import { onActivated, onDeactivated, ref } from 'vue'

//渲染完成
onActivated(() => {

})

//分割配置
const bodySplitOptions = {
  sizes: [16, 84],
  minSize: 240,
}

//搜索表单
const searchForm = ref({ current: 1, size: 20, total: 0 })

//分类数据
const menuData = ref([
  {
    key: '1',
    name: '压力机',
    children: [
      { key: '1-1', name: '水泥xxx1' },
      { key: '1-2', name: '水泥xxx2' },
      { key: '1-3', name: '水泥xxx3' },
    ],
  },
  {
    key: '2',
    name: '万能机',
    children: [
      { key: '2-1', name: '钢筋xxx1' },
      { key: '2-2', name: '钢筋xxx2' },
      { key: '2-3', name: '钢筋xxx3' },
    ],
  },
])

//分页被点击
const pageChange = ({ current, size }) => {
  searchForm.value.current = current
  searchForm.value.size = size
  getTableData()
}

//表格数据
const tableColumn = ref([
  { key: 'key1', name: '工程部位' },
  { key: 'key2', name: '设备名称' },
  { key: 'key3', name: '设备采集编号' },
  { key: 'key4', name: '试验日期' },
  { key: 'key5', name: '样品编号' },
  { key: 'key6', name: '试验类型' },
  { key: 'key7', name: '承压面积(mm2)' },
  { key: 'key8', name: '试件尺寸(mm)' },
  { key: 'key9', name: '设计强度(MPa)' },
  { key: 'key10', name: '龄期(d)' },
  { key: 'key11', name: '荷载1(KN)' },
  { key: 'key12', name: '荷载1(KN)' },
  { key: 'key13', name: '荷载2(KN)' },
  { key: 'key14', name: '荷载3(KN)' },
  { key: 'key15', name: '荷载4(KN)' },
  { key: 'key16', name: '荷载5(KN)' },
  { key: 'key17', name: '荷载6(KN)' },
  { key: 'key18', name: '其余荷载(KN)' },
  { key: 'key19', name: '强度代表值(MPa)' },
  {
    name: '最大力总延伸(%)',
    children: [
      { key: 'key20', name: '1' },
      { key: 'key21', name: '2' },
      { key: 'key22', name: '3' },
    ],
  },
  { key: 'key23', name: '试验结果是否合格', width: 100, align: 'center' },
  { key: 'key24', name: '操作', width: 100, align: 'center' },
])
const tableData = ref([
  { key23: 1, key24:1 }, { key23: 2, key24:2 }, { key23: 3, key24:3 },
])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {

}
</script>

<style lang="scss">
@import "~src/styles/tentative/acquisition/data";
</style>
