<template>
  <div>
    <el-row>
      <el-col :span="24">
        <p class="title">
          社会应急资源：
          <el-button
            style="margin-top: 15px"
            type="primary"
            @click.stop="addWorld"
          >
            添加
          </el-button>
        </p>
        <el-table
          :data="addForm.tyDrillSocialEmergencyResourcesList"
          :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="150"
          >
            <template slot-scope="scope">
              <!-- <el-select clearable v-model="addForm.tyDrillSocialEmergencyResourcesList[scope.$index].position">
					<el-option
						v-for="(item,index) of windList"
						:key="index"
						:label="item"
						:value="item"
					></el-option>
				</el-select> -->
              <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%"
                v-model="
                  addForm.tyDrillSocialEmergencyResourcesList[scope.$index].type
                "
                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.tyDrillSocialEmergencyResourcesList[scope.$index]
                    .describe
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="有无协议"
            align="center"
            show-overflow-tooltip
            width="130"
          >
            <template slot-scope="scope">
              <!-- <el-input
                style="width: 100%,"
                v-model="addForm.tyDrillSocialEmergencyResourcesList[scope.$index].hasAgreement"
                clearable
              /> -->
              <el-select
                clearable
                v-model="
                  addForm.tyDrillSocialEmergencyResourcesList[scope.$index]
                    .hasAgreement
                "
              >
              <el-option
                  v-for="dict in dict.type.sys_agreement"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </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="del(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <p class="title">
          事故发展阶段：
          <el-button
            style="margin-top: 15px"
            type="primary"
            @click.stop="addTy"
          >
            添加
          </el-button>
        </p>
        <el-table
          :data="addForm.tyDrillAccidentIncubationDtoList"
          :row-style="{ height: '0px' }"
          :header-cell-style="{
            'text-align': 'center',
            padding: '0px',
            border: '1px solid #ccc',
          }"
          :cell-style="{
            'text-align': 'center',
            padding: '2px',
            border: '1px solid #ccc',
            height: 'auto',
          }"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            align="center"
            show-overflow-tooltip
            width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </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%"
                v-model="
                  addForm.tyDrillAccidentIncubationDtoList[scope.$index]
                    .accidentDevelopment
                "
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column
            label="应急响应线"
            align="center"
            show-overflow-tooltip
            width="120"
          >
            <template slot-scope="scope">
              <!-- <el-input
                style="width: 100%,"
                v-model="addForm.tyDrillAccidentIncubationDtoList[scope.$index].emergencyResponse"
                clearable
              /> -->
              <el-select
                clearable
                v-model="
                  addForm.tyDrillAccidentIncubationDtoList[scope.$index]
                    .emergencyResponse
                "
              >
              <el-option
                  v-for="dict in dict.type.sys_meet"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="dispose(scope.row,scope.$index)">
                处理
              </el-button>
              <el-button
                style="color: red"
                type="text"
                size="mini"
                @click="delTy(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </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"  v-loading.fullscreen.lock="fullscreenLoading"> 保存为word </el-button>
      </el-col>
    </el-row>
    <Dispose v-if="disposeAlert" :itemForm="itemForm" @closeDispose="closeDispose" @addDispose="addDispose" />
  </div>
</template>

<script>
import Dispose from './dispose.vue'
export default {
  props:['societyForm', 'fullscreenLoading'],
  name: "RuoyiSociety",
  dicts: ["sys_meet", "sys_agreement"],
  components: {
    Dispose
  },
  data() {
    return {
      //主页数据
      addForm: {
        tyDrillSocialEmergencyResourcesList: [
          {
            describe: "",
            hasAgreement: "",
            tyDrillInfoDetailsId: "",
            type: "",
          },
        ],
        tyDrillAccidentIncubationDtoList: [
          {
            accidentDevelopment: "",
            emergencyResponse: "",
            tyDrillAccidentIncubationDetailsList1: [//主要应急任务
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
            tyDrillAccidentIncubationDetailsList2: [//事故发生阶段
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
            tyDrillAccidentIncubationDetailsList3: [//事故扩大阶段
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
            tyDrillAccidentIncubationDetailsList4: [//应急结束阶段
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
          },
        ],
      },
      //处理项数据
      itemForm: {},
      //暂存处理项的下标
      itemIndex: '',
      disposeAlert: false
    };
  },

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

  methods: {
    //处理按钮
    dispose(item,index) {
      //接收两个参数，当前项，当前下标
      this.itemForm = JSON.parse(JSON.stringify(item))
      this.itemIndex = index
      this.disposeAlert = true
    },
    closeDispose() {
      this.disposeAlert = false
    },
    addDispose(val) {
      this.disposeAlert = false
      this.addForm.tyDrillAccidentIncubationDtoList[this.itemIndex] = val
      this.$message.success('操作成功')
    },
    //添加社会资源
    addWorld() {
      this.addForm.tyDrillSocialEmergencyResourcesList.push({
        describe: "",
        hasAgreement: "",
        tyDrillInfoDetailsId: "",
        type: "",
      });
    },
    //删除社会资源
    del(index) {
      this.addForm.tyDrillSocialEmergencyResourcesList.splice(index, 1);
    },
    // 添加事故
    addTy() {
      this.addForm.tyDrillAccidentIncubationDtoList.push(
        {
            accidentDevelopment: "",
            emergencyResponse: "",
            tyDrillAccidentIncubationDetailsList1: [//主要应急任务
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
            tyDrillAccidentIncubationDetailsList2: [//事故发生阶段
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
            tyDrillAccidentIncubationDetailsList3: [//事故扩大阶段
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
            tyDrillAccidentIncubationDetailsList4: [//应急结束阶段
              {
                emergencyPlan: "",
                emergencySuppliesPlans: "",
                emergencyTasks: "",
                personnelResponse: "",
                responseSubject: "",

              },
            ],
          },
      )


    },
    //删除事故
    delTy(index) {
      this.addForm.tyDrillAccidentIncubationDtoList.splice(index, 1);
    },
    //上一步
    close() {
      this.$emit("lastSociety", this.addForm);
    },
    //保存word
    next() {
      this.$emit("wordAdd", this.addForm);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 30px;
}

</style>
