<template>
    <hc-body split :options="bodySplitOptions" class="hc-tentative-acquisition-data">
        <template #left>
            <hc-card scrollbar>
                <template #header>
                    <span class="text-18px">数据采集分类</span>
                </template>
                <template #extra>
                    <el-button _icon hc-btn size="small" type="primary" @click="addDataFormModal">
                        <hc-icon name="add" />
                    </el-button>
                </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" @contextmenu.prevent.stop="itemsContextMenu($event, items)">
                                    {{ items.name }}
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                </el-menu>
                <!-- 右键菜单 -->
                <hc-context-menu ref="contextMenuItemRef" :datas="menuItemData" @item-click="handleMenuItemSelect" />
            </hc-card>
        </template>
        <hc-card>
            <template #header>
                <div class="w-200px">
                    <el-select v-model="searchForm.contractId" placeholder="选择合同段" filterable block>
                        <el-option v-for="item in contractData" :key="item.id" :label="item.contractName" :value="item.id" />
                    </el-select>
                </div>
                <div class="ml-2 w-40">
                    <el-select v-model="searchForm.dataQualified" placeholder="是否合格" filterable clearable block>
                        <el-option label="合格" :value="1" />
                        <el-option label="不合格" :value="2" />
                    </el-select>
                </div>
                <div class="ml-2 w-40">
                    <el-select v-model="searchForm.dataStatus" placeholder="数据状态" filterable clearable block>
                        <el-option label="已引用" :value="2" />
                        <el-option label="未引用" :value="1" />
                    </el-select>
                </div>
                <div class="ml-2 w-250px">
                    <hc-date-picker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
                </div>
                <div class="ml-2">
                    <el-button type="primary" @click="searchClick">
                        <hc-icon name="search-2" />
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
            <template #extra>
                <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn type="warning">
                    <hc-icon name="eye-off" />
                    <span>隐藏</span>
                </el-button>
                <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn type="danger">
                    <hc-icon name="delete-bin-2" />
                    <span>删除</span>
                </el-button>
            </template>
            <hc-table
                :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check
                :index-style="{ width: 60 }" :check-style="{ width: 29 }" @selection-change="tableSelection"
            >
                <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-tag v-if="row.key24 === 1" type="success" effect="dark">已引用</el-tag>
                    <el-tag v-else type="info" effect="dark">未引用</el-tag>
                </template>
            </hc-table>
            <template #action>
                <hc-pages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card>

        <!-- 新增/编辑 -->
        <hc-new-dialog v-model="dataFormModal" :title="`${formModel.id ? '编辑' : '新增'}分类`" is-footer-center widths="25rem" @close="dataFormModalClose">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
                <el-form-item label="上级设备：" prop="key1">
                    <el-select v-model="formModel.key1" placeholder="父级" filterable block>
                        <el-option label="测试" value="1" />
                        <el-option label="测试" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称：" prop="key2">
                    <el-input v-model="formModel.key2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dataFormModalClose">取消</el-button>
                <el-button hc-btn type="primary" @click="dataFormSave">确定</el-button>
            </template>
        </hc-new-dialog>
    </hc-body>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import { useAppStore } from '~src/store'
import { getErtractInfo } from '~api/other'
import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
import mainApi from '~api/tentative/acquisition/data'

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

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

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

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

//获取合同段信息
const contractData = ref([])
const getContractData = async () => {
    const { data } = await getErtractInfo({
        projectId: projectId.value,
        contractId: contractId.value,
    })
    const res = getArrValue(data)
    contractData.value = res
    if (res.length > 0) {
        searchForm.value.contractId = res[0].id
        searchClick()
    }
}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ arr }) => {
    betweenTime.value = arr
    if (arr.length > 0) {
        searchForm.value.startTime = arr[0]
        searchForm.value.endTime = arr[1]
    } else {
        searchForm.value.startTime = null
        searchForm.value.endTime = null
    }
}

//分类数据
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 contextMenuItemRef = ref(null)
const menuItemData = ref([
    { icon: 'edit-2', label: '修改', key: 'test-1' },
    { icon: 'delete-bin-2', label: '删除', key: 'test-2' },
])

//右键菜单
const itemsContextMenu = (event, item) => {
    event.preventDefault()
    contextMenuItemRef.value?.showMenu(event)
}

//右键菜单被点击
const handleMenuItemSelect = (item) => {
    console.log('菜单被点击', item)
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

//分页被点击
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 },
])

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

}

//多选
const tableCheckedKeys = ref([])
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

//表单数据
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请填写处理原因',
    },
}

//弹窗
const dataFormModal = ref(false)
const addDataFormModal = () => {
    dataFormModal.value = true
}

//确定保存
const dataFormSave = () => {
    dataFormModalClose()
}

//取消弹窗
const dataFormModalClose = () => {
    dataFormModal.value = false
}
</script>

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