<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="key">
                                    <el-input v-model="formModel.key"/>
                                </el-form-item>
                                <el-form-item label="项目类型：" prop="key1">
                                    <el-select v-model="formModel.key1" block clearable placeholder="项目类型" size="large">
                                        <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="开始时间：" prop="key2">
                                    <el-date-picker class="block" v-model="formModel.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                                </el-form-item>
                                <el-form-item label="项目进程：" prop="key3">
                                    <el-select v-model="formModel.key3" block disabled="disabled" placeholder="项目进程" size="large">
                                        <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
                                    </el-select>
                                </el-form-item>
                            </HcCardItem>
                        </div>
                        <div class="project-form-bottom">
                            <HcCardItem title="合同信息">
                                <el-form-item label="负责人：" prop="key8">
                                    <el-input v-model="formModel.key8"/>
                                </el-form-item>
                                <el-form-item label="起止日期：">
                                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                                </el-form-item>
                                <el-form-item label="合同类型：">
                                    <el-select v-model="formModel.key5" block clearable placeholder="合同类型" size="large">
                                        <el-option v-for="item in contractType" :label="item.name" :value="item.key"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="合同额：">
                                    <el-input v-model="formModel.key6"/>
                                </el-form-item>
                                <el-form-item label="已回款：">
                                    <el-input v-model="formModel.key7"/>
                                </el-form-item>
                                <el-form-item label="上传合同：" v-if="dataType !== 'view'">
                                    <FormItemUpload v-model="formModel.key9"/>
                                </el-form-item>
                                <el-form-item label="上传合同：" v-else>
                                    <div class="form-item-div">xxxxx.pdf</div>
                                </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.type">
                            <div class="hac-time-line-box">
                                <div class="hac-time-line-title-box">
                                    <div class="title">{{item.title}}</div>
                                    <div class="state">{{item.state}}</div>
                                </div>
                                <div class="hac-time-line-time">
                                    <span class="time">{{item.time}}</span>
                                    <span class="icon text-blue text-hover" v-if="dataType !== 'view'" @click="item.editTime = true">
                                        <HcIcon name="edit-2"/>
                                    </span>
                                </div>
                                <div class="hac-time-line-time picker" v-if="item.editTime">
                                    <div class="picker-box">
                                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                                    </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'">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, onActivated} from "vue";
import {useRoute, useRouter} from 'vue-router'

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 ?? ''
})

//项目类型
const projectType = ref([
    {name: '二级路', key: '二级路'},
    {name: '国道', key: '国道'},
    {name: '水利水电', key: '水利水电'},
    {name: '市政', key: '市政'},
])

//合同类型
const contractType = ref([
    {name: '咨询服务+软件', key: '1'},
    {name: '软件', key: '2'},
    {name: '咨询服务', key: '3'},
    {name: '后期服务+软件', key: '4'},
    {name: '数字化扫描+软件', key: '5'},
])

//项目进程
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 = {
    key: {
        required: true,
        trigger: 'blur',
        message: "请输入项目名称"
    },
    key1: {
        required: true,
        trigger: 'blur',
        message: "请选择项目类型"
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: "请选择项目开始时间"
    },
    key3: {
        required: true,
        trigger: 'blur',
        message: "项目进程异常"
    },
    key8: {
        required: true,
        trigger: 'blur',
        message: "请输入负责人"
    },
}


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


//时间线数据
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 doubleClick = () => {

}
</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>
