<template>
    <hc-body split class="hc-tentative-collect-test-body">
        <template #left>
            <hc-card scrollbar>
                <template #header>
                    <div class="text-18px">汇总分类</div>
                </template>
                <div
                    v-for="(item) in testOpt" :key="item.id" class="mb-4"
                    :class="item.id === curItem?.id ? 'bg-slate-200' : ''" @click="handleItem(item)"
                >
                    <i class="ri-circle-fill" />
                    {{ item.className }}
                </div>
            </hc-card>
        </template>
        <hc-card>
            <template #header>
                <div class="w-50">
                    <el-select v-model="searchForm.contractId" placeholder="请选择" @change="changeContract">
                        <el-option
                            v-for="item in contractOptions" :key="item.id" :label="item.contractName"
                            :value="item.id"
                        />
                    </el-select>
                </div>
                <div class="ml-2 w-40">
                    <el-select
                        v-model="searchForm.detectionType" clearable block placeholder="检测类别"
                        @change="changeType"
                    >
                        <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="ml-2 w-40">
                    <el-select v-model="searchForm.key1" clearable block placeholder="单位类型">
                        <el-option label="测试1" value="1" />
                        <el-option label="测试2" value="2" />
                    </el-select>
                </div>
                <div class="ml-2 w-64">
                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
                </div>
            </template>
            <template #extra>
                <HcTooltip keys="tentative_collect_test_print">
                    <el-button hc-btn color="#567722" @click="addClick">
                        <HcIcon name="add" />
                        <span>新增</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_collect_test_download">
                    <el-button
                        hc-btn color="#A16222" :loading="downLoading" :disabled="tableCheckedKeys.length === 0"
                        @click="downClick"
                    >
                        <HcIcon name="download" />
                        <span>下载</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_collect_test_del">
                    <el-button hc-btn color="#e03997" :disabled="tableCheckedKeys.length === 0" @click="delModalClick">
                        <HcIcon name="delete-bin-2" />
                        <span>删除</span>
                    </el-button>
                </HcTooltip>
            </template>
            <HcTable
                ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
                is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                @selection-change="tableSelection"
            >
                <template #action="{ row }">
                    <el-link type="primary" @click="viewPdf(row)">查看</el-link>
                    <el-link type="primary" @click="relatedSearchClick(row)">查阅关联</el-link>
                </template>
            </HcTable>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card>

        <!-- 新增/编辑 -->
        <hc-new-dialog
            v-model="addFormShow" :loading="addFormLoading" title="新增分类" widths="30rem"
            @close="addModalClose" @save="addModalSave"
        >
            <el-form
                ref="addFormRef" :model="addFormModal" :rules="addFormRules" label-position="left"
                label-width="auto" size="large"
            >
                <el-form-item class="mb-0" label="合同段:" prop="contractId">
                    <el-select v-model="addFormModal.contractId" placeholder="请选择">
                        <el-option
                            v-for="item in contractOptions" :key="item.id" :label="item.contractName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item class="mb-0 mt-4" label="汇总类别:" prop="classId">
                    <el-select v-model="addFormModal.classId" placeholder="请选择">
                        <el-option v-for="item in testOpt" :key="item.id" :label="item.className" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item class="mb-0 mt-4" label="报告时间:">
                    <HcDatePicker :dates="addbetweenTime" clearable @change="addbetweenTimeUpdate" />
                </el-form-item>
            </el-form>
            <el-form-item class="mb-0 mt-4" label="单位类型:" prop="unitType	">
                <el-select v-model="addFormModal.unitType	" placeholder="请选择">
                    <el-option v-for="item in unitOpt" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item class="mb-0 mt-4" label="检测类型:" prop="detectionType">
                <el-select v-model="addFormModal.detectionType" placeholder="请选择">
                    <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
        </hc-new-dialog>

        <!-- 查阅关联 -->
        <hc-dialog
            v-model="isRelatedSearch" :footer="false" is-table title="查阅关联" widths="80%" :padding="false"
            @close="relatedSearchModalClose"
        >
            <div class="hc-related-search-box relative mt-10px">
                <hc-card-item title="样品信息">
                    <hc-table :column="relatedColumn1" :datas="relatedData1" :is-index="false" />
                </hc-card-item>
                <hc-card-item title="委托单信息" class="mt-14px">
                    <hc-table :column="relatedColumn2" :datas="relatedData2" :is-index="false" />
                </hc-card-item>
                <hc-card-item title="设备采集信息" class="mt-14px">
                    <hc-table :column="relatedColumn3" :datas="relatedData3" :is-index="false" />
                </hc-card-item>
            </div>
        </hc-dialog>
    </hc-body>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { download, getContractList, getPage, getSummaryList, removeByIds, save } from '~api/tentative/collect/test'
