<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="searchPktType" style="width: 100%;" text-color="#000000" @change="searchPktTypetFmt">
        <el-row :gutter="20" style="width: 100%;">
          <el-col :span="4">
            <el-radio :value="0">整点编报</el-radio>
          </el-col>
          <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-row>
        </el-radio-group>
        <div class="disposition-title">报告类型</div>
        <el-radio-group v-model="searchPktFmt" style="width: 100%" @change="searchPktTypetFmt">
        <el-row :gutter="20"  style="width: 100%;">
          <el-col :span="4">
            <el-radio :value="0">军队报文格式</el-radio>
          </el-col>
          <el-col :span="4">
            <el-radio  :value="1">空军报文格式</el-radio>
          </el-col>
        </el-row>
        </el-radio-group>
        <div class="disposition-title">第一段(基本项目段)</div>
        <el-checkbox-group v-model="pkt_jbxm" style="width: 100%" disabled>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="是否固定台站" :value="0"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最小能见度" :value="1"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="本站气压" :value="2"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="海平面气压" :value="3"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="时降水量" :value="4"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="日降水量" :value="5"/>
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第二段(航空航天段)</div>
        <el-checkbox-group v-model="pkt_hkht" style="width: 100%" disabled>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="垂直能见度" :value="0" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="跑道视程" :value="1"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="场面、零点、高度表" :value="2"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="静电场" :value="3"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="雷电" :value="4"/>
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第三段(重要危险段)</div>
        <el-checkbox-group v-model="pkt_zywx" style="width: 100%" disabled>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="瞬时最大风速" :value="0"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="积雨云方向去向" :value="1"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="冰雹最大直径"  :value="2"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="云敝山所在方向" :value="3"/>
            </el-col>
          </el-row>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="低云方向去向"  :value="4"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最大静电场强度" :value="5"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="雷暴方向去向" :value="6"/>
            </el-col>
            <el-col :span="4">
              <el-checkbox label="龙卷方向去向" :value="7"/>
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第四段(海洋水文段)</div>
        <el-checkbox-group v-model="pkt_hysw" style="width: 100%" disabled>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="航向和航速" :value="0" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="表层海水温度" :value="1" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="表层海水盐度"  :value="2" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="海况和波周期" :value="3" />
            </el-col>
          </el-row>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="波级和波高" :value="4"  />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="风浪和涌波" :value="5"  />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="降水PH值" :value="6"  />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="气溶胶" :value="7"  />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第五段(非基本项)</div>
        <el-checkbox-group v-model="pkt_fjbx" style="width: 100%" disabled>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="地表溫度" :value="0" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="地表和积雪" :value="1" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="蒸发量组" :value="2"  />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="日照时数" :value="3" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="电线结冰最大重量" :value="4" />
            </el-col>
          </el-row>
        </el-checkbox-group>
        <div class="disposition-title">第六段(日极值段)</div>
        <el-checkbox-group v-model="pkt_rjz" style="width: 100%" disabled>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="最高温度" :value="0" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最低温度" :value="1" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="地表最高温度" :value="2" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="地表最低温度" :value="3" />
            </el-col>
          </el-row>
          <el-row :gutter="20"  style="width: 100%;">
            <el-col :span="4">
              <el-checkbox label="最高潮高" :value="4" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最高潮时" :value="5" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最低潮高" :value="6" />
            </el-col>
            <el-col :span="4">
              <el-checkbox label="最低潮时" :value="7" />
            </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="pkt_bbys1" disabled>
              <el-option label="露点温度" :value="109"></el-option>
              <el-option label="相对湿度" :value="106"></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="pkt_bbys2" disabled>
               <el-option label="场面气压" :value="208"></el-option>
               <el-option label="零点高度" :value="210"></el-option>
               <el-option label="高度表拨正" :value="213"></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="pkt_jssd" disabled>
               <el-option label="三小时" :value="3"></el-option>
               <el-option label="六小时" :value="6"></el-option>
               <el-option label="十二小时" :value="12"></el-option>
               <el-option label="十五小时" :value="15"></el-option>
               <el-option label="十八小时" :value="18"></el-option>
               <el-option label="二十一小时" :value="21"></el-option>
               <el-option label="二十四小时" :value="24"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button disabled> 取消 </el-button>
        <el-button type="primary" plain disabled> 上一步 </el-button>
        <el-button type="primary" disabled> 完成 </el-button>
      </div>
    </div>
  </el-form>
</template>
<script setup lang="tsx">
import {defineProps, onMounted, ref} from "vue";
import {getQueryAllSysItem, getUserList, getYaspacketList} from "@/api/modules/allData";

const props = defineProps<{
  selectData?: {};
}>();

const searchPktType = ref(0)
const searchPktFmt = ref(0)

const processTableData = ref([]);
const pageable = ref<any>({
  asCode: props.selectData.as_code,
  pageNum: 1,
  pageSize: 20,
});
const getList= async ()=>{
  const { data } = await getYaspacketList(pageable.value);
  processTableData.value = data.list
  findData()
}

const pkt_jbxm = ref([])
const pkt_hkht = ref([])
const pkt_zywx = ref([])
const pkt_hysw = ref([])
const pkt_fjbx = ref([])
const pkt_rjz = ref([])
const pkt_bbys1 = ref()
const pkt_bbys2 = ref()
const pkt_jssd = ref()

const findData=()=>{
  if(processTableData.value===undefined){
    return;
  }
  const result = processTableData.value.find(item => item.pkt_type === searchPktType.value && item.pkt_fmt === searchPktFmt.value);
  if(result){
    pkt_jbxm.value = result.pkt_jbxm.split('|').map((val, index) => val === '1' ? index : -1);
    pkt_hkht.value =result.pkt_hkht.split('|').map((val, index) => val === '1' ? index : -1);
    pkt_zywx.value =result.pkt_zywx.split('|').map((val, index) => val === '1' ? index : -1);
    pkt_hysw.value =result.pkt_hysw.split('|').map((val, index) => val === '1' ? index : -1);
    pkt_fjbx.value=result.pkt_fjbx.split('|').map((val, index) => val === '1' ? index : -1);
    pkt_rjz.value = result.pkt_rjz.split('|').map((val, index) => val === '1' ? index : -1);
    pkt_bbys1.value = result.pkt_bbys1
    pkt_bbys2.value =result.pkt_bbys2
    pkt_jssd.value = result.pkt_jssd
  }else {
    pkt_jbxm.value = []
    pkt_hkht.value = []
    pkt_zywx.value = []
    pkt_hysw.value =[]
    pkt_fjbx.value =[]
    pkt_rjz.value =[]
    pkt_bbys1.value = undefined
    pkt_bbys2.value =undefined
    pkt_jssd.value = undefined
  }

}

const searchPktTypetFmt = ()=>{
  findData()
}

onMounted(() => {
  getList()
})





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>
