<template>
    <hc-drawer v-model="isShow" to-id="hc-project-list" is-close @close="drawerClose">
        <div class="hc-project-info-drawer relative h-full">
            <hc-tab-card :scrollbar="tabsKey === '1'" :tabs="tabsData" :tab-key="tabsKey" is-action-btn :disabled="isDisabled" @change="tabsChange">
                <HcInfo v-if="tabsKey === '1'" ref="infoRef" v-model="basicForm" />
                <HcTemplate v-if="tabsKey === '2'" ref="tempRef" v-model="basicForm" />
                <HcLogTemp v-if="tabsKey === '3'" ref="logRef" v-model="basicForm" />
                <HcUserTemp v-if="tabsKey === '4'" ref="userRef" v-model="basicForm" />
                <template #action>
                    <el-button hc-btn class="mr-4" :type="`${tabsKey === '4' ? 'success' : ''}`" :loading="submitLoading" @click="saveAndExit">保存并退出</el-button>
                    <el-button v-if="tabsKey > '1'" hc-btn :type="`${tabsKey === '4' ? '' : 'success'}`" :loading="submitLoading" @click="saveAndBackStep">保存并返回上一步</el-button>
                    <el-button v-if="tabsKey < '4'" hc-btn type="primary" :loading="submitLoading" @click="saveAndNextStep">保存并进入下一步</el-button>
                </template>
            </hc-tab-card>
        </div>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import HcInfo from './info.vue'
import HcTemplate from './template.vue'
import HcLogTemp from './log.vue'
import HcUserTemp from './user.vue'
import mainApi from '~api/project/project'
import { getObjValue, isNullES } from 'js-fast-way'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

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

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref(props.data)
watch(() => props.data, (data) => {
    dataInfo.value = data
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//处理相关数据
const isDisabled = ref(true)
const getDataApi = async () => {
    tabsKey.value = '1'
    //获取参数
    const info = getObjValue(dataInfo.value)
    isDisabled.value = isNullES(info.id)
    if (isNullES(info.id)) return
    //获取详情数据
    const { code, data } = await mainApi.detail(info.id)
    if (code !== 200) return
    //处理回显数据
    const res = getObjValue(data)
    res.projectAllMileage = Number(res.projectAllMileage)
    res.projectPavement = Number(res.projectPavement)
    res.projectSubgrade = Number(res.projectSubgrade)
    res.referenceWbsTemplateIdTrial = res.referenceWbsTemplateIdTrial != -1 ? res.referenceWbsTemplateIdTrial : ''
    res.estimatedAmount = Number(res.estimatedAmount) <= 0 ? 0 : res.estimatedAmount
    //获取wbs类型
    const templateType = isNullES(res.referenceWbsTemplateType) ? 'public' : res.referenceWbsTemplateType
    const { code: code1, data:data1 } = await mainApi.detail2({
        id: info.id,
        ReferenceWbsTemplateId: res.referenceWbsTemplateId,
        ReferenceWbsTemplateType: templateType,
    })
    if (code1 === 200) {
        const { wbsType } = getObjValue(data1)
        res.wbsType = wbsType
    }
    //设置回显数据
    basicForm.value = res
}

//选项卡
const tabsKey = ref('1')
const tabsData = ref([
    { key: '1', name: '项目基本信息' },
    { key: '2', name: '分配WBS模版' },
    { key: '3', name: '分配日志WBS' },
    { key: '4', name: '分配系统维护人员' },
])
const tabsChange = ({ key }) => {
    tabsKey.value = key
}

//基本信息表单
const basicForm = ref({})

//保存并退出
const saveAndExit = async () => {
    const isRes = await saveDataApi()
    if (!isRes) return
    drawerClose()
}

//保存并返回上一步
const saveAndBackStep = async () => {
    const type = tabsKey.value
    const isRes = await saveDataApi()
    if (!isRes) return
    isDisabled.value = false
    if (type === '4') {
        tabsKey.value = '3'
    } else if (type === '3') {
        tabsKey.value = '2'
    } else if (type === '2') {
        tabsKey.value = '1'
    }
}

//保存并进入下一步
const saveAndNextStep = async () => {
    const type = tabsKey.value
    const isRes = await saveDataApi()
    if (!isRes) return
    isDisabled.value = false
    if (type === '1') {
        tabsKey.value = '2'
    } else if (type === '2') {
        tabsKey.value = '3'
    } else if (type === '3') {
        tabsKey.value = '4'
    }
}

//ref
const infoRef = ref(null)
const tempRef = ref(null)
const logRef = ref(null)
const userRef = ref(null)

//保存数据
const submitLoading = ref(false)
const saveDataApi = async () => {
    //项目基本信息
    if (tabsKey.value === '1') {
        const isRes = await infoRef.value.isForm()
        if (!isRes) return false
        submitLoading.value = true
        const { code, data } = await mainApi.submit(basicForm.value)
        submitLoading.value = false
        if (code === 200) {
            basicForm.value = getObjValue(data)
            window?.$message?.success('保存成功')
        }
        return code === 200
    } else if (tabsKey.value === '2') {
        //分配WBS模版
        const obj = await tempRef.value.getTreeObj()
        submitLoading.value = true
        const { code } = await mainApi.submitWbsTreeInProject(obj)
        submitLoading.value = false
        if (code === 200) {
            window?.$message?.success('保存成功')
        }
        return code === 200
    } else if (tabsKey.value === '3') {
        const obj = await logRef.value.getTreeObj()
        submitLoading.value = true
        const { code } = await mainApi.submitLogWbsTreeInProject(obj)
        submitLoading.value = false
        if (code === 200) {
            window?.$message?.success('保存成功')
        }
        return code === 200
    } else {
        return true
    }
}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    basicForm.value = {}
    emit('close')
}
</script>

<style scoped lang="scss">
.hc-project-info-drawer {

}
</style>
