<template>
    <HcCard actionUi="text-center">
        <template #header>
            <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
        </template>
        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #key9="{row}">
                <el-select v-model="row.key9" size="small">
                    <el-option label="选项1" value="选项1"/>
                    <el-option label="选项2" value="选项2"/>
                </el-select>
            </template>
            <template #action="{row,index}">
                <el-button size="small" type="primary" @click="openPlanModalShow(row)">开启</el-button>
                <el-button size="small" type="danger" @click="pausePlanModalShow(row)">暂停</el-button>
            </template>
        </HcTable>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>

        <!--开启计划-->
        <HcDialog bgColor="#ffffff" isToBody title="开启计划" widths="40rem" saveText="保存"
                  :show="openPlanModal" @close="openPlanCloseClick" @save="openPlanSaveClick"
        >
            <HcListItem title="原计划起止日期：" content="2023-02-23~2023-02-28"/>
            <HcListItem title="中途暂停计划起止日期：" content="2023-02-23~2023-02-28"/>
            <HcListItem title="中途开启计划起止日期：" isCenter>
                <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate"/>
            </HcListItem>
            <HcListItem title="原计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="原计划截止暂停阶段起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="中途暂停之后开启计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <div class="mt-8">
                <el-alert type="warning" title="提示：" description="该计划暂停之后开启的工时加上暂停前的工时已经超出原计划工时，是否安排不合理，请从新安排！" :closable="false"/>
            </div>
        </HcDialog>

        <!--暂停计划-->
        <HcDialog bgColor="#ffffff" isToBody title="暂停计划" widths="40rem" saveText="保存"
                  :show="pausePlanModal" @close="pausePlanCloseClick" @save="pausePlanSaveClick"
        >
            <HcListItem title="原计划起止日期：" content="2023-02-23~2023-02-28"/>
            <HcListItem title="中途暂停计划日期：" isCenter>
                <el-date-picker type="date" class="block" value-format="YYYY-MM-DD"/>
            </HcListItem>
            <HcListItem title="中途开启计划起止日期：" content="2023-02-23~2023-02-28"/>
            <HcListItem title="原计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="原计划截止暂停阶段起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="中途暂停之后开启计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
        </HcDialog>

    </HcCard>
</template>

<script setup>

import {useRouter,useRoute} from 'vue-router'
import {onActivated, ref,watch} from "vue";
import sectionApi from '~api/program/section.js';
import {getArrValue,getObjValue,formValidate} from "js-fast-way"

const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')
const dataType = ref(useRoutes?.query?.type ?? '')
const planDate=ref(useRoutes?.query?.month ?? '')
const departmentType=ref(useRoutes?.query?.section ?? '')
//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    dataType.value = useRoutes?.query?.type ?? ''
    planDate.value = useRoutes?.query?.month ?? ''
    departmentType.value = useRoutes?.query?.section ?? ''
    getDepartmentPlan()
    if(dataType.value!=='add'){
        // getDepartmentPlan()
    
    }else if(dataType.value=='add'){
  
    }

 
})
//获取详情
const getDepartmentPlan=async()=>{
    const {error, code, data} = await sectionApi.getDepartmentPlan(
        {
            departmentType:departmentType.value,
            planDate:planDate.value,
           
        }
    )
    if (!error && code === 200) {
        console.log(getArrValue(data),'详情');
        tableData.value=getArrValue(data)
     
       

    } else {
        // milestoneData.value=[]
    }
}

//类型tab数据和相关处理
const tabKey = ref('key1')
const tabTab = ref([
    {key: 'key1', name: '市场部月度预算'},
    {key: 'key2', name: '研发部月度预算'},
    {key: 'key3', name: '实施部月度预算'},
    {key: 'key4', name: '维护部月度预算'},
    {key: 'key5', name: '人事行政(财务)部月度预算'},
]);
const tabChange = ({key}) => {
    tabKey.value = key
}


//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'projectName', name: '所属项目', minWidth: '160'},
    {key: 'projectProcessValue', name: '项目环节', width: '160', align: 'center'},
    {key: 'budgetTypeValue', name: '预算类型', width: '160', align: 'center'},
    {key: 'taskDetailValue', name: '任务明细', width: '160', align: 'center'},
    {key: 'planTaskType', name: '任务类型', width: '160', align: 'center'},
    {key: 'planTaskDesc', name: '任务描述', minWidth: '160', isTooltip: true},
    {key: 'planTarget', name: '完成指标', width: '160', align: 'center'},
    {key: 'taskUser', name: '任务人', width: '160', align: 'center'},
    {key: 'key10', name: '计划起止日期', width: '220', align: 'center'},
    {key: 'budgetTravelExpense', name: '预计差旅费(元)', width: '180', align: 'center'},
    {key: 'statusValue', name: '状态', width: '100', align: 'center'},
    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
    {id: 2, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
    {id: 3, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
    {id: 4, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
])

const getTableData = () => {

}

//开启计划
const openPlanModal = ref(false)
const openPlanModalShow = (row) => {
    openPlanModal.value = true
}
const openPlanCloseClick = () => {
    openPlanModal.value = false
}
const openPlanSaveClick = () => {

}

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



//暂停计划
const pausePlanModal = ref(false)
const pausePlanModalShow = (row) => {
    pausePlanModal.value = true
}
const pausePlanCloseClick = () => {
    pausePlanModal.value = false
}
const pausePlanSaveClick = () => {

}


//返回
const goBackClick = () => {
    router.back()
}

//提交保存
const saveClick = () => {

}
</script>
