<template>
    <div class="panoramaPlan">
        <div class="header-box">
            <div class="search-item">
                <div class="search-label">
                    <!-- 节点名称： -->
                    {{$t('message.projectInfo.nodeName')+':'}}
                </div>
                <el-input
                        v-model="nodeName"
                        :placeholder="$t('message.projectInfo.placeholder')"
                        class=""
                ></el-input>
            </div>
            <el-button type="primary" @click="loadData">
                <!-- 查询 -->
                {{$t('message.projectInfo.query')}}
            </el-button>
            <el-button type="primary" @click="addForm">
                {{$t('message.projectInfo.add')}}
                <!-- 新增 -->
                </el-button>
        </div>
        <div class="table-box">
            <el-table class="tables" :data="tableData">
                <!-- 节点责任人编号 -->
                <el-table-column prop="chargerId" :label="$t('message.projectInfo.nodeOwnerID')"></el-table-column>
                <!-- 节点责任人 -->
                <el-table-column prop="chargerName" :label="$t('message.projectInfo.nodeResponsiblePerson')"></el-table-column>
<!--                <el-table-column prop="deliverable" label="成果物明细"></el-table-column>-->
<!--                <el-table-column label="节点失效标记">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.isDeleted ? '失效':'有效'}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="是否退回">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.isSendBack ? '是':'否'}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <!-- 节点级别 -->
                <el-table-column prop="levelId" :label="$t('message.projectInfo.nodeLevel')"></el-table-column>
                <!-- 节点等级名称 -->
                <el-table-column prop="levelName" :label="$t('message.projectInfo.nodeLevelName')"></el-table-column>
                <!-- 状态 -->
                <el-table-column width="150" :label="$t('message.projectInfo.status')">
                    <template slot-scope="scope">
                        {{options[scope.row.status - 2].label}}
                    </template>
                </el-table-column>
                <!-- 节点编号 -->
                <el-table-column prop="nodeCode" :label="$t('message.projectInfo.nodeNumber')"></el-table-column>
                <!-- 节点名称 -->
                <el-table-column prop="nodeName" :label="$t('message.projectInfo.nodeName')"></el-table-column>
                <!-- 职能条线 -->
                <el-table-column prop="phaseName" :label="$t('message.projectInfo.theFunctionLine')"></el-table-column>
                <!-- 计划完成时间 -->
                <el-table-column prop="plannedFinishDate" :label="$t('message.projectInfo.planCompleteTime')"></el-table-column>
                <!-- 实际完成时间 -->
                <el-table-column prop="actualFinishDate" :label="$t('message.projectInfo.realCompleteTime')"></el-table-column>
                <!-- 预计完成时间 -->
                <el-table-column prop="predictFinishDate" :label="$t('message.projectInfo.predictCompleteTime')"></el-table-column>
                <!-- 节点唯一标识 -->
                <el-table-column prop="uniqueCode" :label="$t('message.projectInfo.nodeOnlyMark')"></el-table-column>
                <!-- 版本ID -->
                <el-table-column prop="versionId" :label="$t('message.projectInfo.visionID')"></el-table-column>
                <!-- 操作 -->
                <el-table-column :label="$t('message.projectInfo.operation')" width="220">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-tickets" @click="previewData(scope.row)">
                            <!-- 查看 -->
                            {{$t('message.projectInfo.look')}}
                        </el-button>
                        <el-button type="text" icon="el-icon-edit-outline" @click="editData(scope.row)">
                            <!-- 编辑 -->
                            {{$t('message.projectInfo.edit')}}
                        </el-button>
                        <el-button class="delete-btn" type="text" icon="el-icon-delete" @click="deleteData(scope.row)">
                            <!-- 删除 -->
                            {{$t('message.projectInfo.delete')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="pagerBox"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="$store.state.PAGESIZRS"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="Number(total)"
                    background
            ></el-pagination>
        </div>
        <el-dialog
                class="dialog"
                :title="dialogTitle"
                :modal-append-to-body="false"
                :visible.sync="dialogVisible"
                @close="closeDialog"
                destroy-on-close
                width="50%"
        >
            <div class="dialog-content">
                <vue-scroll>
                    <el-form
                            ref="form"
                            :model="dialogdata"
                            :rules="rules"
                            label-width="130px"
                            size="medium"
                            class="dialogFormBox">
                        <el-form-item :label="$t('message.projectInfo.realCompleteTime')" prop="actualFinishDate">
                            <el-date-picker
                                    v-model="dialogdata.actualFinishDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    :disabled="formType == 3"
                                    :placeholder="$t('message.projectInfo.chooseDate')">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.planCompleteTime')" prop="plannedFinishDate" required>
                            <el-date-picker
                                    v-model="dialogdata.plannedFinishDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    :placeholder="$t('message.projectInfo.chooseDate')"
                                    :disabled="formType == 3">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.predictCompleteTime')" prop="predictFinishDate">
                            <el-date-picker
                                    v-model="dialogdata.predictFinishDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    :disabled="formType == 3"
                                    :placeholder="$t('message.projectInfo.chooseDate')">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.nodeOwnerID')" prop="chargerId" required>
                            <el-input
                                    v-model="dialogdata.chargerId"
                                    :disabled="formType == 3"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.nodeResponsiblePersonName')" prop="chargerName" required>
                            <el-input
                                    v-model="dialogdata.chargerName"
                                    :disabled="formType == 3"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                            ></el-input>
                        </el-form-item>
<!--                        <el-form-item label="成果物明细" prop="deliverable" required>-->
<!--                            <el-input-->
<!--                                    v-model="dialogdata.deliverable"-->
<!--                                    :disabled="formType == 3"-->
<!--                                    placeholder="请输入"-->
<!--                            ></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="节点失效标记" prop="isDeleted" required>-->
<!--                            <el-radio-group v-model="dialogdata.isDeleted" :disabled="formType == 3" size="medium">-->
<!--                                <el-radio :label="1">失效</el-radio>-->
<!--                                <el-radio :label="0">有效</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="是否退回" prop="isSendBack" required>-->
<!--                            <el-radio-group v-model="dialogdata.isSendBack" :disabled="formType == 3" size="medium">-->
<!--                                <el-radio :label="1">是</el-radio>-->
<!--                                <el-radio :label="0">否</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item :label="$t('message.projectInfo.nodeLevel')" prop="levelId" required>
                            <el-input
                                    v-model="dialogdata.levelId"
                                    :disabled="formType == 3"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.nodeLevelName')" prop="levelName" required>
                            <el-input
                                    v-model="dialogdata.levelName"
                                    :disabled="formType == 3"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                            ></el-input>
                        </el-form-item>
                        <!-- 节点编码 -->
                        <el-form-item :label="$t('message.projectInfo.nodeCode')" prop="nodeCode" required>
                            <el-input
                                    v-model="dialogdata.nodeCode"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                                    :disabled="formType == 3"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.nodeName')" prop="nodeName" required>
                            <el-input
                                    v-model="dialogdata.nodeName"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                                    :disabled="formType == 3"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.theFunctionLine')" prop="phaseName" required>
                            <el-input
                                    v-model="dialogdata.phaseName"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                                    :disabled="formType == 3"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.status')" prop="status" required>
                            <!-- 请选择 -->
                            <el-select v-model="dialogdata.status" :disabled="formType == 3" :placeholder="$t('message.projectInfo.pleaseChoose')">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.nodeOnlyMark')" prop="uniqueCode">
                            <el-input
                                    v-model="dialogdata.uniqueCode"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                                    :disabled="formType == 3"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('message.projectInfo.visionID')" prop="versionId" required>
                            <!-- 请输入 -->
                            <el-input
                                    v-model="dialogdata.versionId"
                                    :placeholder="$t('message.projectInfo.placeholder')"
                                    :disabled="formType == 3"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </vue-scroll>
            </div>
            <div class="dialog-btn" v-if="formType != 3">
                <el-button type="primary" @click="submitForm">
                    <!-- 确定 -->
                      {{$t('message.energyManage.material.confirm')}}
                </el-button>
                <el-button @click="closeDialog">
                    <!-- 取消 -->
                     {{$t('message.energyManage.material.cancel')}}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        addPanoramaNodePlan,
        editPanoramaNodePlan,
        deletePanoramaNodePlan,
        queryPanoramaNodePlan,
        queryByIdPanoramaNodePlan
    } from "@/assets/js/api/projectSummary.js";
    import {
        addProgressNodeLibraryApi,
        deleteProgressNodeLibraryApi,
        editProgressNodeLibraryApi,
        selectPageListApi,
        queryByIdProgressNodeLibraryApi
    } from "@/assets/js/api/NodeLibrary.js";

    import moment from "moment";
    export default {
        data(){
            return{
                dialogTitle: /* '添加计划', */this.$t('message.projectInfo.addPlan'),
                formType: 1, //1.新增 2.编辑 3.查看
                nodeName: "",
                tableData:[],
                dialogVisible: false,
                dialogdata:{
                    "actualFinishDate": "",//实际完成时间
                    "chargerId": "",//节点责任人编号
                    "chargerName": "",//节点责任人名称
                    // "createDate": "",//创建时间
                    // "deliverable": "",//成果物明细
                    // "isDeleted": "",//节点失效标记
                    // "isSendBack": "",//是否退回
                    "levelId": "",//节点级别
                    "levelName": "",//节点等级名称
                    "nodeCode": "",//节点编码
                    "nodeName": "",//节点名称
                    "phaseName": "",//职能条线
                    "plannedFinishDate": "",//计划完成时间
                    "predictFinishDate": "",//预计完成时间
                    "projectSn": "",//项目SN
                    "status": "",//状态2-已发布（进行中）,3-节点汇报审批中,4-计划审批中,6-归档（完成）
                    "uniqueCode": "",//节点唯一标识
                    "versionId": ""//版本ID
                },
                rules:{
                    chargerId: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeOwnerID')},
                    chargerName: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeResponsiblePerson')},
                    // deliverable: { required: true, message: '请输入成果物明细'},
                    // isDeleted: { required: true, message: '请选择节点失效标记'},
                    // isSendBack: { required: true, message: '请选择是否回退'},
                    levelId: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeLevel')},
                    levelName: { required: true, message:this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeLevelName')},
                    nodeCode: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeNumber')},
                    nodeName: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeName')},
                    phaseName: { required: true, message: this.$t('message.projectInfo.theFunctionLine')},
                    plannedFinishDate: {type: 'string', required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.planCompleteTime')},
                    status: { required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.status')},
                    uniqueCode: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeOnlyMark')},
                    versionId: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.visionID')},
                },
                options:this.$t('message.projectInfo.nodeOptions'),
                pageNo: 1,
                pageSize: 10,
                total: 0,
                projectSn: ""
            }
        },
        created(){
            this.projectSn = this.$store.state.projectSn;
            this.loadData()
        },
        methods:{
            loadData(){
                let data = {
                    nodeName: this.nodeName,
                    projectSn: this.projectSn,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                }
                selectPageListApi(data).then(res=>{
                    console.log(res);
                    if(res.code == 200){
                        this.tableData = res.result.records
                        this.total = res.result.total
                    }
                })
            },
            addForm(){
                this.dialogVisible = true
                this.dialogTitle = /* '添加计划' */this.$t('message.projectInfo.addPlan'),
                this.formType = 1
            },
            submitForm(){
                this.$refs['form'].validate((valid) => {
                    console.log(valid)
                    if(valid){
                        let data = this.dialogdata
                        data.projectSn = this.projectSn
                        console.log(data)
                        if(this.formType == 1){
                            addProgressNodeLibraryApi(data).then(res=>{
                                console.log(res)
                                if(res.code == 200){
                                    this.$message.success(this.$t('message.projectInfo.addSuccess')+'!')
                                    this.closeDialog()
                                    this.loadData()
                                }
                            })
                        } else if(this.formType == 2){
                            editProgressNodeLibraryApi(data).then(res=>{
                                console.log(res)
                                if(res.code == 200){
                                    this.$message.success(this.$t('message.projectInfo.editSuccess')+'!')
                                    this.closeDialog()
                                    this.loadData()
                                }
                            })
                        }
                    }
                })
            },
            closeDialog(){
                this.dialogVisible = false
                this.dialogdata = {}
                this.dialogdata = {
                    "actualFinishDate": "",//实际完成时间
                    "chargerId": "",//节点责任人编号
                    "chargerName": "",//节点责任人名称
                    // "createDate": "",//创建时间
                    // "deliverable": "",//成果物明细
                    // "isDeleted": "",//节点失效标记
                    // "isSendBack": "",//是否退回
                    "levelId": "",//节点级别
                    "levelName": "",//节点等级名称
                    "nodeCode": "",//节点编码
                    "nodeName": "",//节点名称
                    "phaseName": "",//职能条线
                    "plannedFinishDate": "",//计划完成时间
                    "predictFinishDate": "",//预计完成时间
                    "projectSn": "",//项目SN
                    "status": "",//状态2-已发布（进行中）,3-节点汇报审批中,4-计划审批中,6-归档（完成）
                    "uniqueCode": "",//节点唯一标识
                    "versionId": ""//版本ID
                }
            },
            handleSizeChange(val){
                this.pageSize = val
                this.loadData()
            },
            handleCurrentChange(val){
                this.pageNo = val
                this.loadData()
            },
            previewData(val){
                this.dialogdata = val
                this.dialogVisible = true
                this.dialogTitle = /* '查看计划' */this.$t('message.projectInfo.lookPlan')
                this.formType = 3
            },
            editData(val){
                this.dialogdata = val
                this.dialogVisible = true
                this.dialogTitle = /* '编辑计划' */this.$t('message.projectInfo.editPlan')
                this.formType = 2
            },
            deleteData(val){
                this.$confirm(this.$t('message.projectInfo.confirmTipText')+'?', this.$t('message.projectInfo.tip'), {
                    confirmButtonText: /* '确定' */this.$t('message.energyManage.material.confirm'),
                    cancelButtonText: /* '取消' */this.$t('message.energyManage.material.cancel'),
                    type: 'warning'
                }).then(() => {
                    deleteProgressNodeLibraryApi({id: val.id}).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                type: 'success',
                                message: /* '删除成功!' */this.$t('message.projectInfo.deleteSuccess')+'!'
                            });
                            this.loadData()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: /* '已取消删除' */this.$t('message.projectInfo.cancelDelete')+'!'
                    });
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .panoramaPlan{
        width: 100%;
        height: 100%;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        .header-box{
            margin-bottom: 20px;
            padding-left: 10px;
            .search-item{
                display: inline-flex;
                align-items: center;
                white-space: nowrap;
                margin-right: 20px;
                /deep/.el-input{
                    width: 200px;
                }
            }
        }
        .delete-btn{
            color: #F56C6C;
        }
        .dialogFormBox{
            width: 100%;
            padding: 0 30px;
            box-sizing: border-box;
            /deep/.el-form-item{
                display: inline-block;
                width: 50%;
                .el-select{
                    width: 260px !important;
                }
                .el-date-picker{
                    width: 260px !important;
                }
                .el-cascader{
                    width: 260px !important;
                }
                .el-input{
                    width: 260px !important;
                }
            }
        }
        .dialog-content{
            /*height: 360px;*/
            margin-bottom: 60px;
        }
        .dialog-btn{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    }
</style>
