<template>
    <HcCard idRef="program-index-info-card">
        <template #header>
            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                <el-form-item label="计划类型：" prop="key1" size="large">
                    <el-radio-group v-model="formModel.key1">
                        <el-radio label="1">年度计划</el-radio>
                        <el-radio label="2">月度计划</el-radio>
                        <el-radio label="3">临时计划</el-radio>
                        <el-radio label="4">周计划</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="计划部门：" prop="key2" class="w-52">
                    <el-select v-model="formModel.key2" block clearable placeholder="计划部门">
                        <el-option v-for="item in department" :label="item.name" :value="item.key"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="计划名称：" prop="key3" class="w-72">
                    <el-input v-model="formModel.key3" placeholder="请输入计划名称" />
                </el-form-item>
                <el-form-item label="计划日期：" prop="key4" class="w-80">
                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                </el-form-item>
            </el-form>
        </template>
        <template #extra>
            <el-button type="primary" @click="addTableData">
                <HcIcon name="add"/>
                <span>新增</span>
            </el-button>
        </template>

        <HcTable :column="tableColumn" :datas="tableData">
            <template #key1="{row,index}">
                <el-select v-model="row.key1" placeholder="任务类型" v-if="row.isEditMode">
                    <el-option label="行政资源" value="1"/>
                    <el-option label="产品-设计原型" value="2"/>
                </el-select>
                <div v-else>{{row.key1}}</div>
            </template>
            <template #key2="{row,index}">
                <el-input v-model="row.key2" v-if="row.isEditMode"/>
                <div v-else>{{row.key2}}</div>
            </template>
            <template #key3="{row,index}">
                <el-input v-model="row.key3" v-if="row.isEditMode"/>
                <div v-else>{{row.key3}}</div>
            </template>
            <template #key4="{row,index}">
                <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" v-if="row.isEditMode"/>
                <div v-else>{{row.key4}}</div>
            </template>
            <template #key5="{row,index}">
                <el-input v-model="row.key5" v-if="row.isEditMode" disabled/>
                <div v-else>{{row.key5}}</div>
            </template>
            <template #key6="{row,index}">
                <el-select v-model="row.key6" placeholder="关联项目" v-if="row.isEditMode">
                    <el-option label="奉建路" value="1"/>
                    <el-option label="宝北路" value="2"/>
                </el-select>
                <div v-else>{{row.key6}}</div>
            </template>
            <template #key7="{row,index}">
                <div class="text-blue text-hover" @click="relevanceClick(row)">关联</div>
                <div class="text-green text-hover" v-if="false">已关联</div>
            </template>
            <template #key8="{row,index}">
                <el-select v-model="row.key8" placeholder="项目环节" v-if="row.isEditMode">
                    <el-option label="商机-演示沟通" value="1"/>
                    <el-option label="商机-成本核算及报价" value="2"/>
                </el-select>
                <div v-else>{{row.key8}}</div>
            </template>
            <template #key9="{row,index}">
                <el-select v-model="row.key9" placeholder="任务人" v-if="row.isEditMode">
                    <el-option label="张三" value="1"/>
                    <el-option label="李四" value="2"/>
                </el-select>
                <div v-else>{{row.key9}}</div>
            </template>
            <template #key10="{row,index}">
                <el-select v-model="row.key10" placeholder="任务人" v-if="row.isEditMode">
                    <el-option label="张三" value="1"/>
                    <el-option label="李四" value="2"/>
                </el-select>
                <div v-else>{{row.key10}}</div>
            </template>
            <template #key11="{row,index}">
                <el-select v-model="row.key11" placeholder="任务人" v-if="row.isEditMode">
                    <el-option label="张三" value="1"/>
                    <el-option label="李四" value="2"/>
                </el-select>
                <div v-else>{{row.key11}}</div>
            </template>
            <template #action="{row,index}">
                <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
                    <HcIcon name="check"/>
                    <span>完成</span>
                </el-button>
                <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
                    <HcIcon name="edit"/>
                    <span>编辑</span>
                </el-button>
                <el-button size="small" type="danger" @click="delTableData(row,index)">
                    <HcIcon name="delete-bin"/>
                    <span>删除</span>
                </el-button>
            </template>
        </HcTable>

        <template #action>
            <div class="hac-program-card-action">
                <div class="hac-action-tip text-red">
                    提示：如果计划还未制定完整，则可以点击暂存按钮进行保存，如果点击提交按钮，则计划会同步提交到上级领导和人事处，
                    提交之后的数据不可再进行修改和删除，只能进行任务废除处理！
                </div>
                <div class="hac-action-btn">
                    <el-button size="large" type="info" hc-btn>
                        <HcIcon name="save"/>
                        <span>暂存内容</span>
                    </el-button>
                    <el-button size="large" type="primary" hc-btn @click="commitProgram">
                        <HcIcon name="check-double"/>
                        <span>提交保存</span>
                    </el-button>
                </div>
            </div>
        </template>

        <!--关联预算-->
        <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联项目成本预算" widths="62rem">
            <HcTable :isIndex="false" :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
                <template #action="{row,index}">
                    <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
                        <HcIcon name="link" :line="false"/>
                        <span>关联</span>
                    </el-button>
                    <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
                        <HcIcon name="link-unlink-m" :line="false"/>
                        <span>取消</span>
                    </el-button>
                </template>
            </HcTable>
            <template #leftRowFooter>
                <el-button size="large" @click="closeRelatedClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button size="large" type="primary" @click="saveRelatedClick">
                    <HcIcon name="check"/>
                    <span>确认关联</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
            </template>
        </HcDialog>


    </HcCard>
