<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="as_h_yun"  size="small">
                <template v-for="item in columns_yun" :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 v-if="item.prop === 'a'">
                       {{as_h_yun_c[scope.$index]}}
                      </template>
                    </template>
                  </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="as_z_yun"  size="small">
                <template v-for="item in columns_yun" :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 v-if="item.prop === 'a'">
                        {{as_z_yun_c[scope.$index]}}
                      </template>
                    </template>
                  </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="as_d_yun"  size="small">
                <template v-for="item in columns_yun" :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 v-if="item.prop === 'a'">
                        {{as_d_yun_c[scope.$index]}}
                      </template>
                    </template>
                  </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="temperatureHumidity"  size="small">
                <template v-for="item in columnsTemperatureHumidity" :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 v-if="item.prop === 'a'">
                        {{scope.$index+1}} 月
                      </template>
                    </template>
                  </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="averageData"  size="small">
                <template v-for="item in columnsAverage" :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 v-if="item.prop === 'a'">
                        {{scope.$index+1}} 月
                      </template>
                    </template>
                  </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 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, reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
import {getYasaverag, getYasaverage, getYasthreshold} from "@/api/modules/allData";
const props = defineProps<{
  selectData?: {};
}>();

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

}


const getYasaverageList= async ()=>{
  const { data } = await getYasaverage(pageable.value);
 const averageList = data[props.selectData.as_code]
  if(averageList===undefined){
    return;
  }
  //温湿度设置
  const as_wd = averageList.as_wd_list
  const as_sd = averageList.as_sd_list
  const as_qy = averageList.as_qy_list
  //存放合并as_wd，as_sd，as_qy， 三种类型都是12条，把三种类型下标相同合成一条数据，给 temperatureHumidity.value数组
  averageData.value = []
  for(var i=0;i<12;i++){
    averageData.value.push({
      value_wd:as_wd[i],
      value_sd:as_sd[i],
      value_qy:as_qy[i],
    })
  }
}




const getYasthresholdList= async ()=>{
  const { data } = await getYasthreshold(pageable.value);
  voltageHigh.value = data[props.selectData.as_code]
  if(voltageHigh.value===undefined){
    return;
  }
  //云底高度设置
  as_h_yun.value = voltageHigh.value.as_h_yun
  as_z_yun.value = voltageHigh.value.as_z_yun
  as_d_yun.value = voltageHigh.value.as_d_yun

  //温湿度设置
  const as_wd = voltageHigh.value.as_wd  // [{h_value: "50", l_value: "-55"}]
  const as_sd = voltageHigh.value.as_sd  // [{h_value: "60", l_value: "-55"}]
  const as_qy = voltageHigh.value.as_qy // [{h_value: "70", l_value: "-55"}]

  //存放合并as_wd，as_sd，as_qy， 三种类型都是12条，把三种类型下标相同合成一条数据，给 temperatureHumidity.value数组
  temperatureHumidity.value = []
  for(var i=0;i<12;i++){
    temperatureHumidity.value.push({
      h_value_wd:as_wd[i].h_value,l_value_wd:as_wd[i].l_value,
      h_value_sd:as_sd[i].h_value,l_value_sd:as_sd[i].l_value,
      h_value_qy:as_qy[i].h_value,l_value_qy:as_qy[i].l_value,
    })
  }
}


onMounted(() => {
  getYasthresholdList()
  getYasaverageList()
})

//云底高度设置
const as_h_yun = ref([])
const as_z_yun = ref([])
const as_d_yun = ref([])
const as_h_yun_c = ref(["Cifil","Cidens","Cinot","Ciunc","Csfil","Csnebu","Cc"])
const as_z_yun_c= ref(["Astra","Asop","Actra","Acop","AClent","Accug","Acflo","Accast"])
const as_d_yun_c= ref(["Cuhum","Fc","Cucong","Cbcalv","Cbcap","Sctra","Scop","Sccug","Sccast","Sclent","St","Fs","Ns","Fn"])

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

//温湿度设置
const temperatureHumidity = ref([])
const columnsTemperatureHumidity = reactive<ColumnProps[]>([
  { prop: "a", label: "月份",width:100},
  { prop: "l_value_wd", label: "最低气温(℃)"},
  { prop: "h_value_wd", label: "最高气温(℃)" },
  { prop: "l_value_sd", label: "最小相对湿度(%)" },
  { prop: "h_value_sd", label: "最大相对湿度(%)" },
  { prop: "l_value_qy", label: "本站最小气压(hpa)" },
  { prop: "h_value_qy", label: "本站最大气压(hpa)" },
]);

//累年平均值
const averageData = ref([])
const columnsAverage= reactive<ColumnProps[]>([
  { prop: "a", label: "月份"},
  { prop: "value_wd", label: "温度平均值(℃)"},
  { prop: "value_sd", label: "湿度平均值(RH%)" },
  { prop: "value_qy", label: "气压平均值(hpa)" },
]);





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: "l_value", label: "低值"},
  { prop: "h_value", 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>
