<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="$route.query.state == 'show'"
          >
            <el-row class="title-box clearable h3Parent width-c48">
              <el-col :span="24">
                <h3 class="titleUseStyle">应急预案演练新增</h3>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="演练日期">
                    <el-date-picker v-model="formInline.exerciseDate" type="date"></el-date-picker>
                  </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.exercisePlan" autocomplete="off"></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.numberOfParticipants" 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-select v-model="formInline.exerciseEffect" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </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.exerciseObject" 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-select v-model="formInline.typesOfExposureProblems" placeholder="请选择">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </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.exerciseVenue" 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="formInline.problemSolvingDeadline" autocomplete="off"></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.exerciseContent" type="textarea" :rows="1" resize="none"></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.problemSolutions" 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-select v-model="formInline.problemSolvingState" placeholder="请选择">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </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.problemTracker" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <el-row class="saveCancel">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  class="outButton newReport"
                  style="margin-left: 8px;"
                  @click="cancel"
                >返回</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  budgetSubmissionModify,
} from "@/api/emergencyManagement/exerciseAccount/index";
export default {
  data() {
    return {
      rules: {
        projectName: [
          { required: true, message: "请填写项目名称", trigger: "blur" }
        ]
      },
      formInline: {
      },
      options: [
        {
          value: "优",
          label: "优"
        },
        {
          value: "良",
          label: "良"
        },
        {
          value: "一般",
          label: "一般"
        },
        {
          value: "差",
          label: "差"
        }
      ],
      options1: [
        {
          value: "安全问题",
          label: "安全问题"
        },
        {
          value: "设备问题",
          label: "设备问题"
        },
        {
          value: "物资问题",
          label: "物资问题"
        },
        {
          value: "人员问题",
          label: "人员问题"
        }
      ],
      options2: [
        {
          value: "已解决",
          label: "已解决"
        },
        {
          value: "待解决",
          label: "待解决"
        }
      ]
    };
  },
  created() {
    if (this.$route.query.state) {
      this.info(this.$route.query.row);
    } else {
    }
  },
  methods: {
    cancel() {
      this.$router.push({ path: "exerciseAccount" });
    },
    info(id) {
      budgetSubmissionModify(id).then(response => {
        if (response.infoCode === 200) {
          this.formInline = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
      });
    }
  }
};
</script>
<style>
@import "common.css";
.el-message--error {
  display: none !important;
}
.font-color {
  height: 34px;
  font-size: 18px;
  font-weight: 600;
}
.width-c48 {
  width: calc(100% - 48px);
  margin-bottom: 20px;
}
.table-from table {
  width: calc(100% - 50px);
  border: 1px solid #dcdfe6;
  text-align: center;
  margin-bottom: 10px;
  margin-bottom: 20px;
}
.table-from table .el-textarea__inner {
  border: 0px solid #dcdfe6;
}
.budgetSubmission-upload .uploadBtn {
  margin-left: 20px;
  display: inline-block;
  line-height: normal;
  padding: 10px 10px;
  font-size: 14px;
  color: #ffffff;
  background: #145b9b;
  border-color: #145b9b;
  border-radius: 5px;
  cursor: pointer;
}

.budgetSubmission-upload .uploadBtn input[type="file"] {
  display: none;
}
.budgetSubmission-upload .fileBox {
  position: absolute;
  left: 72px;
  top: 0px;
  width: calc(100% - 50px);
  height: 133px;
  font-size: 16px;
  height: 38px;
  line-height: normal;
  background-color: #dcdfe6;
  color: #409eff;
  padding: 5px 10px;
  margin-top: 0px;
}

.budgetSubmission-upload .fileBox > i {
  float: right;
  font-size: 20px;
  margin: 0px 5px;
  color: #000000;
  cursor: pointer;
}

.budgetSubmission-upload .fileBox i:hover {
  color: #409eff;
}
.contentBox .bannerCountyAdd-select .el-form-item__content {
  display: inline-block;
  width: calc(100% - 125px);
}
.contentBox .bannerCountyAdd-select .el-form-item__label {
  width: 122px;
  /* width: 120px; */
  text-align: right;
}
.bannerCountyAdd-input .el-col-6 {
  width: 22%;
}
.bannerCountyCenterAdd-ml {
  margin-left: 24px;
}
.bannerCountyCenterAdd-button {
  padding: 7px 13px;
}
.bannerCountyCenterAdd-div {
  border-bottom: 1px dashed #eee;
  position: relative;
}
.bannerCountyCenterAdd-position {
  position: absolute;
  left: 100%;
  top: 70%;
}
</style>
<style lang="scss">
.h3Parent {
  .el-col {
    position: relative;
  }
}
.title-box {
  //新增等标题外的el-row用样式（如调控管理>涉粮企业管理系统>企业基础信息管理>新增）
  .el-col {
    height: 38px;
  }
}
.titleUseStyle {
  position: absolute;
  top: 0px;
  font-size: 14px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-weight: 400;
  background: #47a8b7;
  padding-left: 8px;
  &::before {
    position: relative;
    top: 2px;
    content: "";
    display: inline-block;
    margin-right: 10px;
    width: 2px;
    height: 14px;
    background-color: #fff;
  }
}
</style>

