<template>
  <el-form :inline="true" :model="formInline" ref="formRef"  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">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-radio-group v-model="radio1">
              <el-radio-button  label="云底高设置" value="云底高设置" plain/>
              <el-radio-button  label="温湿压设置" value="温湿压设置" plain/>
              <el-radio-button  label="累年平均值" value="累年平均值" plain/>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="31" v-if="radio1==='云底高设置'">
          <el-col :span="8">
            <div class="table-box" style="margin-top: 20px;height: 57vh" >
              <!-- 表格主体 -->
              <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">
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="table-box" style="margin-top: 20px;height: 57vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData2"  size="small">
                <template v-for="item in columns2" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="table-box" style="margin-top: 20px;height: 57vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData3"  size="small">
                <template v-for="item in columns3" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='温湿压设置'">
          <el-col :span="24">
            <el-button type="primary" plain style="margin-top: 15px;">导出历史值</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='温湿压设置'">
          <el-col :span="24">
            <div class="table-box" style="margin-top: 10px;height: 53vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData4"  size="small">
                <template v-for="item in columns4" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='累年平均值'">
          <el-col :span="24">
            <div class="table-box" style="margin-top: 10px;height: 57vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData5"  size="small">
                <template v-for="item in columns5" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <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" plain> 上一步 </el-button>
        <el-button type="primary"> 下一步 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import {reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
const formRef = ref<any>();
const formInline = ref<any>({

})

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

    }
  });
}

const radio1 = ref('云底高设置')

const processTableData = ref([
  {
    a: "Cihl",
    b: "4500",
    c: "11000",
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "要素"},
  { prop: "b", label: "低值"},
  { prop: "c", label: "高值" },
]);

const processTableData2 = ref([
  {
    a: "Astra",
    b: "2500",
    c: "4500",
  },
  {
    a: "Astra",
    b: "2500",
    c: "4500",
  },{
    a: "Astra",
    b: "2500",
    c: "4500",
  },{
    a: "Astra",
    b: "2500",
    c: "4500",
  }
]);

// 表格配置项
const columns2 = reactive<ColumnProps[]>([
  { prop: "a", label: "要素"},
  { prop: "b", label: "低值"},
  { prop: "c", label: "高值" },
]);

const processTableData3 = ref([
  {
    a: "Cuhum",
    b: "600",
    c: "2000",
  }
]);

// 表格配置项
const columns3 = reactive<ColumnProps[]>([
  { prop: "a", label: "要素"},
  { prop: "b", label: "低值"},
  { prop: "c", label: "高值" },
]);


const processTableData4 = ref([
  {
    a: "1月",
    b: "-10",
    c: "40",
  }
]);

// 表格配置项
const columns4 = reactive<ColumnProps[]>([
  { prop: "a", label: "月份"},
  { prop: "b", label: "最低气温(℃)"},
  { prop: "c", label: "最高气温(℃)" },
  { prop: "d", label: "最小相对混度(%)" },
  { prop: "e", label: "最大相对混度(%)" },
  { prop: "f", label: "本站最小气压(hpa)" },
  { prop: "g", label: "本站最大气压(hpa)" },
]);

const processTableData5 = ref([
  {
    a: "1月"
  },
  {
    a: "2月"
  },
  {
    a: "3月"
  },
  {
    a: "4月"
  },
  {
    a: "5月"
  },
  {
    a: "6月"
  },
  {
    a: "7月"
  },
  {
    a: "8月"
  },
  {
    a: "9月"
  },
  {
    a: "10月"
  },
  {
    a: "11月"
  },
  {
    a: "12月"
  },

]);

// 表格配置项
const columns5 = reactive<ColumnProps[]>([
  { prop: "a", label: "月份"},
  { prop: "b", label: "温度平均值(℃)"},
  { prop: "c", label: "湿度平均值(RH%)" },
  { prop: "d", label: "气压平均值(hpa)" },
]);

</script>

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