<template>
  <div class="app-container contentBox">
    <el-row>
      <el-col>
        <div class="grid-content bg-purple">
          <el-form
            ref="formInline"
            :inline="true"
            class="width-80"
            :disabled="$route.query.state == 'show'"
          >
            <el-row :span="24" style="border:1px solid #49a2fa;font-size:14px" class="width-c54">
              <el-col :span="6" v-for="(value, index) in status" :key="value.id">
                <span>
                  <span
                    @click="changeStatus(value, index)"
                    class="el-button-border el-button-all"
                    :class="{'on':value.check}"
                  >{{value.name}}</span>
                </span>
              </el-col>
              <!-- <el-col :span="6">
                <span>
                  <el-button size="small" class="el-button-border el-button-all">6月</el-button>
                </span>
              </el-col>
              <el-col :span="6">
                <span>
                  <el-button size="small" class="el-button-border el-button-all">9月</el-button>
                </span>
              </el-col>
              <el-col :span="6">
                <span>
                  <el-button size="small" class="el-button-border el-button-all">12月</el-button>
                </span>
              </el-col>-->
            </el-row>
            <!-- <el-row class="title-box clearable h3Parent width-c54">
              <el-col :span="24">
                <h3 class="titleUseStyle">基本信息</h3>
              </el-col>
            </el-row>-->
            <div v-show="modulName==='3月'">
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="主管部门">
                      <el-input
                        v-model="formInline0.projectName"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="资金总额">
                      <el-input
                        v-model="formInline0.projectContent"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目负责人电话">
                      <el-input
                        v-model="formInline0.annualTarget"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="2">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="财政拨款">
                      <el-input v-model="formInline0.expenditureProgress" placeholder="-" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="其它资金">
                      <el-input
                        v-model="formInline0.projectCompletionSchedule"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="填写日期">
                      <el-date-picker
                        v-model="formInline0.fillDate"
                        placeholder="-"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        :disabled="true"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                </el-col> -->
              </el-row>
              <v-comtab ref="getData0"></v-comtab>
              <div v-if="formInline0.processHis && formInline0.processHis.length > 0">
                <el-row class="title-box clearable h3Parent width-c54" >
                  <el-col :span="24">
                    <h3 class="titleUseStyle">审核内容</h3>
                  </el-col>
                </el-row>
                <el-row :gutter="2" style="margin-bottom: 20px;">
                  <el-col  :span="23" v-if="formInline0.processHis">
                    <el-table
                            :data="formInline0.processHis"
                            stripe
                            border highlight-current-row
                            style="width: 100%">
                      <el-table-column align="center" label="序号" width="70">
                        <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="assigneeName"
                              width="150"
                              label="审核人">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              :show-overflow-tooltip="true"
                              prop="comment"
                              label="审核意见">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="endDate"
                              width="180"
                              label="审核日期">
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>

              </div>
            </div>
            <div v-show="modulName==='6月'">
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="主管部门">
                      <el-input
                        v-model="formInline1.projectName"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="资金总额">
                      <el-input
                        resize="none"
                        placeholder="-"
                        v-model="formInline1.projectContent"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目负责人电话">
                      <el-input
                        resize="none"
                        placeholder="-"
                        v-model="formInline1.annualTarget"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目完成进度">
                      <el-input
                        type="textarea"
                        :rows="2"
                        resize="none"
                        placeholder="-"
                        v-model="formInline1.projectCompletionSchedule"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row> -->
              <el-row :gutter="2">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="财政拨款">
                      <el-input autocomplete="off" placeholder="-" v-model="formInline1.expenditureProgress"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="其它资金">
                      <el-input
                        v-model="formInline1.projectCompletionSchedule"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="填写日期">
                      <el-date-picker
                        v-model="formInline1.fillDate"
                        placeholder="-"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        :disabled="true"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                </el-col> -->
              </el-row>
              <v-comtab ref="getData1"></v-comtab>
              <div v-if="formInline1.processHis && formInline1.processHis.length > 0">
                <el-row
                        class="title-box clearable h3Parent width-c54"
                >
                  <el-col :span="24">
                    <h3 class="titleUseStyle">审核内容</h3>
                  </el-col>
                </el-row>

                <el-row :gutter="2" style="margin-bottom: 20px;">
                  <el-col  :span="23" v-if="formInline1.processHis">
                    <el-table
                            :data="formInline1.processHis"
                            stripe
                            border highlight-current-row
                            style="width: 100%">
                      <el-table-column align="center" label="序号" width="70">
                        <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="assigneeName"
                              width="150"
                              label="审核人">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="comment"
                              :show-overflow-tooltip="true"
                              label="审核意见">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="endDate"
                              width="180"
                              label="审核日期">
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div v-show="modulName==='9月'">
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="主管部门">
                      <el-input
                        v-model="formInline2.projectName"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="资金总额">
                      <el-input
                        v-model="formInline2.projectContent"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目负责人电话">
                      <el-input
                        v-model="formInline2.annualTarget"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目完成进度">
                      <el-input
                        v-model="formInline2.projectCompletionSchedule"
                        type="textarea"
                        :rows="2"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row> -->
              <el-row :gutter="2">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="财政拨款">
                      <el-input v-model="formInline2.expenditureProgress" placeholder="-" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="其它资金">
                      <el-input
                        v-model="formInline2.projectCompletionSchedule"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="填写日期">
                      <el-date-picker
                        v-model="formInline2.fillDate"
                        placeholder="-"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        :disabled="true"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                </el-col> -->
              </el-row>
              <v-comtab ref="getData2"></v-comtab>
              <div v-if="formInline2.processHis && formInline2.processHis.length > 0">
                <el-row
                        class="title-box clearable h3Parent width-c54"
                >
                  <el-col :span="24">
                    <h3 class="titleUseStyle">审核内容</h3>
                  </el-col>
                </el-row>

                <el-row :gutter="2" style="margin-bottom: 20px;">
                  <el-col  :span="23" v-if="formInline2.processHis">
                    <el-table
                            :data="formInline2.processHis"
                            stripe
                            border highlight-current-row
                            style="width: 100%">
                      <el-table-column align="center" label="序号" width="70">
                        <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="assigneeName"
                              width="150"
                              label="审核人">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="comment"
                              :show-overflow-tooltip="true"
                              label="审核意见">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="endDate"
                              width="180"
                              label="审核日期">
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div v-show="modulName==='12月'">
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="主管部门">
                      <el-input
                        v-model="formInline3.projectName"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="资金总额">
                      <el-input
                        v-model="formInline3.projectContent"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目负责人电话">
                      <el-input
                        v-model="formInline3.annualTarget"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="项目完成进度">
                      <el-input
                        v-model="formInline3.projectCompletionSchedule"
                        type="textarea"
                        :rows="2"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row> -->
              <el-row :gutter="2">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="财政拨款">
                      <el-input v-model="formInline3.expenditureProgress" placeholder="-" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="其它资金">
                      <el-input
                        v-model="formInline3.projectCompletionSchedule"
                        resize="none"
                        placeholder="-"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="填写日期">
                      <el-date-picker
                        v-model="formInline3.fillDate"
                        placeholder="-"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        :disabled="true"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                </el-col> -->
              </el-row>
              <v-comtab ref="getData3"></v-comtab>
              <div v-if="formInline3.processHis && formInline3.processHis.length > 0">
                <el-row
                        class="title-box clearable h3Parent width-c54"
                >
                  <el-col :span="24">
                    <h3 class="titleUseStyle">审核内容</h3>
                  </el-col>
                </el-row>

                <el-row :gutter="2" style="margin-bottom: 20px;">
                  <el-col  :span="23" v-if="formInline3.processHis">
                    <el-table
                            :data="formInline3.processHis"
                            stripe
                            border highlight-current-row
                            style="width: 100%">
                      <el-table-column align="center" label="序号" width="70">
                        <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="assigneeName"
                              width="150"
                              label="审核人">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="comment"
                              :show-overflow-tooltip="true"
                              label="审核意见">
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="endDate"
                              width="180"
                              label="审核日期">
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
          <el-row class="saveCancel">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-button
                  class="iconfont iconfanhui"
                  type="primary"
                  style="margin-left: 8px;"
                  @click="cancel"
                > 返回</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  budgetPerformanceManagementModify,
  budgetPerformanceManagementInfoPro
} from "@/api/budgetPerformanceManagement/index";
import comtab from '@/views/financialManagement/budgetPerformanceManagement/comtab.vue'
export default {
  data() {
    return {
      processHis:[],
      modulName: "3月",
      status: [
        {
          id: 0,
          name: "3月",
          check: false
        },
        {
          id: 1,
          name: "6月",
          check: false,
          statusC: "CO"
        },
        {
          id: 2,
          name: "9月",
          check: false,
          statusC: "OP"
        },
        {
          id: 3,
          name: "12月",
          check: false,
          statusC: "DC"
        }
      ],
      formInline:[],
      formInline0:{},
      formInline1:{},
      formInline2:{},
      formInline3:{},
      //总体目标
      targetContentArr: [{},{},{},{}],

      // 产出指标二级指标数据
      outputIndexArr:[{},{},{},{}],

      // 效益指标二级指标数据
      benefitIndexArr:[{},{},{},{}],

      // 满意度指标二级指标数据
      satisfactionIndexArr:[{},{},{},{}],
      propertiesList:[
        {
          label:"定量",
          value:'定量'
        },
        {
          label:"定性",
          value:'定性'
        }
      ],
    };
  },
  methods: {
    statusFun(month) {
      if (month >= 1 && month <= 3) {
        this.status[0].check = true;
        this.modulName = "3月"
      } else if (month >= 4 && month <= 6) {
        this.status[1].check = true;
        this.modulName = "6月"
      } else if (month >= 7 && month <= 9) {
        this.status[2].check = true;
        this.modulName = "9月"
      } else {
        this.status[3].check = true;
        this.modulName = "12月"
      }
    },
    cancel() {
      this.$router.push({ path: "apply" });
    },
    info(id) {
      budgetPerformanceManagementInfoPro(id).then(response => {
        if (response.infoCode && response.infoCode === 200) {
          this.formInline = response.data;
          this.formInline0 = response.data[0];
          this.formInline1 = response.data[1];
          this.formInline2 = response.data[2];
          this.formInline3 = response.data[3];
          this.changeStatus({"id":0,"name":"3月","check":false}, 0);
          this.formInline.forEach((item,index)=>{
            if(item.expenditureProgress == 'null'){
              this.formInline[index].expenditureProgress = null
            }
          })
          if(response.data.length == 5){
            this.processHis = response.data[4]
          }
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
      });
    },
    changeStatus(cur, index) {
      for (var i = 0; i < this.status.length; i++) {
        this.status[i].check = false;
      }
      this.modulName = cur.name;
      this.status[cur.id].check = true;
      let resData = {};
      if(index === 0){
        resData = {
          "outputIndexArr": this.formInline0.outputIndex,
          "benefitIndexArr": this.formInline0.benefitIndex,
          "satisfactionIndexArr": this.formInline0.satisfactionIndex,
          "targetContentArr": this.formInline0.overallObjective
        };
      }else if(index === 1){
        resData = {
          "outputIndexArr": this.formInline1.outputIndex,
          "benefitIndexArr": this.formInline1.benefitIndex,
          "satisfactionIndexArr": this.formInline1.satisfactionIndex,
          "targetContentArr": this.formInline1.overallObjective
        };
      }else if(index === 2){
        resData = {
          "outputIndexArr": this.formInline2.outputIndex,
          "benefitIndexArr": this.formInline2.benefitIndex,
          "satisfactionIndexArr": this.formInline2.satisfactionIndex,
          "targetContentArr": this.formInline2.overallObjective
        };
      }else if(index === 3){
        resData = {
          "outputIndexArr": this.formInline3.outputIndex,
          "benefitIndexArr": this.formInline3.benefitIndex,
          "satisfactionIndexArr": this.formInline3.satisfactionIndex,
          "targetContentArr": this.formInline3.overallObjective
        };
      }
      this.$refs[`getData${index}`].getValue(resData);
    }
  },
  created() {
    var date = new Date();
    var month = date.getMonth() + 1;
    // let data = 26
    // let month = 3
    this.statusFun(month);
    this.info(JSON.parse(this.$route.query.row));
  },
  components: {
    "v-comtab": comtab,
  }
};
</script>
<style>
@import "common.css";
.el-message--error {
  display: none !important;
}
.font-color {
  height: 34px;
  font-size: 18px;
  font-weight: 600;
}
.width-c54 {
  width: calc(100% - 50px);
  margin-bottom: 20px;
}
.table-from table {
  width: calc(100% - 50px);
  border: 1px solid #dcdfe6;
  text-align: center;
  margin-bottom: 20px;
}
.on {
  background: #49a2fa;
  color: white;
}
/* .on:hover {
  background: #49a2fa;
  color: white;
} */
.el-button-all {
  display: block;
  height: 28px;
  line-height: 28px;
  text-align: center;
  width: 100%;
  border: 0px;
  border-radius: 0;
  font-size: 14px;
}
.el-button-border {
  height: 28px;
  border-left: 1px solid #49a2fa;
}
</style>


