<template>
    <HcCard actionUi="text-center">
        <div class="hac-card-project-box">
            <div class="left-box">
                <el-scrollbar>
                    <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large" :disabled="dataType === 'view'">
                        <div class="project-form-top">
                            <HcCardItem title="基础信息">
                                <el-form-item label="项目名称：" prop="name">
                                    <el-input v-model="formModel.name"/>
                                </el-form-item>
                                <el-form-item label="建设单位：" prop="constructUnit">
                                    <el-input v-model="formModel.constructUnit"/>
                                </el-form-item>
                                <el-form-item label="项目类型：" prop="projectType">
                                    <el-select v-model="formModel.projectType" block clearable placeholder="项目类型">
                                        <el-option v-for="item in projectType" :label="item.dictName" :value="item.dictValue"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="项目进程：" prop="key3">
                                    <el-select v-model="formModel.key3" block disabled="disabled" placeholder="项目进程">
                                        <el-option v-for="item in projectProcess" :label="item.dictName" :value="item.key"/>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="项目进程：" prop="currentProcessName">
                                    <el-input v-model="formModel.currentProcessName" disabled/>
                                </el-form-item> -->
                                <el-form-item label="服务类型：" prop="projectServerType">
                                    <el-select v-model="formModel.projectServerType" block clearable placeholder="项目服务类型">
                                        <el-option v-for="item in serverType" :label="item.dictName" :value="item.dictValue"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="起止日期：">
                                    <HcDatePicker :dates="probetweenTime" clearable @change="betweenTimeUpdate" size="large" disabled="disabled" />
                                </el-form-item>
                                <el-form-item label="合同额：">
                                    <el-input v-model="formModel.contractMoney" disabled="disabled"/>
                                </el-form-item>
                                <el-form-item label="已回款：">
                                    <el-input v-model="formModel.key7" disabled="disabled"/>
                                </el-form-item>
                                <el-form-item label="未回款：">
                                    <el-input v-model="formModel.key7" disabled="disabled"/>
                                </el-form-item>
                                <el-form-item label="已支出：">
                                    <el-input v-model="formModel.key7" disabled="disabled"/>
                                </el-form-item>
                            </HcCardItem>
                        </div>
                        <div class="project-form-bottom">
                            <HcCardItem title="联系人信息">
                                <el-form-item label="项目负责人：">
                                    <el-select v-model="formModel.projectPrincipal" block clearable placeholder="项目负责人" size="large">
                                        <el-option v-for="item in userList" :label="item.name" :value="item.id"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="实施负责人：">
                                    <el-select v-model="formModel.implementPrincipal" block clearable placeholder="实施负责人" size="large">
                                        <el-option v-for="item in userList" :label="item.name" :value="item.id"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="维护负责人：">
                                    <el-select v-model="formModel.maintainPrincipal" block clearable placeholder="维护负责人" size="large">
                                        <el-option v-for="item in userList" :label="item.name" :value="item.id"/>
                                    </el-select>
                                </el-form-item>
                            </HcCardItem>
                        </div>
                    </el-form>
                </el-scrollbar>
            </div>
            <div class="right-box">
                <el-scrollbar class="hc--right-15">
                    <el-timeline class="p-1">
                        <el-timeline-item v-for="(item, index) in timeLineData" :key="index" :type="item.status===3?'success':item.status===2?'primary':'info'">
                            <div class="hac-time-line-box">
                                <div class="hac-time-line-title-box">
                                    <div class="title">{{item.name}}</div>
                                    <div class="state">{{item.statusValue}}</div>
                                </div>
                                <div class="hac-time-line-time">
                                    <span class="time" v-if="item.processStartTime">{{item.processStartTime+"~"+item.processEndTime}}</span>
                                    <span class="icon text-blue text-hover" v-if="dataType !== 'view'" @click="editTime(item)">
                                        <HcIcon name="edit-2"/>
                                    </span>
                                </div>
                                <div class="hac-time-line-time picker" v-if="item.editTime">
                                    <div class="picker-box">
                                        <HcDatePicker :dates="item.betweenTime" clearable @change="probetweenTimeUpdate($event,item)"/>
                                    </div>
                                    <div class="icon-box text-blue text-hover" @click="item.editTime = false">
                                        <HcIcon name="check"/>
                                    </div>
                                </div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </el-scrollbar>
            </div>
        </div>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span v-if="dataType !== 'view'">取消并返回</span>
                <span v-else>返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="doubleClick" v-if="dataType !== 'view'" :loading="saveLoading">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, onActivated,onMounted} from "vue";
