<template>
  <div class="main">
    <el-form>
      <el-row>
        <el-col :span="6">
          <el-form-item label="名称">
            <el-input
              v-model="listQuery.name"
              style="width: 70%"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="卫星">
            <el-select
              v-model="listQuery.imageSatelliteType"
              placeholder="请选择卫星"
            >
              <el-option label="全部" :value="undefined"></el-option>
              <el-option
                v-for="(item, idx) in imgPrices"
                :key="idx"
                :label="item.satelliteName"
                :value="item.imageSatelliteType"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="分辨率">
            <el-select
              v-model="listQuery.resolution"
              placeholder="请选择分辨率"
            >
              <el-option label="全部" :value="undefined"></el-option>
              <el-option
                v-for="(item, idx) in resolutions"
                :key="idx"
                :label="item.resolutionName"
                :value="item.resolution"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="info" @click="clear">清除搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table border :data="list" style="margin-top: 20px; width: 100%">
      <el-table-column prop="name" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="imageSatelliteType" label="卫星" align="center">
      </el-table-column>
      <el-table-column
        prop="imageSatelliteTypeDisplay"
        label="卫星描述"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="imageResolution" label="分辨率" align="center">
      </el-table-column>
      <el-table-column prop="imageTakeTimeStr" label="拍摄时间" align="center">
      </el-table-column>
      <el-table-column prop="imageCloudage" label="云量" align="center">
      </el-table-column>
      <el-table-column prop="imageSensorId" label="传感器id" align="center">
      </el-table-column>
      <el-table-column prop="imageSensorType" label="传感器标识" align="center">
      </el-table-column>
      <el-table-column prop="dataId" label="数据id" align="center">
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  getDateList,
  getResolutionAll,
  getimagePriceAll,
} from "api/website/archiveDataManagement";
import { timestamp2DateAuto } from "../../../utils/dateUtils";
export default {
  data() {
    return {
      list: [{}],
      total: 0,
      resolutions: [],
      imgPrices: [],
      listQuery: {
        page: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.getList();
    this.getResolutions();
    this.getImgPrices();
  },
  methods: {
    getResolutions() {
      getResolutionAll().then((res) => {
        if (res.status == 200) {
          this.resolutions = res.data;
        }
      });
    },
    getImgPrices() {
      getimagePriceAll().then((res) => {
        if (res.status == 200) {
          this.imgPrices = res.data;
        }
      });
    },
    search() {
      this.listQuery.page = 1;
      this.getList();
    },
    clear() {
      this.listQuery = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    getList() {
      getDateList(this.listQuery).then((res) => {
        if (res.status == 200) {
          this.total = res.data.totalCount;
          this.list = res.data.data;
          this.list.map((item) => {
            item.imageTakeTimeStr = timestamp2DateAuto(
              item.imageTakeTime,
              "yyyy-MM-dd hh:mm:ss"
            );
          });
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  padding: 36px;
}
</style>
