<template>
  <div class="app-container contentBox">
    <el-row>
      <el-col>
        <div class="grid-content bg-purple">
          <el-form
            ref="formInline"
            :model="formInline"
            :rules="rules"
            :inline="true"
            class="width-80"
            :disabled="writeJurisdictionBool"
          >
            <el-row
              :span="24"
              style="border:1px solid #49a2fa;font-size:14px"
              class="width-c54 bgc"
            >
              <el-col :span="6" v-for="value in status" :key="value.id">
                <span>
                  <span
                    class="el-button-border el-button-all"
                    :class="{'on':value.check}"
                  >{{value.name}}</span>
                </span>
                <!-- @click="changeStatus(value)" -->
              </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>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="主管部门">
                      <el-input
                        v-model="formInline.projectName"
                        resize="none"
                        :disabled="true"
                      ></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="formInline.projectContent"
                        resize="none"
                        :disabled="true"
                      ></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="formInline.annualTarget"
                        resize="none"
                        :disabled="true"
                      ></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="formInline.expenditureProgress" placeholder="-" autocomplete="off" :disabled="true"></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="formInline.projectCompletionSchedule"
                        resize="none"
                        placeholder="-"
                        :disabled="true"
                      ></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="formInline.fillDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        :disabled="true"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                </el-col> -->
              </el-row>

            </div>
            <!------------------------------------------------->
            <el-row>
              <el-col :span="24">
                <div class="table-from">
                <span style="margin-right:10px;">总体目标</span>
                <el-tooltip class="item" effect="light" content="添加总体期目标" placement="top">
                  <el-button
                    type="primary"
                    size="mini"
                    class="button"
                    icon="el-icon-circle-plus-outline"
                    @click="addTargetContent"
                    style="width:20px !important;height:20px !important;;padding:0 !important;;background-color:#49a2fa;"
                  ></el-button>
                </el-tooltip>
                <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
                  <tr v-for="(item, i) in targetContentArr" :key="i">
                    <td style="width: 270px;height:60px">目标{{i+1}}</td>
                    <td style="height: 40px;position:relative">
                      <!-- <span style="font-size:16px" v-if="item.twoClassIndex && !item.isAdd">{{item.twoClassIndex}}</span> -->
                      <span style="font-size:16px" v-if="item.isAdd">
                        <el-input v-model="item.targetContent" resize="none" placeholder="请输入总体目标" maxLength="50"></el-input>
                      </span>
                      <span style="font-size:16px" v-if="!item.isAdd">{{item.targetContent}}</span>
                      <el-tooltip
                        v-if="item.isAdd"
                        class="item"
                        effect="light"
                        content="删除"
                        placement="top"
                      >
                        <!-- v-show="scope.row.findingsAudit=='未提交'" -->
                        <el-button
                          type="primary"
                          size="small"
                          class="button"
                          icon="el-icon-circle-close"
                          @click="deleteTargetContent(i)"
                          style="position:absolute;right:10px;top:20px;width:20px !important;height:20px !important;padding:0 !important;background-color:#49a2fa;"
                        ></el-button>
                      </el-tooltip>
                    </td>
                  </tr>
                </table>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class="table-from">
                  <span style="margin-right:10px;">产出指标</span>
                  <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
                    <tr>
                      <td style="width: 270px;height:60px">二级指标(产出指标)</td>
                      <td>指标内容</td>
                      <td>年度指标值</td>
                      <td>中期指标值</td>
                      <td style="width: 220px;height:60px">三级指标(产出指标)</td>
                      <td style="width: 80px;height:60px">绩效指示性质</td>
                      <td style="width: 70px;height:60px">绩效指示值</td>
                      <td style="width: 80px;height:60px">绩效度量单位</td>
                    </tr>
                    <tr v-for="(item, i) in outputIndexArr" :key="i">
                      <td style="height: 40px;position:relative">
                        <span style="font-size:16px">{{item.twoClassIndex}}</span>
                      </td>
                      <td>{{item.indexContent}}</td>
                      <td>{{item.annualIndexValue}}</td>
                      <td>{{item.mediumTermIndexValue}}</td>
                      <td style="height: 40px;position:relative">{{item.threeClassIndex}}</td>
                      <td>{{item.indexProperties}}</td>
                      <td>{{item.indexValue}}</td>
                      <td>{{item.unitMeasure}}</td>
                    </tr>
                  </table>

                  <span style="margin-right:10px;">效益指标</span>
                  <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
                    <tr>
                      <td style="width: 270px;height:60px">二级指标(效益指标)</td>
                      <td>指标内容</td>
                      <td>年度指标值</td>
                      <td>中期指标值</td>
                      <td style="width: 220px;height:60px">三级指标(效益指标)</td>
                      <td style="width: 80px;height:60px">绩效指标性质</td>
                      <td style="width: 70px;height:60px">绩效指标值</td>
                      <td style="width: 80px;height:60px">绩效度量单位</td>
                    </tr>
                    <tr v-for="(item, i) in benefitIndexArr" :key="i">
                      <td style="height: 40px;position:relative">
                        <span style="font-size:16px">{{item.twoClassIndex}}</span>
                      </td>
                      <td>{{item.indexContent}}</td>
                      <td>{{item.annualIndexValue}}</td>
                      <td>{{item.mediumTermIndexValue}}</td>
                      <td style="height: 40px;position:relative">{{item.threeClassIndex}}</td>
                      <td>{{item.indexProperties}}</td>
                      <td>{{item.indexValue}}</td>
                      <td>{{item.unitMeasure}}</td>
                    </tr>
                  </table>

                  <span style="margin-right:10px;">满意度指标</span>
                  <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
                    <tr>
                      <td style="width: 270px;height:60px">二级指标(满意度指标)</td>
                      <td>指标内容</td>
                      <td>年度指标值</td>
                      <td>中期指标值</td>
                      <td style="width: 220px;height:60px">三级指标(满意度指标)</td>
                      <td style="width: 80px;height:60px">绩效指标性质</td>
                      <td style="width: 70px;height:60px">绩效指标值</td>
                      <td style="width: 80px;height:60px">绩效度量单位</td>
                    </tr>
                    <tr v-for="(item, i) in satisfactionIndexArr" :key="i">
                      <td style="height: 40px;position:relative">
                        <span style="font-size:16px">{{item.twoClassIndex}}</span>
                      </td>
                      <td>{{item.indexContent}}</td>
                      <td>{{item.annualIndexValue}}</td>
                      <td>{{item.mediumTermIndexValue}}</td>
                      <td style="height: 40px;position:relative">{{item.threeClassIndex}}</td>
                      <td>{{item.indexProperties}}</td>
                      <td>{{item.indexValue}}</td>
                      <td>{{item.unitMeasure}}</td>
                    </tr>
                  </table>
                </div>
              </el-col>
            </el-row>
            <!------------------------------------------------->
          </el-form>
          <el-row class="saveCancel">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-button
                  v-if="!writeJurisdictionBool"
                  type="primary"
                  class="iconfont iconbaocun"
                  @click="save('formInline')"
                > 保存</el-button>
                <el-button
                  type="primary"
                  class="iconfont icontijiao"
                  style="margin-left: 8px;"
                  @click="submissionInfo('formInline')"
                  v-if="!writeJurisdictionBool"
                > 提交</el-button>
                <el-button
                  class="iconfont iconquxiao"
                  type="primary"
                  style="margin-left: 8px;"
                  @click="cancel"
                > 取消</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  budgetPerformanceManagementSave,
  budgetPerformanceManagementModify,
  budgetPerformanceManagementSubmission
} from "@/api/budgetPerformanceManagement/index";
export default {

  name: "budgetPerformanceManagementApplyAdd",

  data() {
    return {

      dialogFormVisible: false,

      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"
        }
      ],
      rules: {
        // projectCompletionSchedule: [
        //   { required: true, message: "请填写项目完成进度", trigger: "blur" },
        //   { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
        // ]
      },
      formInline: {
        projectName: "", //项目名称
        projectContent: "", //项目内容
        annualTarget: "", //年度目标
        projectCompletionSchedule: "", //项目进度
        expenditureProgress: "", //支出进度
        fillDate: "", //填写日期
        auditOpinions: "", //审核意见
        auditor: "", //审核人
        auditDate: "", //审核日期
        findingsAudit: "" //审核结果
      },
      writeJurisdictionBool: false,
      //总体目标
      targetContentArr: [],

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

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

      // 满意度指标二级指标数据
      satisfactionIndexArr:[],
      propertiesList:[
        {
          label:"定量",
          value:'定量'
        },
        {
          label:"定性",
          value:'定性'
        }
      ],
    };
  },
  methods: {
    //点击添加总体目标
    addTargetContent(){
      if(!this.targetContentArr){
        this.targetContentArr = []
      }
      let obj = { isAdd: true };
      this.targetContentArr.push(obj);
    },
    //点击删除总体目标
    deleteTargetContent(i) {
      //   console.log(i);
      // console.log(this.bankArr);
      this.targetContentArr.splice(i, 1);
      // console.log(this.bankArr);
    },
    statusFun(month) {
      if (month >= 1 && month <= 3) {
        this.status[0].check = true;
      } else if (month >= 4 && month <= 6) {
        this.status[1].check = true;
      } else if (month >= 7 && month <= 9) {
        this.status[2].check = true;
      } else {
        this.status[3].check = true;
      }
    },
    cancel() {
      this.$router.push({ path: "apply" });
    },
    dateFormat () {
      let date = new Date(date);
      var o = {
        'M+' : date.getMonth() + 1, //month
        'd+' : date.getDate(), //day
        'H+' : date.getHours()+8, //hour+8小时
        'm+' : date.getMinutes(), //minute
        's+' : date.getSeconds(), //second
        'q+' : Math.floor((date.getMonth() + 3) / 3), //quarter
        'S' : date.getMilliseconds() //millisecond
      };
      if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

      for (var k in o)
        if (new RegExp('(' + k + ')').test(format))
          format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));

      return format;
    },
    info(id) {
      budgetPerformanceManagementModify(id).then(response => {
        if (response.infoCode === 200) {
          this.formInline = response.data;
          if (this.writeJurisdictionBool == false) {
            let date = new Date();
            let month = date.getMonth() + 1;
            if (month >= 1 && month <= 3) {
              month = 3;
            } else if (month >= 4 && month <= 6) {
              month = 6;
            } else if (month >= 7 && month <= 9) {
              month = 9;
            } else {
              month = 12;
            }
            // this.formInline.expenditureProgress = (month* 100) / 12 ;
            this.formInline.fillDate = date;
            // this.formInline.fillDate = new Date(2019,2,26)
            this.outputIndexArr = this.formInline.outputIndex;
            this.benefitIndexArr = this.formInline.benefitIndex;
            this.satisfactionIndexArr = this.formInline.satisfactionIndex;

            //总体目标
            this.targetContentArr = this.formInline.overallObjective;
          }
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
      });
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // if(!this.formInline.projectCompletionSchedule){
          //   this.$message.info("请填写项目完成进度")
          //   return
          // }
          if(!this.benefitIndexArr || this.benefitIndexArr.length == 0){
            this.formInline.benefitIndex = [{
              annualIndexValue: "",
              indexContent: "",
              mediumTermIndexValue: "",
              twoClassIndex: "",
              threeClassIndex: "",
              indexProperties: "",
              indexValue: "",
              unitMeasure: "",
            }]
          }else{
            this.formInline.benefitIndex.forEach((item,index)=>{
              if(Object.keys(item).length == 1 &&  this.formInline.benefitIndex.length !==1){
                this.formInline.benefitIndex.splice(index,1)
              }
            })
          }
          if(!this.outputIndexArr || this.outputIndexArr.length == 0){
            this.formInline.outputIndex =  [{
              annualIndexValue: "",
              indexContent: "",
              mediumTermIndexValue: "",
              twoClassIndex: "",
              threeClassIndex: "",
              indexProperties: "",
              indexValue: "",
              unitMeasure: "",
            }]
          }else{
            this.formInline.outputIndex.forEach((item,index)=>{
              if(Object.keys(item).length == 1 && this.formInline.outputIndex.length !==1){
                this.formInline.outputIndex.splice(index,1)
              }
            })
          }

          if(!this.satisfactionIndexArr || this.satisfactionIndexArr.length == 0){
            this.formInline.satisfactionIndex =  [{
              annualIndexValue: "",
              indexContent: "",
              mediumTermIndexValue: "",
              twoClassIndex: "",
              threeClassIndex: "",
              indexProperties: "",
              indexValue: "",
              unitMeasure: "",
            }]
          }else{
            this.formInline.satisfactionIndex.forEach((item,index)=>{
              if(Object.keys(item).length == 1 && this.formInline.satisfactionIndex.length !== 1){
                this.formInline.satisfactionIndex.splice(index,1)
              }
            })
          }
          this.formInline.overallObjective = this.targetContentArr
          budgetPerformanceManagementSave(this.formInline).then(response => {
            if (response.infoCode === 200) {
              this.$router.push({ path: "apply" });
              this.$message.success("保存成功")
            } else {
              this.$message({
                type: "error",
                message: response.msg
              });
            }
          });
        } else {
          this.dialogFormVisible = true
          return false;
        }
      });
    },
    // changeStatus(cur) {
    //   for (let i = 0; i < this.status.length; i++) {
    //     this.status[i].check = false;
    //   }
    //   this.modulName = cur.name;
    //   this.status[cur.id].check = true;
    // },
    submissionInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // if(!this.formInline.projectCompletionSchedule){
          //   this.$message.info("请填写项目完成进度")
          //   return
          // }
          if(!this.benefitIndexArr || this.benefitIndexArr.length == 0){
            this.formInline.benefitIndex = [{
              annualIndexValue: "",
              indexContent: "",
              mediumTermIndexValue: "",
              twoClassIndex: "",
              threeClassIndex: "",
              indexProperties: "",
              indexValue: "",
              unitMeasure: "",
            }]
          }else{
            this.formInline.benefitIndex.forEach((item,index)=>{
              if(Object.keys(item).length == 1 &&  this.formInline.benefitIndex.length !==1){
                this.formInline.benefitIndex.splice(index,1)
              }
            })
          }
          if(!this.outputIndexArr || this.outputIndexArr.length == 0){
            this.formInline.outputIndex =  [{
              annualIndexValue: "",
              indexContent: "",
              mediumTermIndexValue: "",
              twoClassIndex: "",
              threeClassIndex: "",
              indexProperties: "",
              indexValue: "",
              unitMeasure: "",
            }]
          }else{
            this.formInline.outputIndex.forEach((item,index)=>{
              if(Object.keys(item).length == 1 && this.formInline.outputIndex.length !==1){
                this.formInline.outputIndex.splice(index,1)
              }
            })
          }

          if(!this.satisfactionIndexArr || this.satisfactionIndexArr.length == 0){
            this.formInline.satisfactionIndex =  [{
              annualIndexValue: "",
              indexContent: "",
              mediumTermIndexValue: "",
              twoClassIndex: "",
              threeClassIndex: "",
              indexProperties: "",
              indexValue: "",
              unitMeasure: "",
            }]
          }else{
            this.formInline.satisfactionIndex.forEach((item,index)=>{
              if(Object.keys(item).length == 1 && this.formInline.satisfactionIndex.length !== 1){
                this.formInline.satisfactionIndex.splice(index,1)
              }
            })
          }
          this.formInline.overallObjective = this.targetContentArr
          this.formInline.findingsAudit = this.formInline.projectName === '内蒙古自治区粮食和物资储备局601001' ? "处室处长审核" : "待二级单位财务审核",
          budgetPerformanceManagementSubmission(this.formInline).then(
            response => {
              if (response.infoCode === 200) {
                this.$message.success("提交成功")
                this.$router.push({ path: "apply" });
              } else {
                this.$message({
                  type: "error",
                  message: response.msg
                });
              }
            }
          );
        } else {
          this.dialogFormVisible = true
          return false;
        }
      });
    },
    open(month, day) {
      // this.$notify({
      //   title: "本模块每年填写四次；3、6、9、12月的月底前五个工作日内可以填写",
      //   message: "您可以填写",
      //   type: "success",
      //   duration: 2000,
      //   position: "bottom-right",
      //   offset: 120
      // });
      this.$message.info("本模块每年填写四次；3、6、9、12月的月底前五个工作日内可以填写,您可以填写")
    },
    open1(month, day) {
      // this.$notify({
      //   title: "本模块每年填写四次；3、6、9、12月的月底前五个工作日内可以填写",
      //   message: "您不可以填写",
      //   type: "info",
      //   duration: 2000,
      //   position: "bottom-right",
      //   offset: 120
      // });
      this.$message.info("本模块每年填写四次；3、6、9、12月的月底前五个工作日内可以填写,您不可以填写")
    },
    writeJurisdiction(month, day) {
      if (month == 3) {
        if (day > 26) {
          this.writeJurisdictionBool = false;
          this.open(month, day);
        } else {
          this.writeJurisdictionBool = true;
          this.open1(month, day);
        }
      } else if (month == 6) {
        if (day > 25) {
          this.writeJurisdictionBool = false;
          this.open(month, day);
        } else {
          this.writeJurisdictionBool = true;
          this.open1(month, day);
        }
      } else if (month == 9) {
        if (day > 25) {
          this.writeJurisdictionBool = false;
          this.open(month, day);
        } else {
          this.writeJurisdictionBool = true;
          this.open1(month, day);
        }
      } else if (month == 12) {
        if (day > 26) {
          this.writeJurisdictionBool = false;
          this.open(month, day);
        } else {
          this.writeJurisdictionBool = true;
          this.open1(month, day);
        }
      } else {
        this.writeJurisdictionBool = true;
        this.open1(month, day);
      }
    }
  },
  created() {
    let date = new Date();
    // let month = date.getMonth() + 1;
    let month = 12;
    // let day = date.getDate();
    let day = 27;
    // 3月27-31号、6月26-30号、9月26-30号、12月27-31号可填写
    this.statusFun(month);
    this.writeJurisdiction(month, day);
    this.info(JSON.parse(this.$route.query.row));
  }
};
</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;
}
.bgc {
  background-color: #a79c9c4a;
}

</style>