import { arrToId, getArrValue, isString } from 'js-fast-way'
import { HcDelMsg } from 'hc-vue3-ui'
import { getDictionary } from '~api/other'
import { toPdfPage } from '~uti/btn-auth'

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)

const isCollapse = ref(useAppState.getCollapse)

const contractOptions = ref([])
//监听
watch(() => [
    useAppState.getCollapse,
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//渲染完成
onMounted(async () => {
    await gettypeData()
    await getContractOpt()
    await getTextOpt()
    getTableData()
})

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

//获取合同段列表
const getContractOpt = async () => {
    const { error, code, data } = await getContractList({
        contractId: contractId.value,
        projectId: projectId.value,
    })
    //判断状态
    if (!error && code === 200) {
        let resdata = getArrValue(data)
        contractOptions.value = resdata
        if (contractOptions.value.length > 0) {
            searchForm.value.contractId = contractOptions.value[0].id
        }
    } else {
        contractOptions.value = []
    }
}

//获取汇总分类列表
const testOpt = ref([])
const getTextOpt = async () => {
    const { error, code, data } = await getSummaryList()
    //判断状态
    if (!error && code === 200) {
        let resdata = getArrValue(data)
        testOpt.value = resdata
        if (testOpt.value.length > 0) {
            curItem.value = testOpt.value[0]
        }

    } else {
        testOpt.value = []
    }
}
const curItem = ref(null)
const handleItem = (item) => {
    curItem.value = item
    getTableData()
}
//检测类别
const typeData = ref([])
//获取检测类别

const gettypeData = async () => {
    const { data } = await getDictionary({
        code: 'trial_detection_category',
    })
    //处理数据
    let newArr = []
    const newData = getArrValue(data)
    for (let i = 0; i < newData.length; i++) {
        newArr.push({
            label: newData[i]['dictValue'],
            value: Number(newData[i]['dictKey']),
        })
    }
    typeData.value = newArr
}


//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ arr, query }) => {
    betweenTime.value = arr
    searchForm.value.startDate = arr[0]
    searchForm.value.endDate = arr[1]
    getTableData()
}
const addbetweenTime = ref(null)
const addbetweenTimeUpdate = ({ arr, query }) => {
    addbetweenTime.value = arr
    addFormModal.value.startDate = arr[0]
    addFormModal.value.endDate = arr[1]

}

//选择检测类别
const changeType = () => {
    getTableData()
}
const changeContract = () => {
    getTableData()
}


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

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    { key: 'summaryNumber', name: '汇总编号' },
    { key: 'classIdName', name: '汇总类别' },
    { key: 'detectionTypeName', name: '检测类型' },
    { key: 'summaryDateName', name: '汇总日期' },
    { key: 'key1', name: '单位类型' },
    { key: 'action', name: '操作', width: 100 },
])

