<template>
  <div>
    <el-form
      ref="addForm"
      :model="addForm"
      label-position="right"
      :rules="rules"
      style="padding: 0 20px; margin-top: 50px"
      label-width="140px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="故事简要描述：" prop="storyDescription">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 4, maxRows: 444 }"
              style="width: 100%"
              v-model="addForm.storyDescription"
              placeholder="请输入故事简要描述"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="季节：" prop="season">
            <el-select clearable v-model="addForm.season">
              <el-option
                  v-for="dict in dict.type.sys_season"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="风向：" prop="windDirection">
            <el-select clearable v-model="addForm.windDirection">
              <el-option
                  v-for="dict in dict.type.sys_orientation"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="平均风速：" prop="windSpeed">
            <el-input
              style="width: 80%"
              v-model="addForm.windSpeed"
              placeholder="请输入平均风速"
              clearable
            />
            m/s
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="气温：" prop="temperature">
            <el-input
              style="width: 80%"
              v-model="addForm.temperature"
              placeholder="请输入气温"
              clearable
            />
            ℃
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="降水情况：" prop="precipitationEvent">
            <el-select clearable v-model="addForm.precipitationEvent">
              <el-option
                  v-for="dict in dict.type.sys_rain"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="大气稳定度：" prop="atmosphericStability">
            <el-select clearable v-model="addForm.atmosphericStability">
              <el-option
                  v-for="dict in dict.type.sys_stabilize"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="天气：" prop="weather">
            <el-select clearable v-model="addForm.weather">
              <el-option
                  v-for="dict in dict.type.sys_weather"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="时间：" prop="time">
            <el-date-picker
              style="width: 100%"
              v-model="addForm.time"
              format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="装置运行状态：" prop="conveyingDirectionStart">
            <el-input
              style="width: 20%"
              v-model="addForm.conveyingDirectionStart"
              clearable
            />
            &nbsp;
            &nbsp;
            &nbsp;
            <i class="el-icon-right icon"></i>
            &nbsp;
            &nbsp;
            <el-input
              style="width: 20%"
              v-model="addForm.conveyingDirectionEnd"
              clearable
            />
          </el-form-item>
        </el-col>
            <!-- <el-col :span="2">
        <i class="el-icon-right icon"></i>
        </el-col>
        <el-col :span="4">
          <el-form-item label="" prop="conveyingDirectionEnd" label-width="0">
            <el-input
              style="width: 50%"
              v-model="addForm.conveyingDirectionEnd"
              clearable
            />
          </el-form-item>
        </el-col> -->

        <el-col :span="7">
          <el-form-item label="输送介质：" prop="transportMedium">
            <el-input
              style="width: 70%"
              v-model="addForm.transportMedium"
              placeholder="请输入输送介质"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="21">
          <el-form-item label="操作压力：" prop="operatingPressureStart">
            首站
            <el-input
              style="width: 20%"
              v-model="addForm.operatingPressureStart"
              clearable
            />
            MPa
            <i class="el-icon-right icon"></i>

            末站
            <el-input
              style="width: 20%"
              v-model="addForm.operatingPressureEnd"
              clearable
            />
            MPa
          </el-form-item>
        </el-col>
        <!-- <el-col :span="2">
        <i class="el-icon-right icon"></i>
        </el-col>

          <el-col :span="4">

          <el-form-item label="" prop="operatingPressureEnd" label-width="0">
            末站
            <el-input
              style="width: 40%"
              v-model="addForm.operatingPressureEnd"
              clearable
            />
            MPa
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员操作状态：" prop="operationalState">
            <el-input
              style="width: 100%"
              v-model="addForm.operationalState"
              placeholder="请输入人员操作状态"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报警提示：" prop="alarmPrompt">
            <el-input
              style="width: 100%"
              v-model="addForm.alarmPrompt"
              placeholder="请输入报警提示"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员响应：" prop="personnelResponse">
            <el-input
              style="width: 100%"
              v-model="addForm.personnelResponse"
              placeholder="请输入人员响应"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="泄漏点：" prop="leakagePoint">
            <el-input
              style="width: 100%"
              v-model="addForm.leakagePoint"
              placeholder="请输入泄漏点"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="现场处理：" prop="sceneDispose">
            <el-input
              style="width: 100%"
              v-model="addForm.sceneDispose"
              placeholder="请输入现场处理"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事故危害：" prop="accidentHazards">
            <el-input
              style="width: 100%"
              v-model="addForm.accidentHazards"
              placeholder="请输入事故危害"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="事故扩大：" prop="accidentExpansion">
            <el-input
              style="width: 100%"
              v-model="addForm.accidentExpansion"
              placeholder="请输入事故扩大"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事故扩大危害：" prop="accidentExpansionHazard">
            <el-input
              style="width: 100%"
              v-model="addForm.accidentExpansionHazard"
              placeholder="请输入事故扩大危害"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 50px">
      <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:['termForm'],
  name: "RuoyiTerm",
  dicts: ["sys_orientation", "sys_rain", "sys_stabilize", "sys_weather", "sys_season"],
  data() {
    return {
      //表单数据
      addForm: {},
      //表单验证
      rules: {},
      seasonList: ["春", "春夏", "夏", "夏秋", "秋", "秋冬", "冬"], //季节数据 sys_season
      windList: ["东", "东南", "东北", "南", "西南", "西", "西北", "北"], //sys_orientation
      precipitationList: ["无", "小雨", "中雨", "大雨", "暴雨", "特大暴雨"], //降水数据 sys_rain
      stabilizationList: [
        "强不稳定",
        "不稳定",
        "弱不稳定",
        "中性",
        "较稳定",
        "稳定",
      ], // 大气稳定度数据 sys_stabilize
      weatherList: [
        "晴",
        "多云",
        "阴",
        "小雨",
        "中雨",
        "大雨",
        "暴雨",
        "特大暴雨",
      ], //天气数据 sys_weather
    };
  },

  mounted() {
    if ( JSON.stringify(this.termForm) == '{}') return
    //加载时赋值，第二步点击上一步时数据回显，第一次进入为空
    this.addForm = this.termForm
  },

  methods: {
    //取消回到主页
    close() {
      this.$emit("close", false);
    },
    next() {
      console.log(this.addForm)
      this.$emit("termClick",  this.addForm);
    },
  },
};
</script>

<style lang="scss" scoped>
.icon{
  margin-top: 10px;
}</style>
