<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="数据类型" prop="dataType">
        <!-- <el-select v-model="dataType" placeholder="请选择">
          <el-option
            v-for="dict in dict.type.biz_data_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select> -->
        <el-radio
          v-for="dict in dict.type.biz_data_type"
          :key="dict.value"
          v-model="queryParams.dataType"
          :label="dict.value"
          >{{ dict.label }}</el-radio
        >
      </el-form-item>
      <el-form-item label="类型" prop="sampleType">
        <el-input
          v-model="queryParams.sampleType"
          placeholder="请输入类型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="型号" prop="sampleModel">
        <el-input
          v-model="queryParams.sampleModel"
          placeholder="请输入型号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表面温度" prop="temperatureK">
        <el-input
          v-model="queryParams.temperatureK"
          placeholder="请输入表面温度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="光谱波段" prop="wavelengthUm">
        <el-input
          v-model="queryParams.wavelengthUm"
          placeholder="请输入光谱波段"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入射天顶角θi" prop="thetaIncident">
        <el-input
          v-model="queryParams.thetaIncident"
          placeholder="请输入射天顶角θi"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入射方位角φi" prop="phiIncident">
        <el-input
          v-model="queryParams.phiIncident"
          placeholder="请输入入射方位角φi"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="反射天顶角θr" prop="thetaReflected">
        <el-input
          v-model="queryParams.thetaReflected"
          placeholder="请输入反射天顶角θr"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="反射方位角φr" prop="phiReflected">
        <el-input
          v-model="queryParams.phiReflected"
          placeholder="请输入反射方位角φr"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="12" class="result">
        <el-card class="result_row">
          <el-rowv class="result_top">样片实物图</el-rowv>
          <el-row class="result_botton">
            <el-image :src="sampleImage" fit="scale-down"></el-image
          ></el-row>
        </el-card>
      </el-col>
      <el-col :span="12" class="result">
        <el-card class="result_row">
          <el-row class="result_top">EMI修正折线图</el-row>
          <el-row class="result_botton">2</el-row>
        </el-card>
      </el-col>
      <el-col :span="12" class="result">
        <el-card class="result_row">
          <el-row class="result_top">测量数据表</el-row>
          <el-row class="result_botton">2</el-row>
        </el-card>
      </el-col>
      <el-col :span="12" class="result">
        <el-card class="result_row">
          <el-row class="result_top">积分数据表</el-row>
          <el-row class="result_botton">2</el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-table v-loading="loading" :data="sampleList">
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="样片类型" align="center" prop="sampleType" />
      <el-table-column label="样片型号" align="center" prop="sampleModel" />
      <el-table-column
        label="样片图片"
        align="center"
        prop="sampleImage"
        width="100"
      >
        <template slot-scope="scope">
          <image-preview
            :src="scope.row.sampleImage"
            :width="50"
            :height="50"
          />
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
export default {
  name: "Index",
  dicts: ["biz_data_type"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 版本号
      queryParams: {
        dataType: "1",
        pageNum: 1,
        pageSize: 10,
        sampleType: null,
        sampleModel: null,
        temperatureK: null,
        wavelengthUm: null,
      },
      // 样片管理表格数据
      sampleList: [],
      sampleImage:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    // 查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = false;
    },
  },
};
</script>

<style scoped lang="scss">
.result {
  display: flex;
  flex-direction: column;
  height: 35vh; /* 容器占满视口 */
}
.result_row {
  height: 100%; /* 现在可以正常工作 */
}
.result_top {
  height: 10%; /* 现在可以正常工作 */
}
.result_botton {
  height: 10%; /* 现在可以正常工作 */
}
</style>
