<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-select style="margin-right: 10px" v-model="alarmType" class="alarmTypeBox">
              <el-option v-for="(item,index) in ProgressPlanBidSectionList" :key="index" :value="item.id" :label="item.projectfName"></el-option>
          </el-select>
        <el-button type="primary" @click="loadDataTwo">
            <!-- 查询 -->
            {{$t('message.projectInfo.query')}}
        </el-button>
        <el-button type="primary" @click="Refresh">
            <!-- 刷新 -->
             {{$t('message.projectInfo.fresh')}}
        </el-button>
        <el-button type="primary" @click="addForm">
            <!-- 刷新 -->
             {{$t('message.projectInfo.add')}}
        </el-button>
      </div>
      <div class="table-box">
          <vue-scroll style="height: 668px">
              <el-table :data="tableData">
                <!-- 标段名称 -->
                  <el-table-column v-if="COMPANY=='sccr'" align="center" prop="crSectionName" :label="$t('message.projectInfo.sectionName')"></el-table-column>
                  <el-table-column v-else align="center" prop="projectfName" :label="$t('message.projectInfo.sectionName')"></el-table-column>
                 <!-- 节点编号 -->
                  <el-table-column align="center" prop="nodeCode" :label="$t('message.projectInfo.nodeNumber')"></el-table-column>
                  <!-- 节点名称 -->
                  <el-table-column align="center" prop="nodeName" width="160px" :label="$t('message.projectInfo.nodeName')"></el-table-column>
                  <!-- 节点类型 -->
                  <el-table-column align="center" prop="levelName" :label="$t('message.projectInfo.nodeType')"></el-table-column>
                  <!-- 标准完成时间 -->
                  <el-table-column align="center" prop="standardFinishDate" :label="$t('message.projectInfo.standardCompletionTime')"></el-table-column>
                  <!-- 计划完成时间 -->
                  <el-table-column align="center" prop="plannedFinishDate" :label="$t('message.projectInfo.planCompleteTime')"></el-table-column>
                 <!-- 预计完成时间 -->
                  <el-table-column align="center" prop="predictFinishDate" :label="$t('message.projectInfo.predictCompleteTime')"></el-table-column>
                    <!-- 实际完成时间 -->
                  <el-table-column align="center" prop="actualFinishDate" :label="$t('message.projectInfo.realCompleteTime')"></el-table-column>
                  <el-table-column align="center" prop="status" :label="$t('message.projectInfo.status')">
                      <template slot-scope="scope">
                          {{scope.row.status ==2  ? $t('message.projectInfo.statusList')[0]:scope.row.status ==3  ? $t('message.projectInfo.statusList')[1]:scope.row.status == 4  ? $t('message.projectInfo.statusList')[2]:scope.row.status == 6  ? $t('message.projectInfo.statusList')[3]:$t('message.projectInfo.statusList')[4]}}
                      </template>
                  </el-table-column>
                  <!--              <el-table-column prop="diffDate" label="实际偏差"></el-table-column>-->
                  <!-- 职能条线 -->
                 
                  <el-table-column align="center" prop="phaseName" :label="$t('message.projectInfo.theFunctionLine')"></el-table-column>
                 <!-- 节点责任人编号 -->
                  <el-table-column align="center" prop="chargerId" width="150px" :label="$t('message.projectInfo.nodeOwnerID')"></el-table-column>
                  <!-- 节点责任人名称 -->
                  <el-table-column align="center" prop="chargerName" width="150px" :label="$t('message.projectInfo.nodeResponsiblePersonName')"></el-table-column>
                 <!-- 节点失效标记 -->
                  <el-table-column align="center" :label="$t('message.projectInfo.isValidMark')">
                      <template slot-scope="scope">
                          {{scope.row.isDeleted ? $t('message.projectInfo.valid'):$t('message.projectInfo.unvalid')}}
                      </template>
                  </el-table-column>
                  <!-- 是否退回 -->
                  <el-table-column align="center" :label="$t('message.projectInfo.isSendBack')">
                      <template slot-scope="scope">
                          {{scope.row.isSendBack ?$t('message.projectInfo.no'):$t('message.projectInfo.yes')}}
                      </template>
                  </el-table-column>
                  <!-- 操作 -->
                  <el-table-column align="center" :label="$t('message.projectInfo.operation')" width="200">
                      <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)">编辑</el-button>
                          <el-button class="delete-btn" type="text" icon="el-icon-delete" @click="deleteData(scope.row)">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </vue-scroll>
          <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.sectionName')"  v-if="COMPANY=='sccr'">
                        <el-input
                        :disabled="formType == 3" v-model="dialogdata.crSectionName" placeholder="请输入" 
                        ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.projectInfo.sectionName')" prop="projectfName" required v-else>
                        <el-select :disabled="formType == 3" v-model="dialogdata.projectfName" :placeholder="$t('message.projectInfo.pleaseChoose')">
                            <el-option
                            v-for="(item , index ) in projectfNameList"
                            :key="index"
                            :label="item.projectfName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </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.nodeType')" prop="levelName" required>
                        <el-input
                        v-model="dialogdata.levelName"
                        :placeholder="$t('message.projectInfo.placeholder')"
                        :disabled="formType == 3"
                        ></el-input>
                    </el-form-item>
                    <!-- 标准完成时间 -->
                    <el-form-item :label="$t('message.projectInfo.standardCompletionTime')" prop="standardFinishDate" required>
                       <!-- 选择日期 -->
                        <el-date-picker
                            v-model="dialogdata.standardFinishDate"
                            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.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.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.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.actualDeviation')" prop="diffDate">
                        <el-input
                        v-model="dialogdata.diffDate"
                        :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.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>
             </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,
    getprojectfNameListApi
} from "@/assets/js/api/projectSummary.js";
import {
    selectProgressPlanBidSectionListApi
} from "@/assets/js/api/dataBoard.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:{
                projectfName:'',
                nodeCode: '',
                nodeName: '',
                levelName: '',
                standardFinishDate: '',
                plannedFinishDate: '',
                predictFinishDate: '',
                actualFinishDate: '',
                status: '',
                phaseName: '',
                chargerId: '',
                chargerName: '',
                crSectionName:'',//成润项目字段
            },
            rules:{
                projectfName:{ required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.projectfName')},
                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')},
                levelName: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeType')},
                standardFinishDate: {type: 'string', required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.standardCompletionTime')},
                plannedFinishDate: {type: 'string', required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.predictCompleteTime')},
                status: { required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.status')},
                phaseName: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.theFunctionLine')},
                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')},
            },
            options:this.$t('message.projectInfo.nodeStatusList'),
            projectfNameList:[],
            pageNo: 1,
            pageSize: 10,
            total: 0,
            projectSn: "",
            ProgressPlanBidSectionList:'',
            alarmType:'',
            COMPANY:COMPANY,
        }
    },
    created(){
        this.projectSn = this.$store.state.projectSn;
        this.loadData()
        this.selectProgressPlanBidSectionList()
        this.getprojectfNameList()
    },
    methods:{
        getprojectfNameList(){
            getprojectfNameListApi({projectSn: this.$store.state.projectSn}).then((res)=>{
                console.log('标段名',res)
                this.projectfNameList  = res.result
            })
        },
        Refresh(){
            nodeName: this.nodeName = ''
                this.pageNo = 1
                this.pageSize = 10
                this.alarmType = ''
            this.loadData()
        },
        //标段列表
        selectProgressPlanBidSectionList(){
            selectProgressPlanBidSectionListApi({projectSn: this.$store.state.projectSn}).then( res => {
                this.ProgressPlanBidSectionList = res.result
                console.log('标段列表',res.result);//projectfName
            })
        },
        loadDataTwo(){
            this.pageNo = 1
            this.loadData()
        },
        loadData(){
            let data = {
                nodeName: this.nodeName,
                projectSn: this.projectSn,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                bidSectionId:this.alarmType,
            }
            queryPanoramaNodePlan(data).then(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
                    // let data = JSON.stringify(JSON.parse(this.dialogdata))
                    data.projectSn = this.projectSn
                    // console.log('标段名称',this.dialogdata.projectfName)
                    data.bidSectionId = this.dialogdata.projectfName
                    if(this.formType == 1){
                        addPanoramaNodePlan(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){
                        console.log('编辑时候的参数',data)
                        editPanoramaNodePlan(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 = {
                nodeCode: '',
                nodeName: '',
                levelName: '',
                standardFinishDate: '',
                plannedFinishDate: '',
                predictFinishDate: '',
                actualFinishDate: '',
                status: '',
                phaseName: '',
                chargerId: '',
                chargerName: '',
            }
        },
        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 = JSON.parse(JSON.stringify(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(() => {
                    deletePanoramaNodePlan({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>
