<template>
  <div>
    <el-form
        ref="addForm"
        :model="addForm"
        label-position="right"
        :rules="rules"
        style="padding: 0 20px; margin-top:50px"
        label-width="190px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label-width="70px" label="地图：" ref="loadFlag">
              <ImageUpload
                v-model="addForm.picUrl"
                :isShowTip="false"
              />
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
           <p class="title">方位及环境</p>
           <el-table
        :data="addForm.tyDrillOrientationEnvironmentList"
        :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="150">
          <template slot-scope="scope">
            <el-select clearable v-model="addForm.tyDrillOrientationEnvironmentList[scope.$index].position">
              <el-option
                  v-for="dict in dict.type.sys_orientation"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
				</el-select>
          </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.tyDrillOrientationEnvironmentList[scope.$index].peripheryEnvironment"
                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%,"
                v-model="addForm.tyDrillOrientationEnvironmentList[scope.$index].spacing"
                clearable
              />
          </template>
        </el-table-column>
        <el-table-column label="人数" align="center" show-overflow-tooltip width="150">
          <template slot-scope="scope">
            <el-input
            type="textarea"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 444 }"
                style="width: 100%,"
                v-model="addForm.tyDrillOrientationEnvironmentList[scope.$index].peopleNum"
                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="del(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
          </el-col>
        </el-row>
        <el-button style="margin-top: 15px;" type="primary" @click="add"> 添加 </el-button>
        <el-row>
          <p class="title">事故后果：</p>
          <el-col :span="9">
            <el-form-item label="设施：" prop="facilities">
              <el-input
                style="width: 90%"
                v-model="addForm.facilities"
                placeholder="请输入设施"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="人员伤亡情况：" prop="casualties">
              <el-input
                style="width: 50%"
                v-model="addForm.casualties"
                clearable
              /> 人
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="发生多次该事件的可能性：" prop="eventPossibility">
            <el-select clearable v-model="addForm.eventPossibility"  style="width: 100%">
              <el-option
                  v-for="dict in dict.type.sys_possibility"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="24">
          <el-form-item label="基础设施损坏情况：" prop="infrastructureDamageSituation">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 444 }"
              style="width: 100%"
              v-model="addForm.infrastructureDamageSituation"
              placeholder="请输入基础设施损坏情况"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
          <el-row>
        <el-col :span="24">
          <el-form-item label="疏散/迁移入口：" prop="migrationPopulation">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 444 }"
              style="width: 100%"
              v-model="addForm.migrationPopulation"
              placeholder="请输入疏散/迁移入口"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <el-col :span="24">
          <el-form-item label="环境污染情况：" prop="environmentalPollutionSituation">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 444 }"
              style="width: 100%"
              v-model="addForm.environmentalPollutionSituation"
              placeholder="请输入环境污染情况"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="直接和间接经济损失总计：" prop="economicLossesTotal">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 444 }"
              style="width: 100%"
              v-model="addForm.economicLossesTotal"
              placeholder="请输入直接和间接经济损失总计"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="救援复杂程度：" prop="rescueComplexity">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 444 }"
              style="width: 100%"
              v-model="addForm.rescueComplexity"
              placeholder="请输入救援复杂程度"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="恢复时间：" prop="restoreTime">
            <el-input
              type="text"
              style="width: 100%"
              v-model="addForm.restoreTime"
              placeholder="请输入恢复时间"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <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: ['geographyForm'],
  name: 'RuoyiTerm',
  dicts: ["sys_orientation", "sys_possibility"],
  data() {
    return {
      //表单数据
      addForm: {
        tyDrillOrientationEnvironmentList: [{
        peopleNum: '',//人数
      peripheryEnvironment: '',
      position: '',
      spacing: '',
        }]
      },
      //表单验证
      rules: {},
      windList: [
      '东','东南','东北','南','西南','西','西北','北'
      ],//方位数据
    };
  },

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

  methods: {
    //取消回到主页
    close() {
      this.$emit('lastGeography', this.addForm)
    },
    next() {
      this.$emit('geographyClick', this.addForm)
    },
    //添加表格单项
    add () {
      this.addForm.tyDrillOrientationEnvironmentList.push({
        peopleNum: '',//人数
      peripheryEnvironment: '',
      position: '',
      spacing: '',
        })
    },
    //删除表格当前项
    del(index) {
      this.addForm.tyDrillOrientationEnvironmentList.splice(index, 1)
    }
  },
};
</script>

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