//获取数据
const tableLoading = ref(false)
const tableData = ref([])
const getTableData = async () => {
    if (!searchForm.value.contractId) {
        window.$message.warning('请选择合同段')
        return
    }
    if (curItem.value) {
        const { error, code, data } = await getPage({
            ...searchForm.value,
            classId: curItem.value?.id,
        })
        //判断状态
        if (!error && code === 200) {
            tableData.value = getArrValue(data?.records)
            searchForm.value.total = data?.total ?? 0
        } else {
            tableData.value = []
            searchForm.value.total = 0
        }
    } else {
        window.$message.warning('请先选择汇总分类')
    }

}

//多选
const tableCheckedKeys = ref([])
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item ?? '') !== ''
    })
}

//删除
const delModalClick = () => {
    if (tableCheckedKeys.value.length === 0) {
        window.$message.warning('请先选择数据')
        return
    }
    HcDelMsg(async (resolve) => {
        await removeContractTreeNode()
        resolve() //关闭弹窗的回调
    })
}
const removeContractTreeNode = async () => {
    const loadingInstance = window.$loading.service({
        fullscreen: true,
        text: '删除节点中，请耐心等待...',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    const { error, code, msg } = await removeByIds({
        ids: arrToId(tableCheckedKeys.value),
    })
    loadingInstance.close()
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
        getTableData()
    } else {
        window.$message.error(msg)
    }
}
//左右拖动，改变树形结构宽度
const leftWidth = ref(382)
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
    }
}
//查看pdf
const viewPdf = (row) => {
    const { pdfUrl } = row
    if (pdfUrl) {
        toPdfPage(pdfUrl)
    } else {
        window.$message.warning('暂无数据')
    }
}

//新增试验汇总
const addFormModal = ref({})
const addFormShow = ref(false)
const addFormLoading = ref(false)
const addClick = () => {

    addFormShow.value = true

}
const addModalClose = () => {
    addFormShow.value = false
    addFormModal.value = {}

}

const addFormRules = ref(null)
const addFormRef = ref(null)

const addModalSave = async () => {
    console.log(addFormModal.value)
    addFormLoading.value = true
    const { error, code, msg } = await save({
        ...addFormModal.value,

    })
    addFormLoading.value = false
    //判断状态
    if (!error && code === 200) {
        window.$message.success(msg)
        addFormShow.value = false
        getTableData()

    }
}
const unitOpt = ref([
    { name: '施工', id: '1' },
])
const downLoading = ref(false)
const downClick = async () => {
    downLoading.value = true
    const { error, code, data } = await download({
        ids: arrToId(tableCheckedKeys.value),
    })
    downLoading.value = false

    const res = isString(data) ? data || '' : ''
    if (!error && code === 200 && res) {
        window.open(res, '_blank')
    }
}

//关联查阅
const isRelatedSearch = ref(false)
const relatedSearchClick = (row) => {
    isRelatedSearch.value = true
}

//样品信息
const relatedColumn1 = [
    { key: 'key1', name: '取样名称' },
    { key: 'key2', name: '取样日期' },
    { key: 'key3', name: '取样编号' },
    { key: 'key4', name: '规格型号' },
    { key: 'key5', name: '试样数量' },
    { key: 'key6', name: '计算单位' },
    { key: 'key7', name: '拟用部位' },
    { key: 'key8', name: '代表数量' },
    { key: 'key9', name: '取样人' },
    { key: 'key10', name: '入库时间' },
    { key: 'key11', name: '试验时间' },
    { key: 'key12', name: '样品处理' },
    { key: 'key13', name: '时间(或处理原因)' },
]
const relatedData1 = ref([])

//委托单信息
const relatedColumn2 = [
    { key: 'key1', name: '委托单位' },
    { key: 'key2', name: '委托单编号' },
    { key: 'key3', name: '委托名称' },
    { key: 'key4', name: '委托状态' },
]
const relatedData2 = ref([])

//设备采集信息
const relatedColumn3 = [
    { 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' },
]
const relatedData3 = ref([])

//关闭关联查阅
const relatedSearchModalClose = () => {
    isRelatedSearch.value = false
}
</script>

<style lang="scss" scoped>
.title_box {
    font-size: 24px;
    font-weight: bolder;
}
</style>
