<template>
  <el-form :inline="true" :model="formInline" ref="formRef" :rules="rules" class="form-inline" label-position="top">
    <div style="display: flex;flex-direction: column;">
      <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
        <div class="disposition-title">报告类型</div>
        <el-radio-group v-model="radio" style="width: 100%;" text-color="#000000">
        <el-row :gutter="20" style="width: 100%;">
          <el-col :span="4">
            <el-radio :value="1">整点编报</el-radio>
          </el-col>
          <el-col :span="4">
            <el-radio  :value="2">半点编报</el-radio>
          </el-col>
          <el-col :span="4">
            <el-radio  :value="3">临时编报</el-radio>
          </el-col>
        </el-row>
        </el-radio-group>
        <div class="disposition-title">报告类型</div>
        <el-radio-group v-model="radio" style="width: 100%">
        <el-row :gutter="20"  style="width: 100%;">
          <el-col :span="4">
            <el-radio v-model="radio" :value="1">军队报文格式</el-radio>
          </el-col>
          <el-col :span="4">
            <el-radio v-model="radio" :value="2">空军报文格式</el-radio>
          </el-col>
        </el-row>
        </el-radio-group>
        <div class="disposition-title">第一段(基本项目段)</div>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="是否固定台站" value="是否固定台站" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最小能见度" value="最小能见度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="本站气压" value="本站气压" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="海平面气压" value="海平面气压" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="时降水量" value="时降水量" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="日降水量" value="日降水量" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第二段(航空航天段)</div>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="垂直能见度" value="垂直能见度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="跑道视程" value="跑道视程" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="场面、零点、高度表" value="场面、零点、高度表" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="静电场" value="静电场" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="雷电" value="雷电" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第三段(重要危险段)</div>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="瞬时最大风速" value="瞬时最大风速" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="积雨云方向去向" value="积雨云方向去向" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="冰雹最大直径" value="冰雹最大直径" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="云敝山所在方向" value="云敝山所在方向" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="低云方向去向" value="低云方向去向" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最大静电场强度" value="最大静电场强度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="雷暴方向去向" value="雷暴方向去向" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="龙卷方向去向" value="龙卷方向去向" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第四段(海洋水文段)</div>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="航向和航速" value="航向和航速" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="表层海水温度" value="表层海水温度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="表层海水盐度" value="表层海水盐度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="海况和波周期" value="海况和波周期" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="波级和波高" value="波级和波高" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="风浪和涌波" value="风浪和涌波" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="降水PH值" value="降水PH值" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="气溶胶" value="气溶胶" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第五段(非基本项)</div>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="地表溫度" value="地表溫度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="地表和积雪" value="地表和积雪" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="蒸发量组" value="蒸发量组" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="日照时数" value="日照时数" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="电线结冰最大重量" value="电线结冰最大重量" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第六段(日极值段)</div>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="最高温度" value="最高温度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最低温度" value="最低温度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="地表最高温度" value="地表最高温度" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="地表最低温度" value="地表最低温度" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="最高潮高" value="最高潮高" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最高潮时" value="最高潮时" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最低潮高" value="最低潮高" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最低潮时" value="最低潮时" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第七段(编报要素选择)</div>
       <el-row :gutter="20"  style="width: 100%;">
        <el-col :span="4">
          <el-form-item label="编报要素选择1" prop="element" style="width: 200px">
            <el-select v-model="formInline.element">
              <el-option label="漏点温度" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span="4">
           <el-form-item label="编报要素选择2" prop="element2" style="width: 200px">
             <el-select v-model="formInline.element2">
               <el-option label="场面气压" value="1"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="4">
           <el-form-item label="编报要素降水时段选择" prop="time" style="width: 200px">
             <el-select v-model="formInline.time">
               <el-option label="三小时" value="1"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button > 取消 </el-button>
        <el-button type="primary" plain> 上一步 </el-button>
        <el-button type="primary"> 完成 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import {reactive, ref} from "vue";
const formRef = ref<any>();
const formInline = ref<any>({
  element:'',
  element2:'',
  time:''
})
const radio = ref(1)
const checkList = ref([])
const rules = ref<any>(
  {
  }
);

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {

    }
  });
}


</script>

<style scoped>

</style>
