<template>
    <div class="hc-layout-box">
        <div :style="`width:${leftWidth}px;`" class="hc-layout-left-box bg-white">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack" />
                </div>
                <div class="ml-2 project-name-box">
                    <span class="project-alias">{{ projectInfo.name }}</span>
                </div>
            </div>
            <div class="hc-tree-box">
                <el-scrollbar>
                    <HcLazyTree :auto-expand-keys="treeAutoExpandKeys" is-type @load="treeLoadNode" @nodeTap="wbsElTreeClick" />
                    <!-- WbsTree :autoExpandKeys="treeAutoExpandKeys" :classifyType="classifyType" :contractId="contractId"
                             :projectId="projectId" @nodeTap="wbsElTreeClick"/ -->
                </el-scrollbar>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div v-loading="isLoading" class="hc-chart-content-box">
            <BarChart ref="barChartRef" :datas="barChartDatas" />
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getStoreValue, setStoreValue } from '~src/utils/storage'
import BarChart from './components/echarts/BarChart.vue'
import { getArrValue, getObjValue } from 'js-fast-way'
import DataApi from '~api/schedule/data'
import queryApi from '~api/data-fill/query'


//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)
const contractInfo = ref(useAppState.getContractInfo)
const { contractType } = contractInfo.value
const classifyType = ref(contractType === 2 ? '2' : '1')
//监听
watch(() => [
    useAppState.getCollapse,
], ([Collapse]) => {
    isCollapse.value = Collapse
    barChartRef.value?.onResize()
})

//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('scheduleTreeKeys') || [])
const barChartRef = ref(null)

//懒加载的数据
const treeLoadNode = async ({ node, item, level }, resolve) => {
    let contractIdRelation = '', parentId = '', primaryKeyId = ''
    if (level !== 0) {
        const nodeData = getObjValue(item)
        contractIdRelation = nodeData?.contractIdRelation || ''
        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
        primaryKeyId = nodeData?.id || ''
    }
    //获取数据
    const { data } = await queryApi.queryWbsTreeData({
        contractId: contractId.value || '',
        contractIdRelation,
        primaryKeyId,
        parentId,
        classifyType: classifyType.value,
        tableOwner:classifyType.value,
    })
    resolve(getArrValue(data))
}

//树被点击
const treeItemInfo = ref({})
const wbsElTreeClick = ({ data, keys }) => {
    treeItemInfo.value = data
    //缓存自动展开
    treeAutoExpandKeys.value = keys
    setStoreValue('scheduleTreeKeys', keys)
    //获取数据
    queryNeiWaiYeProgress()
}

//获取数据
const isLoading = ref(false)
const barChartDatas = ref([])
const queryNeiWaiYeProgress = async () => {
    //获取数据
    isLoading.value = true
    const { primaryKeyId, contractIdRelation } = treeItemInfo.value
    const { error, code, data } = await DataApi.queryNeiWaiYeProgress({
        projectId: projectId.value,
        contractId: contractIdRelation ? contractIdRelation : contractId.value,
        contractIdRelation: contractId.value,
        primaryKeyId,
    })
    //处理数据
    isLoading.value = false
    if (!error && code === 200) {
        barChartDatas.value = getArrValue(data)
    } else {
        barChartDatas.value = []
    }
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(382)
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        const diffVal = ve.clientX - leftNum
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal
        }
    }
    document.onmouseup = () => {
        barChartRef.value?.onResize()
        document.onmousemove = null
        document.onmouseup = null
    }
}
</script>

<style lang="scss" scoped>
@import '../../styles/schedule/write.scss';
</style>