</template>

<script setup>
import {ref} from "vue";
import {delMessage} from "~uti/tools";

//选择部门
const department = ref([
    {name: '研发部门', key: '1'},
    {name: '业务部门', key: '2'},
    {name: '人事部门', key: '3'},
])

//顶部表单数据
const formRef = ref(null)
const formModel = ref({key1: '', key2: '', key3: ''})
const formRules = {
    key2: {
        required: true,
        trigger: 'blur',
        message: "请选择计划部门"
    },
    key3: {
        required: true,
        trigger: 'blur',
        message: "请输入计划名称"
    },
    key4: {
        required: true,
        trigger: 'blur',
        message: "请选择计划日期"
    }
}

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

//计划表
const tableColumn = [
    {key: 'key1', name: '任务类型', width: '200'},
    {key: 'key2', name: '任务描述', width: '200'},
    {key: 'key3', name: '完成指标', width: '200'},
    {key: 'key4', name: '起止日期', width: '260'},
    {key: 'key5', name: '总工作日', width: '140'},
    {key: 'key6', name: '关联项目', width: '160'},
    {key: 'key7', name: '关联预算', width: '160', align: 'center'},
    {key: 'key8', name: '项目环节', width: '200'},
    {key: 'key9', name: '任务人', width: '140'},
    {key: 'key10', name: '协助人员', width: '140'},
    {key: 'key11', name: '部门负责人', width: '140'},
    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: true},
])

//新增工资预算表格
const addTableData = () => {
    tableData.value.unshift({isEditMode: true})
}

//删除工资预算表格
const delTableData = (row,index) => {
    delMessage(() => {
        if (!row.id)  {
            tableData.value.splice(index, 1)
        }
    })
}

//关联预算弹窗
const relatedLoading = ref(false)
const relatedModal = ref(false)

//关联预算
const relevanceClick = (row) => {
    relatedLoading.value = false
    relatedModal.value = true
}

//预算分页和搜索
const searchBudgetForm = ref({current: 1, size: 20, total: 0})
const pageBudgetChange = ({current, size}) => {
    searchBudgetForm.value.current = current
    searchBudgetForm.value.size = size
}

//预算表格
const tableBudgetLoading = ref(false)
const tableBudgetColumn = [
    {key: 'key', name: '项目环节', width: '160', align: 'center'},
    {key: 'key1', name: '预算类型', width: '100', align: 'center'},
    {key: 'key2', name: '任务明细', width: '160', align: 'center'},
    {key: 'key3', name: '预算金额', width: '120', align: 'center'},
    {key: 'key4', name: '任务完成标准'},
    {key: 'key5', name: '投入人员数量', width: '120', align: 'center'},
    {key: 'action', name: '操作', width: '90', align: 'center'},
]
const tableBudgetData = ref([
    {id: 1, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
    {id: 2, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
    {id: 3, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
    {id: 4, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
])

//关闭关联预算弹窗
const closeRelatedClick = () => {
    relatedLoading.value = false
    relatedModal.value = false
}

//提交关联预算弹窗
const saveRelatedClick = () => {
    relatedLoading.value = false
    relatedModal.value = false
}


//提交计划
const commitProgram = () => {
    window?.$messageBox?.alert('请核对清楚计划内容！一旦提交，将无法进行自由修改计划内容', '提交提醒', {
        showCancelButton: true,
        confirmButtonText: '确认提交',
        cancelButtonText: '取消',
        type: 'info',
        callback: (action) => {
            if (action === 'confirm') {
                console.log('111')
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.hac-program-card-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .hac-action-tip {
        position: relative;
        font-size: 14px;
        margin-right: 30px;
        flex: 1;
    }
    .hac-action-btn {
        position: relative;
        margin-left: 60px;
    }
}
</style>

<style lang="scss">

</style>
