<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-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="部别" prop="division" style="width: 200px">
              <el-input v-model="formInline.division"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="台站名称" prop="name" style="width: 200px">
              <el-input v-model="formInline.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="站号" prop="numberStation" style="width: 200px">
              <el-input v-model="formInline.numberStation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="地图级别" prop="level" style="width: 200px">
              <el-input v-model="formInline.level"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属基地" prop="base" style="width: 200px">
              <el-input v-model="formInline.base"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属旅" prop="brigade" style="width: 200px">
              <el-input v-model="formInline.brigade"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="架设方式" prop="methodErection" style="width: 200px">
              <el-input v-model="formInline.methodErection"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="上传间隔" prop="interval" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-select v-model="formInline.interval" style="width: 180px">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="30" value="30"></el-option>
                  <el-option label="60" value="60"></el-option>
                </el-select>
                <span style="padding-left: 10px">分</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="省" prop="provinces" style="width: 200px">
              <el-input v-model="formInline.provinces"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="市县" prop="cities" style="width: 200px">
              <el-input v-model="formInline.cities"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="区镇" prop="districts" style="width: 200px">
              <el-input v-model="formInline.districts"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="乡镇" prop="townships" style="width: 200px">
              <el-input v-model="formInline.townships"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="相对县城距离" prop="interval" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.distance" style="width: 160px"></el-input>
                <span style="padding-left: 10px">公里</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="相对县城方向" prop="direction" style="width: 200px">
              <el-select v-model="formInline.direction">
                <el-option label="东方" value="1"></el-option>
                <el-option label="南方" value="2"></el-option>
                <el-option label="西方" value="3"></el-option>
                <el-option label="北方" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="经度" prop="longitude" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.longitude" style="width: 130px"></el-input>
                <el-select v-model="formInline.longitude2" placeholder="" style="width: 60px;margin-left: 10px">
                  <el-option label="E" value="E"></el-option>
                  <el-option label="W" value="W"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="纬度" prop="latitude" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.latitude" style="width: 130px"></el-input>
                <el-select v-model="formInline.latitude2" placeholder=""  style="width: 60px;margin-left: 10px">
                  <el-option label="N" value="N"></el-option>
                  <el-option label="S" value="S"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="观测场海拔高度" prop="fieldElevation" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.fieldElevation" style="width: 180px"></el-input>
                <span style="padding-left: 10px">米</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="气压传感器海拔高度" prop="sensorElevation" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.sensorElevation" style="width: 180px"></el-input>
                <span style="padding-left: 10px">米</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="测风器距地高度" prop="heightAnmometers" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.heightAnmometers" style="width: 180px"></el-input>
                <span style="padding-left: 10px">米</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="建站日期" prop="buildWebsiteTime" style="width: 200px">
              <el-date-picker
                v-model="formInline.buildWebsiteTime"
                type="date"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="观测组长" prop="leader" style="width: 200px">
              <el-input v-model="formInline.leader" style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="台长" prop="drector" style="width: 200px">
              <el-input v-model="formInline.drector" style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="预审员" prop="preExaminer" style="width: 200px">
              <el-input v-model="formInline.preExaminer" style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="授时许可" prop="grantPermission" style="width: 200px">
              <el-select v-model="formInline.grantPermission">
                <el-option label="不准授权" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="观测方式" prop="modeObservation" style="width: 200px">
              <el-select v-model="formInline.modeObservation">
                <el-option label="自动" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="观测次数" prop="numberObservation" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="formInline.numberObservation" style="width: 180px"></el-input>
                <span style="padding-left: 10px">次</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="" prop="modeObservation" style="width: 200px">
              <div style="display: flex;align-items: center">
                <span>观测时次</span>
                <el-checkbox v-model="formInline.allTime" style="margin-left: 10px" label="全选" />
              </div>
              <sCheckbox style="margin-top: 5px" :data="selectedItemData" :data2="selectedItems" @update:data2="updateSelectedItems"></sCheckbox>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="disposition-title">通信设置</div>
        <el-row :gutter="20">
          <el-col :span="20">
            <div style="display: flex;align-items: center;margin-bottom: 5px">
              <span>主通信</span>
              <el-checkbox v-model="formInline.enableCorrespondence" style="margin-left: 10px" label="启用从通信" />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="通信方式" prop="methods" style="width: 200px">
              <el-select v-model="formInline.methods">
                <el-option label="2G" value="2"></el-option>
                <el-option label="3G" value="3"></el-option>
                <el-option label="4G" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="传输协议" prop="agreement" style="width: 200px">
              <el-select v-model="formInline.agreement">
                <el-option label="TCP+DDP" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="SIM卡号" prop="sim" style="width: 200px">
              <el-input v-model="formInline.sim"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信模块ID" prop="modelId" style="width: 200px">
              <el-input v-model="formInline.modelId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="端口号" prop="port" style="width: 200px">
              <el-input v-model="formInline.port"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信模式" prop="communicationMode" style="width: 200px">
              <el-select v-model="formInline.communicationMode">
                <el-option label="主动+补发" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="" prop="modeObservation" style="width: 200px">
              <div style="display: flex;align-items: center">
                <span>命令设置</span>
                <el-button type="primary" plain style="margin-left: 10px">设置命令</el-button>
              </div>
            </el-form-item>
            <!-- 表格主体 -->
            <div class="table-box" style="width:920px;">
            <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
              <template v-for="item in columns" :key="item">
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  <template #default="scope"></template>
                </el-table-column>
              </template>

              <!-- 无数据 -->
              <template #empty>
                <div class="table-empty">
                  <slot name="empty">
                    <div>暂无数据</div>
                  </slot>
                </div>
              </template>
            </el-table>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="20">
            <div style="display: flex;align-items: center;margin-bottom: 5px;margin-top: 20px">
              <span>从通信</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="通信方式" prop="methods" style="width: 200px">
              <el-select v-model="formInline.methods">
                <el-option label="串口" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="串口号" prop="agreement" style="width: 200px">
              <el-select v-model="formInline.agreement">
                <el-option label="/dev/ttyAMAO" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信参数" prop="agreement" style="width: 200px">
              <el-select v-model="formInline.agreement">
                <el-option label="9600,N8,1" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信模式" prop="communicationMode" style="width: 200px">
              <el-select v-model="formInline.communicationMode">
                <el-option label="主动+补发" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="" prop="modeObservation" style="width: 200px">
              <div style="display: flex;align-items: center">
                <span>命令设置</span>
                <el-button type="primary" plain style="margin-left: 10px">设置命令</el-button>
              </div>
            </el-form-item>
            <!-- 表格主体 -->
            <div class="table-box" style="width:920px;">
              <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
                <template v-for="item in columns" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                    <template #default="scope"></template>
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button > 取消 </el-button>
        <el-button type="primary"> 下一步 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import sCheckbox from "@/components/SCheckbox/index.vue"
