<template>
    <div class="targetCustom">
        <div class="title">年度目标指标制定</div>
        <el-divider />
        <TransBox ref="transBoxRef" :transData="transData" :currentLevel="currentLevel" :currentName="currentDeptName"
            :upperDisplay="upperDisplay" />
        <!-- 保存 下一步 关闭 -->
        <div class="footer">
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button type="primary" @click="handleNext">下一步</el-button>
            <el-button type="primary" @click="handleClose">关闭</el-button>
        </div>
    </div>
</template>

<script setup>
import TransBox from "./transBox.vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ref, onMounted } from "vue"
import { ElMessage } from "element-plus"
// import { useRouter } from "vue-router"
// const router = useRouter()
const transBoxRef = ref(null)
const currentLevel = ref("")
const props = defineProps({
    currentType: {
        type: String,
        default: "100000"
    },
    currentDeptCode: {
        type: String,
        default: "5200520100"
    },
    currentDeptName: {
        type: String,
        default: "甘肃省烟草专卖局（公司）"
    }
})
const queryData = ref({
    type: props.currentType,
    deptCode: props.currentDeptCode
})
const upperDisplay = ref('')
const transData = ref([])
const getData = () => {
    postApi(queryData.value, "/mosty-jcgl/safety/index/listIndexByCondition").then(
        (res) => {
            transData.value = res.dataList || []
            currentLevel.value = res.level
            upperDisplay.value = res.upperDisplay
        }
    )
}
const emit = defineEmits(["close", "next"])
const handleSave = () => {
    const data = transBoxRef.value?.rightData
    const data2 = transBoxRef.value?.leftData
    console.log(`output->transBoxRef`, data)
    if (!data.length && !data2.length) {
        ElMessage.warning("暂无数据可进行保存")
        return
    }
    const temp = {
        type: props.currentType,
        deptCode: props.currentDeptCode,
        deptName: props.currentDeptName,
        dataList: data.map((item) => {
            return {
                id: item.ids,
                targetName: item.name,
                targetType: item.targetType,
                targetValue: item.expectValue,
                targetValueType: item.targetValueType,
                targetMeasurementUnit: item.unit,
                canEdit: !item.isFixed
            }
        })
    }
    postApi(temp, "/mosty-jcgl/safety/index/replaceIndex").then(() => {
        ElMessage.success("保存成功")
        emit("close")
    })
}
const handleNext = () => {
    const data = transBoxRef.value?.rightData
    const data2 = transBoxRef.value?.leftData
    if (!data.length && !data2.length) {
        ElMessage.warning("暂无数据可操作")
        return
    }
    if (!data.length) {
        ElMessage.warning("请添加数据再进行下一步操作")
        return
    }
    const temp = {
        type: props.currentType,
        deptCode: props.currentDeptCode,
        deptName: props.currentDeptName,
        dataList: data.map((item) => {
            return {
                id: item.ids,
                targetName: item.name,
                targetType: item.targetType,
                targetValue: item.expectValue,
                targetValueType: item.targetValueType,
                targetMeasurementUnit: item.unit,
                canEdit: !item.isFixed
            }
        })
    }

    postApi(temp, "/mosty-jcgl/safety/index/replaceIndex").then(() => {
        emit("next", currentLevel.value)
    })
}
const handleClose = () => {
    console.log("关闭")
    emit("close")
}
onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss";

.targetCustom {
    width: 100%;
    // border: 1px solid var(--el-color-primary);
    position: absolute;
    height: calc(100vh - 150px);
    background-color: #fff;
    overflow-x: auto;
    z-index: 999;
    top: 0;

    .title {
        height: 39px;
        line-height: 39px;
        font-size: 18px;
        color: var(--el-color-primary);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
    }

    // 居中
    .footer {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}
</style>
