<template>
  <div class="dispose">
    <h1>演化阶段</h1>
    <el-row>
      <el-col :span="24">
        <p class="title">
          事故孕育阶段：
          <el-button
            style="margin-top: 15px"
            type="primary"
            @click.stop="addOne"
          >
            添加
          </el-button>
        </p>
        <el-table
          :data="addForm.tyDrillAccidentIncubationDetailsList1"
          :row-style="{ height: '0px' }"
          :header-cell-style="{
            'text-align': 'center',
            padding: '0px',
            border: '1px solid #ccc',
          }"
          :cell-style="{
            'text-align': 'center',
            padding: '0',
            border: '1px solid #ccc',
            height: 'auto',
          }"
          style="width: 100%"
        >
          <el-table-column
            label="主要应急任务"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList1[scope.$index].emergencyTasks
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="响应主体"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList1[scope.$index]
                    .responseSubject
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="差距分析"
            align="center"
            show-overflow-tooltip
          >
          <el-table-column
            label="应急预案（程序）"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList1[scope.$index]
                    .emergencyPlan
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="人员响应"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList1[scope.$index]
                    .personnelResponse
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="应急物资与预案"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList1[scope.$index]
                    .emergencySuppliesPlans
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                style="color: red"
                type="text"
                size="mini"
                @click="delOne(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px;">
      <el-col :span="24">
        <p class="title">
          事故发生阶段：
          <el-button
            style="margin-top: 15px"
            type="primary"
            @click.stop="addTwo"
          >
            添加
          </el-button>
        </p>
        <el-table
          :data="addForm.tyDrillAccidentIncubationDetailsList2"
          :row-style="{ height: '0px' }"
          :header-cell-style="{
            'text-align': 'center',
            padding: '0px',
            border: '1px solid #ccc',
          }"
          :cell-style="{
            'text-align': 'center',
            padding: '0',
            border: '1px solid #ccc',
            height: 'auto',
          }"
          style="width: 100%"
        >
          <el-table-column
            label="主要应急任务"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList2[scope.$index].emergencyTasks
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="响应主体"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList2[scope.$index]
                    .responseSubject
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="差距分析"
            align="center"
            show-overflow-tooltip
          >
          <el-table-column
            label="应急预案（程序）"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList2[scope.$index]
                    .emergencyPlan
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="人员响应"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList2[scope.$index]
                    .personnelResponse
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="应急物资与预案"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList2[scope.$index]
                    .emergencySuppliesPlans
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                style="color: red"
                type="text"
                size="mini"
                @click="delTwo(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px;">
      <el-col :span="24">
        <p class="title">
          事故扩大阶段：
          <el-button
            style="margin-top: 15px"
            type="primary"
            @click.stop="addThree"
          >
            添加
          </el-button>
        </p>
        <el-table
          :data="addForm.tyDrillAccidentIncubationDetailsList3"
          :row-style="{ height: '0px' }"
          :header-cell-style="{
            'text-align': 'center',
            padding: '0px',
            border: '1px solid #ccc',
          }"
          :cell-style="{
            'text-align': 'center',
            padding: '0',
            border: '1px solid #ccc',
            height: 'auto',
          }"
          style="width: 100%"
        >
          <el-table-column
            label="主要应急任务"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList3[scope.$index].emergencyTasks
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="响应主体"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList3[scope.$index]
                    .responseSubject
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="差距分析"
            align="center"
            show-overflow-tooltip
          >
          <el-table-column
            label="应急预案（程序）"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList3[scope.$index]
                    .emergencyPlan
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="人员响应"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList3[scope.$index]
                    .personnelResponse
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="应急物资与预案"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList3[scope.$index]
                    .emergencySuppliesPlans
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                style="color: red"
                type="text"
                size="mini"
                @click="delThree(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px;">
      <el-col :span="24">
        <p class="title">
          事故结束阶段：
          <el-button
            style="margin-top: 15px"
            type="primary"
            @click.stop="addFour"
          >
            添加
          </el-button>
        </p>
        <el-table
          :data="addForm.tyDrillAccidentIncubationDetailsList4"
          :row-style="{ height: '0px' }"
          :header-cell-style="{
            'text-align': 'center',
            padding: '0px',
            border: '1px solid #ccc',
          }"
          :cell-style="{
            'text-align': 'center',
            padding: '0',
            border: '1px solid #ccc',
            height: 'auto',
          }"
          style="width: 100%"
        >
          <el-table-column
            label="主要应急任务"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList4[scope.$index].emergencyTasks
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="响应主体"
            align="center"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList4[scope.$index]
                    .responseSubject
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="差距分析"
            align="center"
            show-overflow-tooltip
          >
          <el-table-column
            label="应急预案（程序）"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList4[scope.$index]
                    .emergencyPlan
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="人员响应"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList4[scope.$index]
                    .personnelResponse
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="应急物资与预案"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope" >
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%, border:none !important"
                v-model="
                  addForm.tyDrillAccidentIncubationDetailsList4[scope.$index]
                    .emergencySuppliesPlans
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                style="color: red"
                type="text"
                size="mini"
                @click="delFour(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 80px">
      <el-col align="center">
        <el-button style="margin-right: 30px" @click="close">
          返回
        </el-button>
        <el-button type="primary" @click="next"> 确认 </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ['itemForm'],
  name: 'RuoyiDispose',

  data() {
    return {
      addForm: {}
    };
  },

  mounted() {
    if ( JSON.stringify(this.itemForm) == '{}') return
    this.addForm = this.itemForm
  },

  methods: {
    close() {
      this.$emit('closeDispose', false)
    },
    next() {
      this.$emit('addDispose', this.addForm)
    },
    //此处为1.2.3.4处表格的增删
    addOne() {
      this.addForm.tyDrillAccidentIncubationDetailsList1.push({
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",
      })
    },
    delOne(index) {
      this.addForm.tyDrillAccidentIncubationDetailsList1.splice(index, 1)
    },
    addTwo() {
      this.addForm.tyDrillAccidentIncubationDetailsList2.push({
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",
      })
    },
    delTwo(index) {
      this.addForm.tyDrillAccidentIncubationDetailsList2.splice(index, 1)
    },
    addThree() {
      this.addForm.tyDrillAccidentIncubationDetailsList3.push({
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",
      })
    },
    delThree(index) {
      this.addForm.tyDrillAccidentIncubationDetailsList3.splice(index, 1)
    },
    addFour() {
      this.addForm.tyDrillAccidentIncubationDetailsList4.push({
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",
      })
    },
    delFour(index) {
      this.addForm.tyDrillAccidentIncubationDetailsList4.splice(index, 1)
    }
  },
};
</script>

<style lang="scss" scoped>
.dispose{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
  overflow: auto;
  background: rgb(21, 43, 62);
  padding: 20px 100px 20px 100px;
  h1{
    font-size: 20px;
  }
}
</style>
