<template>
    <div class="build-node-item" v-if="item" :class="showLabel ? 'show-lbl' : ''">
        <span class="lbl-title" v-show="showLabel">{{ item.nodeText }}</span>
        <el-form label-width="64px" ref="frm1" :model="item" :rules="rules">
            <el-col :span="5">
                <el-form-item label="计划开始时间" prop="planStartDate">
                    <el-date-picker v-model="item.planStartDate" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="计划完成时间" prop="planEndDate">
                    <el-date-picker v-model="item.planEndDate" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="实际开始时间" prop="startDate">
                    <el-date-picker v-model="item.startDate" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="实际完成时间" prop="endDate">
                    <el-date-picker v-model="item.endDate" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="成果" prop="files" class="form-file">
                    <el-popover placement="top" v-model="showPop">

                        <file-upload v-model="item.file" :showOriginal="true"></file-upload>
                        <template slot="reference">
                            <i class="el-icon-paperclip" style="cursor:pointer;" v-if="item.file.length == 0"></i>
                            <i class="el-icon-paperclip" style="cursor:pointer;" v-else>
                                <span style="color: #888;font-size: 12px;">
                                    {{ `(${item.file.length})个文件` }}
                                </span>
                            </i>
                        </template>

                    </el-popover>

                </el-form-item>
            </el-col>
            <el-button class="btn-save" type="success" @click="doSave" size="mini" round>保存</el-button>
        </el-form>

    </div>
</template>

<script>
import { updateBuild_node_data } from '@/api/project/build_node_data.js'
export default {
    name: 'RuoyiUiNodeItem',
    props: {
        showLabel: {
            type: Boolean,
            default: true
        },
        item: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            showPop: false,
            rules: {
                //planStartDate: [{ required: true, trigger: "blur", message: "请选择日期" }],
                //planEndDate: [{ required: true, trigger: "blur", message: "请选择日期" }]
            }
        };
    },

    mounted() {

    },

    methods: {
        doSave() {
            this.$refs.frm1.validate(v => {
                if (v) {
                    this.toSave();
                }
            })
        },
        toSave() {
            let o = this.item;
            let objs = (o.file || []).map(f => {
                return {
                    name: f.name,
                    original: f.original,
                    size: f.size,
                    uid: f.uid,
                    url: f.url,
                    ext: f.fileInfo?.ext || f.ext
                }
            });
            let postData = {
                id: o.id,
                nodeId: o.nodeId,
                planEndDate: o.planEndDate,
                planStartDate: o.planStartDate,
                projectId: o.projectId,
                startDate: o.startDate,
                endDate: o.endDate,
                files: JSON.stringify(objs)
            };
            updateBuild_node_data(postData).then(d => {
                if (d.code == 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.build-node-item {
    padding: 4px 0px;
    position: relative;

    .lbl-title {
        color: #409EFF;
        font-weight: bold;
        position: relative;
        top: -4px;
    }

    ::v-deep .el-form {
        position: relative;
        .el-form-item{
        &.form-file{
            .el-form-item__label {
            line-height: 36px;
        }
        }
        .el-form-item__label {
            line-height: 18px;
        }
    }
    }

    .btn-save {
        position: absolute;
        right: 8px;
        top: 4px;
    }

}</style>
