<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
                    <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                </div>
            </div>
            <div class="hc-tree-search-box">
                <div class="hc-search-tree-val">
                    <el-input v-model="searchTreeVal" block size="large" placeholder="请输入名称关键词检索" clearable @keyup="searchTreeKeyUp">
                        <template #suffix>
                            <HcIcon name="search-2" ui="text-xl"/>
                        </template>
                    </el-input>
                </div>
                <div class="hc-tree-scrollbar" v-loading="treeLoading" element-loading-text="获取数据中...">
                    <el-scrollbar>
                        <KeepAlive>
                            <template v-if="isSearchTree">
                                <HcTreeData :datas="searchTreeData" @change="testTreeCheckChange"/>
                            </template>
                            <template v-else>
                                <TestTree :projectId="projectId" :contractId="contractId" @change="testTreeCheckChange"/>
                            </template>
                        </KeepAlive>
                    </el-scrollbar>
                </div>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard>
                <template #header>
                    <div class="w-40">
                        <el-select v-model="searchForm.type" placeholder="请选择材料类别" clearable size="large">
                            <el-option v-for="item in typeData" :key="item.value" :label="item['label']" :value="item['value']"/>
                        </el-select>
                    </div>
                    <div class="w-64 ml-2">
                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" size="large"/>
                    </div>
                    <div class="ml-2">
                        <el-button type="primary" @click="searchClick" size="large">
                            <HcIcon name="search-2"/>
                            <span>搜索</span>
                        </el-button>
                    </div>
                </template>
                <template #extra>
                    <HcTooltip keys="tentative_collect_monthly_report">
                        <el-button type="primary" hc-btn>
                            <HcIcon name="send-plane-2"/>
                            <span>上报</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_monthly_print">
                        <el-button hc-btn>
                            <HcIcon name="printer"/>
                            <span>打印</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_monthly_download">
                        <el-button hc-btn>
                            <HcIcon name="download"/>
                            <span>下载</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <div class="hc-table-ref-box">
                    <el-table class="hc-table-diy-box" :data="tableData" :span-method="tableSpanMethod" height="100%" style="width: 100%">
                        <el-table-column label="试验组数" width="300" align="right">
                            <el-table-column prop="title" label="试验项目" width="220" align="left"></el-table-column>
                            <el-table-column prop="month" label="月" align="center" width="80"></el-table-column>
                        </el-table-column>
                        <el-table-column label="承包人" align="center">
                            <el-table-column prop="name" label="合格数" align="center"></el-table-column>
                            <el-table-column prop="state" label="不合格数" align="center"></el-table-column>
                            <el-table-column prop="zip" label="备注" align="center"></el-table-column>
                        </el-table-column>
                        <el-table-column label="操作" width="140" align="center">
                            <template #default="scope">
                                <!--scope.row scope.$index-->
                                <HcTooltip keys="tentative_material_approach_annex">
                                    <el-button type="primary" size="small" plain @click="editorsNoteModalClick(scope.row)">编辑备注</el-button>
                                </HcTooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>

        <!--编辑备注-->
        <HcDialog :show="editorsNoteModal" title="编辑备注信息" widths="45rem" :loading="editorsNoteLoading" @close="editorsNoteModalClose" @save="editorsNoteModalSave">
            <el-input v-model="editorsNoteVal" type="textarea" placeholder="编辑备注信息" :autosize="{ minRows: 5}"/>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {useAppStore} from "~src/store";
import {useRouter, useRoute} from 'vue-router'
import TestTree from "./components/TestTree.vue"
import HcTreeData from "./components/HcTreeData.vue"
import queryApi from "~api/data-fill/query";
import {getArrValue} from "vue-utils-plus"

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()

//全局变量
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse)

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

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

})

//树搜索
const isSearchTree = ref(false)
const searchTreeVal = ref('')
const searchTreeData = ref([])

//回车
const treeLoading = ref(false)
const searchTreeKeyUp = (e) => {
    if (e.key === "Enter") {
        searchTreeClick()
    }
}

const searchTreeClick = async () => {
    if (searchTreeVal.value) {
        isSearchTree.value = true
        treeLoading.value = true
        const {data} = await queryApi.searchContractTree({
            contractId: contractId.value,
            queryValue: searchTreeVal.value
        })
        //判断状态
        treeLoading.value = false
        searchTreeData.value = getArrValue(data)
    } else {
        treeLoading.value = false
        isSearchTree.value = false
    }
}

//树被勾选
const nodeItemInfo = ref({})
const testTreeCheckChange = ({data, checkeds}) => {
    console.log(data, checkeds)
    //nodeItemInfo.value = data
    //searchForm.value.current = 1;
    //getTableData()
}

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

//检测类别
const typeData = ref([
    {label: '自检', value: '1'},
    {label: '抽检', value: '2'},
    {label: '平行试验', value: '3'},
    {label: '验证试验', value: '4'},
    {label: '中心试验', value: '5'}
])

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr,query}) => {
    betweenTime.value = arr
    searchForm.value.betweenTime = query
}

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

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

//表格合并
const tableSpanMethod = ({rowIndex, columnIndex}) => {
    if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
            return {
                rowspan: 2,
                colspan: 1,
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            }
        }
    }
}

//获取数据
const tableLoading = ref(false)
const tableData = ref([
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '本月',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '累计',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '本月',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '累计',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '本月',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '累计',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
])
const getTableData = () => {

}


//新增/编辑
const editorsNoteModal = ref(false)
const editorsNoteVal = ref('')
const editorsNoteModalClick = (row) => {
    editorsNoteModal.value = true
}

//保存
const editorsNoteLoading = ref(false)
const editorsNoteModalSave = () => {
    editorsNoteModal.value = true
}
const editorsNoteModalClose = () => {
    editorsNoteModal.value = false
}


//左右拖动，改变树形结构宽度
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;
    }
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.hc-table-ref-box {
    height: 100%;
    border: 0;
    .el-table.hc-table-diy-box {
        --el-table-bg-color: initial;
        --el-table-header-bg-color: #DAE8F3;
        --el-table-header-text-color: #50545E;
        --el-table-tr-bg-color: #F1F5F8;
        --el-fill-color-light: #e7ebee;
        --el-table-text-color: #666666;
        --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
        &.el-table--border {
            --el-table-border-color: #d7d7d7;
        }
        thead.is-group {
            background: none;
            //表头字体
            tr:first-of-type th:first-of-type,
            tr:first-of-type th:first-of-type {
                .cell {
                    display: inline-flex;
                    font-size: 16px;
                    line-height: initial;
                    position: relative;
                }
            }
            //表头其他样式
            tr:first-of-type th:first-of-type {
                border-bottom: none;
                .cell {
                    top: 7px;
                }
            }
            tr:last-of-type th:first-of-type {
                border-right: 0;
                .cell {
                    top: -7px;
                }
            }
            //斜线
            tr:last-of-type th:nth-of-type(2) {
                .cell {
                    visibility: hidden;
                    line-height: 0;
                    padding: 0;
                }
                &::before, {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 308px;
                    background-color: #d7d7d7;
                    display: block;
                    bottom: 0;
                    right: 0;
                    transform: rotate(-75.5deg);
                    transform-origin: bottom;
                }
            }
        }
    }
}
</style>
