<template>
    <div class="adding-form-dialog-box">
        <div class="dialog-tree-box">
            <el-scrollbar>
                <TestTree :autoExpandKey="testTreeExpandKeys"
                          :contractId="contractId"
                          :projectId="projectId"
                          :tenantId="tenant_id"
                          :wbsId="wbsTempId"
                          :wbsType="wbs_type"
                          @nodeTap="testElTreeClick"/>
            </el-scrollbar>
        </div>
        <div class="dialog-table-box">
            <div class="dialog-search">
                <div class="w-64 ml-2">
                    <HcDatePicker :dates="testBetweenTime" clearable @change="testBetweenTimeUpdate"/>
                </div>
                <div class="ml-2">
                    <el-button type="primary" @click="testSearchClick">
                        <HcIcon name="search-2"/>
                        <span>搜索</span>
                    </el-button>
                </div>
            </div>
            <div class="dialog-table">
                <HcTable :column="testDialogTableColumn" :datas="testDialogTableData" :loading="testDialogTableLoading">
                    <template #reportNo="{row}">
                        <span class="text-link" @click="testTableRowName(row)">{{ row?.reportNo }}</span>
                    </template>
                </HcTable>
            </div>
            <div class="dialog-pages">
                <HcPages :pages="testSearchFormPage" @change="testSearchFormPageChange"/>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import TestTree from "./testTree.vue"
import {getArrValue} from "vue-utils-plus"
import {getStoreData, setStoreData} from "~uti/storage";
import samplingApi from "~api/tentative/material/sampling";

const props = defineProps({
    projectId: [String, Number],
    contractId: [String, Number],
    wbsId: [String, Number],
    tenantId: [String, Number],
    wbsType: [String, Number],
})

const projectId = ref(props.projectId);
const contractId = ref(props.contractId);

const wbsTempId = ref(props.wbsId)
const tenant_id = ref(props.tenantId)
const wbs_type = ref(props.wbsType)

const testTreeExpandKeys = ref([])

//监听
watch(() => [
    props.projectId,
    props.contractId,
    props.wbsId,
    props.tenantId,
    props.wbsType,
], ([pid, cid, wbs_id, tid, type]) => {
    projectId.value = pid
    contractId.value = cid
    wbsTempId.value = wbs_id
    tenant_id.value = tid
    wbs_type.value = type
})

//渲染完成
onMounted(() => {
    testTreeExpandKeys.value = getStoreData('testTreeAutoExpandKeys') || []
})

//事件
const emit = defineEmits(['change'])

//实验树被点击
const treeId = ref('')
const testElTreeClick = ({data, keys}) => {
    const nodeId = data?.primaryKeyId || ''
    treeId.value = nodeId
    testSearchFormPage.value.nodeId = nodeId
    testSearchClick()
    //缓存展开的节点
    testTreeExpandKeys.value = keys.value || []
    setStoreData('testTreeAutoExpandKeys', keys.value)
}

//搜索表单
const testSearchFormPage = ref({
    startTime: null, endTime: null, nodeId: null, current: 1, size: 20, total: 0
})

//时间日期
const testBetweenTime = ref([])
const testBetweenTimeUpdate = ({arr}) => {
    testBetweenTime.value = arr
    testSearchFormPage.value.startTime = arr[0]
    testSearchFormPage.value.endTime = arr[1]
}

//搜索
const testSearchClick = () => {
    testSearchFormPage.value.current = 1;
    getDialogTableData()
}

//分页
const testSearchFormPageChange = ({current, size}) => {
    testSearchFormPage.value.current = current
    testSearchFormPage.value.size = size
    getDialogTableData()
}

//表格数据
const testDialogTableColumn = ref([
    {key: 'reportNo', name: '报告编号'},
    {key: 'reportDate', name: '报告日期'},
    {key: 'projectPositionName', name: '工程用途及部位'},
    {key: 'detectionResultName', name: '检测结果'},
])
const testDialogTableData = ref([])

//获取表格数据
const testDialogTableLoading = ref(false)
const getDialogTableData = async () => {
    testDialogTableLoading.value = true
    const {error, code, data} = await samplingApi.gettrialPage({
        ...testSearchFormPage.value,
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据
    testDialogTableLoading.value = false
    if (!error && code === 200) {
        testDialogTableData.value = getArrValue(data['records'])
        testSearchFormPage.value.total = data.total || 0
    } else {
        testDialogTableData.value = []
        testSearchFormPage.value.total = 0
    }
}

//名称被点击
const testTableRowName = (row) => {
    emit('change', {row: row, treeId: treeId.value})
}
</script>

<style lang="scss">
//关联试验数据
.adding-form-dialog-box {
    position: relative;
    height: 100%;
    display: flex;
    .dialog-tree-box {
        position: relative;
        border-right: 1px solid #EEEEEE;
        width: 500px;
        height: 100%
    }
    .dialog-table-box {
        position: relative;
        flex: 1;
        height: 100%;
        padding: 18px;
        .dialog-search {
            position: relative;
            display: flex;
        }
        .dialog-table {
            position: relative;
            height: calc(100% - 68px);
            padding: 18px 0;
        }
        .dialog-pages {
            position: relative;
        }
    }
}
</style>