import {useRoute, useRouter} from 'vue-router'
import projectApi from '~api/project/project-list.js';
import {getArrValue,getObjValue,formValidate} from "js-fast-way"
import { getuserList} from "~api/other";
import {useAppStore} from "~src/store";
const useAppState = useAppStore();

const router = useRouter()
const useRoutes = useRoute()

//初始变量
const dataType = ref(useRoutes?.query?.type ?? 'view')
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    dataType.value = useRoutes?.query?.type ?? 'view'
    dataId.value = useRoutes?.query?.id ?? ''
    getBaseProcess()
    getUserDict()
    if(dataType.value!=='add'){
        getProjectInfoById()
    }else{
        formModel.value={}
    }
   
})
onMounted(()=>{
    getProjectType()
    getProjectServerTypeDict()
  
})
//获取项目类型
const getProjectType=async()=>{
    const {error, code, data} = await projectApi.getProjectTypeDict()
    if (!error && code === 200) {
        projectType.value=getArrValue(data)
    } else {
        projectType.value=[]
    }
}
//获取项目服务类型
const getProjectServerTypeDict=async()=>{
    const {error, code, data} = await projectApi.getProjectServerTypeDict()
    if (!error && code === 200) {
        serverType.value=getArrValue(data)
    } else {
        serverType.value=[]
    }
}
//获取所有员工
const userList=ref([])
//获取部门人员列表
const getUserDict=async()=>{
    const {error, code, data} = await getuserList({tenantId:useAppState.tenantId})
    if (!error && code === 200) {
        userList.value = getArrValue(data)

    } else {
        userList.value = []

    }
}
//获取项目详情
const getProjectInfoById=async()=>{
    const {error, code, data} = await projectApi.getProjectInfoById({id: dataId.value})
    if (!error && code === 200) {
        formModel.value=getObjValue(data)
        let arr=[]
        arr[0]= formModel.value?.startTime
        arr[1]= formModel.value?.endTime
        probetweenTime.value=arr
        formModel.value.contractMoney=formModel.value.contractMoney>0?formModel.value.contractMoney:''
        timeLineData.value=formModel.value?.projectProcessList
    } else {
        formModel.value={}
    }
}
//新增获取项目进程
const getBaseProcess=async()=>{
    const {error, code, data} = await projectApi.getBaseProcess()
    if (!error && code === 200) {
        timeLineData.value=getArrValue(data)
    } else {
        timeLineData.value=[]

    }
}
//项目类型
const projectType = ref([])

//项目服务类型
const serverType = ref([])
const contractType=ref([])
//项目进程
const projectProcess = ref([
    {name: '商机-演示沟通', key: '1'},
    {name: '商机-成本核算及报价', key: '2'},
    {name: '合同-服务范围洽谈', key: '3'},
    {name: '产品-研发', key: '4'},
    {name: '产品-配置', key: '5'},
    {name: '产品-测试', key: '6'},
    {name: '产品-交付', key: '7'},
    {name: '实施-系统培训', key: '8'},
    {name: '实施-现场服务', key: '9'},
    {name: '实施-合同回款', key: '10'},
    {name: '项目验收', key: '11'},
])

//顶部表单数据
const formRef = ref(null)
const formModel = ref({
    key1: '', key2: '', key3: '', key4: '', key5: '',
})
const formRules = {
    name: {
        required: true,
        trigger: 'blur',
        message: "请输入项目名称"
    },
    projectType: {
        required: true,
        trigger: 'blur',
        message: "请选择项目类型"
    },
    constructUnit: {
        required: true,
        trigger: 'blur',
        message: "请选择项目建设单位"
    },

}