import {reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
const formRef = ref<any>();
const formInline = ref<any>({
  division:"",
  name:"",
  numberStation:"",
  level:"",
  base:"",
  brigade:"",
  methodErection:"",
  interval:"",
  provinces:"",
  cities:"",
  districts:"",
  townships:"",
  distance:"",
  direction:"",
  longitude: "",
  longitude2: "E",
  latitude:"",
  latitude2:"N",
  fieldElevation:"",
  sensorElevation:"",
  modeObservation:"",
  numberObservation:"",
  heightAnmometers:"",
  buildWebsiteTime:"",
  leader:"",
  drector:"",
  preExaminer:"",
  grantPermission:"",
  allTime:"",
  enableCorrespondence:"",
  methods:"",
  agreement:"",
  sim:"",
  modelId:"",
  port:"",
  communicationMode:""
})

const rules = ref<any>(
  {
    division: [{ required: true, message: "部别不能为空", trigger: "blur" }],
    name: [{ required: true, message: "台站名称不能为空", trigger: "blur" }],
    numberStation: [{ required: true, message: "站号不能为空", trigger: "blur" }],
    base: [{ required: true, message: "所属基地不能为空", trigger: "blur" }],
    brigade: [{ required: true, message: "所属旅不能为空", trigger: "blur" }],
    methodErection: [{ required: true, message: "架设方式不能为空", trigger: "blur" }],
    provinces: [{ required: true, message: "省不能为空", trigger: "blur" }],
    cities: [{ required: true, message: "市县不能为空", trigger: "blur" }],
    districts: [{ required: true, message: "区镇不能为空", trigger: "blur" }],
    townships: [{ required: true, message: "乡镇不能为空", trigger: "blur" }],
    distance: [{ required: true, message: "相对县城距离不能为空", trigger: "blur" }],
    longitude: [{ required: true, message: "相对县城方向不能为空", trigger: "blur" }],
    latitude: [{ required: true, message: "相对县城方向不能为空", trigger: "blur" }],
    fieldElevation: [{ required: true, message: "观测场海拔高度不能为空", trigger: "blur" }],
    sensorElevation: [{ required: true, message: "气压传感器海拔高度不能为空", trigger: "blur" }],

  }
);

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

    }
  });
}

const selectedItemData = ref<number[]>([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]);
const selectedItems = ref<number[]>([]);

function updateSelectedItems(newSelectedItems: number[]) {
  selectedItems.value = newSelectedItems;
}



const processTableData = ref([
  {
    id: "681913747276782417",
    a: "FZSJ",
    b: "FZSJ",
    c: "观测数据",
    d: "1分钟",
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "命令名称"},
  { prop: "b", label: "命令标识符"},
  { prop: "c", label: "命令类型" },
  { prop: "d", label: "间隔时间(分钟)"}
]);
</script>

<style scoped>
.table-box{
  height: auto;
}
</style>
