<template>
    <div class="billof-quantities">
        <el-card shadow="hover">
            <el-form :model="state.queryForm" :inline="true">
                <el-form-item label="版本号" prop="versions">
                    <el-select v-model="state.queryForm.versions" placeholder="选择版本号" @change="handleChange">
                        <el-option v-for="item in state.options" :key="item.versions" :label="item.versions"
                            :value="item.versions" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="openTable(true, index)">一键展开</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="openTable(false, index)">一键收起</el-button>
                </el-form-item>
                <el-form-item>
                    <el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel" :show-file-list="false">
                        <template #trigger>
                            <el-button type="primary">上传excel</el-button>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-card>
        <el-table :ref="(el) => tableRef[index] = el" :data="state.tableData"
            style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);" row-key="id" border
            :default-expand-all="state.isOpen">
            <el-table-column prop="num" label="编号" />
            <el-table-column prop="name" label="工程或费用名称" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column prop="remark" label="备注" />
        </el-table>
    </div>
</template>

<script setup name="billofQuantities">
import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue'
import { obtainAllVersionNumbers, importExcelFile, obtainTheList, sheetList } from "@/api/design/billofQuantities/index"
import { useUserStoreHook } from '@/store/modules/user';
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const { proxy } = getCurrentInstance();
const { work_order_type } = toRefs(proxy?.useDict('work_order_type'));
const tableRef = ref({});
// tableData
// 版本号
const state = reactive({
    work_order_type: 0,
    // 版本号
    version_num: '',
    options: [],// 版本号选项
    queryForm: {
        projectId: currentProject.value?.id,
        versions: '',
        sheet: '',
        pageSize: 20,
        pageNum: 1
    },
    tableData: [],
})
onMounted(() => {
    getVersionNums();
})
// 上传excel
function importExcel(options) {
    console.log(options);
    let formData = new FormData();
    formData.append("file", options.file);
    importExcelFile({ workOrderType: state.work_order_type, projectId: currentProject.value?.id }, formData).then(res => {
        const { code } = res;
        if (code == 200) {
            proxy.$modal.msgSuccess(res.msg || '导入成功');
            // 更新列表
            getVersionNums()
        } else {
            proxy.$modal.msgError(res.msg || '导入失败');
        }
    })
}
// 切换表名
function handleChange(version) {
    console.log('version', version);
}
</script>
<style>
.billof-quantities {
    padding: 20px;
}
</style>