//日期时间被选择
const probetweenTime = ref(null)
const betweenTimeUpdate = ({arr, query}) => {
    console.log(arr,'arr');
    probetweenTime.value = arr
    formModel.value.betweenTime = query
    formModel.value.startTime=arr[0]
    formModel.value.endTime=arr[1]
    console.log(formModel.value.startTime,'sta');
    if(arr.length===0){
        formModel.value.startTime=''
        formModel.value.endTime=''
        console.log( formModel.value.endTime,'end');
    }
}
const betweenTime = ref(null)
const probetweenTimeUpdate = ({arr, query},item) => {
    betweenTime.value = arr
    item.processStartTime=arr[0]
    item.processEndTime=arr[1]
    item.betweenTime=arr
}
const editTime=(item)=>{
    item.editTime = true
    item.betweenTime=[item.processStartTime,item.processEndTime]
}
//时间线数据
const timeLineData = ref([
    {title: '商机-沟通演示', state: '已闭环', time: '2023-02-23~2023-03-14', type: 'success'},
    {title: '商机-成本核算及报价', state: '已闭环', time: '2023-02-23~2023-03-14'},
    {title: '合同-服务范围洽谈', state: '进行中', time: '2023-02-23~2023-03-14', type: 'primary'},
    {title: '产品-研发', state: '未开始', time: ''},
    {title: '产品-配置', state: '未开始', time: ''},
    {title: '产品-测试', state: '未开始', time: ''},
    {title: '产品-交付', state: '未开始', time: ''},
    {title: '实施-系统培训', state: '未开始', time: ''},
    {title: '实施-现场服务', state: '未开始', time: ''},
    {title: '实施-合同回款', state: '未开始', time: ''},
    {title: '劳务合同', state: '未开始', time: ''},
    {title: '交竣工验收', state: '未开始', time: ''},
])

//返回
const goBackClick = () => {
    router.back()
}
const saveLoading=ref(false)
//提交保存
const doubleClick =async () => {
    formModel.value.projectProcessList=timeLineData.value
    const res = await formValidate(formRef.value)
    if (res&&dataId.value.length>0) {
        formModel.value.id=dataId.value
        updateProjectInfo()
    }else{
        addProjectInfo()
    }

}
//新增项目
const addProjectInfo=async()=>{
    saveLoading.value=true;
    const {error, code, data,msg} = await projectApi.addProjectInfo( formModel.value)
    saveLoading.value=false;
    if (!error && code === 200) {
        window.$message.success(msg)
    } 

}
//修改
const updateProjectInfo=async()=>{
    saveLoading.value=true;
    const {error, code, data,msg} = await projectApi.updateProjectInfo( formModel.value)
    saveLoading.value=false;
    if (!error && code === 200) {
       window.$message.success(msg)
    } 

}
</script>

<style lang="scss" scoped>
.hac-card-project-box {
    position: relative;
    height: 100%;
    display: flex;
    .left-box, .right-box {
        flex: 1;
        position: relative;
        height: 100%;
    }
    .left-box {
        .project-form-top {
            margin-bottom: 24px;
            padding-right: 24px;
        }
        .project-form-bottom {
            padding-top: 24px;
            padding-right: 24px;
            border-top: 1px solid #e9e9e9;
        }
    }
    .right-box {
        padding-left: 24px;
        border-left: 1px solid #e9e9e9;
        .hac-time-line-box {
            position: relative;
            .hac-time-line-title-box {
                position: relative;
                display: flex;
                align-items: center;
                font-size: 16px;
                color: black;
                margin-bottom: 12px;
                justify-content: space-between;
            }
            .hac-time-line-time {
                position: relative;
                display: flex;
                align-items: center;
                .time {
                    color: gray;
                    margin-right: 8px;
                }
                .icon {
                    font-size: 18px;
                }
                &.picker .icon-box {
                    font-size: 20px;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>

<style lang="scss">

</style>
