<template>
  <div class="spectrum-list">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="任务单号">
        <el-input
          clearable
          v-model="searchParam.inspectNo"
          size="small"
          placeholder="请输入任务单号"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="区划">
        <driverAreaSelect v-model="searchParam.driverArea"></driverAreaSelect>
      </el-form-item>
      <el-form-item label="河道名称">
        <el-input
          clearable
          v-model="searchParam.driverName"
          size="small"
          placeholder="请输入河道名称"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="巡检时间">
        <el-date-picker
          style="width: 220px"
          placeholder="巡检时间"
          clearable
          size="small"
          value-format="yyyy-MM-dd"
          v-model="searchParam.inspectTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="tableLoading"
          icon="el-icon-search"
          @click="search"
          size="small"
          type="primary"
        >搜索
        </el-button>
        <el-button
          icon="el-icon-refresh-right"
          @click="initSearchParam();search()"
          type="primary"
          size="small"
          style="background-color: #fff; border: 1px solid #ccc ; color: #666"
        >清空
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      stripe
      ref="table"
      :height="tableHeight"
      v-loading="tableLoading"
      :data="dataList"
      border
      size="medium"
      row-key="id"
    >
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
      <el-table-column
        min-width="130"
        show-overflow-tooltip
        prop="inspectNo"
        label="任务单号"
        align="center"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="areaName" label="区划" align="center"/>
      <el-table-column show-overflow-tooltip prop="driverName" label="河湖名称" align="center"/>
      <el-table-column
        min-width="120"
        show-overflow-tooltip
        prop="inspectTime"
        label="巡检日期"
        align="center"
      />
      <el-table-column show-overflow-tooltip prop="tpName" label="总磷" align="center" min-width="80">
        <template slot-scope="{row}">
          <a href="javascript:void(0);" @click="downloadImg(row.tpPic)">{{row.tpName}}</a>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="tnName" label="总氮" align="center" min-width="80">
        <template slot-scope="{row}">
          <a href="javascript:void(0);" @click="downloadImg(row.tnPic)">{{row.tnName}}</a>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="nh3nName" label="氨氮" align="center" min-width="80">
        <template slot-scope="{row}">
          <a href="javascript:void(0);" @click="downloadImg(row.nh3nPic)">{{row.nh3nName}}</a>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="doName" label="溶解氧" align="center" min-width="80">
        <template slot-scope="{row}">
          <a href="javascript:void(0);" @click="downloadImg(row.doPic)">{{row.doName}}</a>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="codName" label="化学需氧量" align="center" min-width="110">
        <template slot-scope="{row}">
          <a href="javascript:void(0);" @click="downloadImg(row.codPic)">{{row.codName}}</a>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="tubName" label="浊度" align="center" min-width="80">
        <template slot-scope="{row}">
          <a href="javascript:void(0);" @click="downloadImg(row.tubPic)">{{row.tubName}}</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-current">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        background
        layout="total, prev, pager, next, jumper"
        style="display: inline-block;"
        :total="count"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import api from "@/api/water/spectrum";
  import driverAreaSelect from "@/components/driverAreaSelect";
  import {mapGetters} from "vuex";

  export default {
    name: "spectrum-list",
    data() {
      return {
        dataChild: {},
        visible: false,
        dataList: [],
        currentPage: 1,
        count: 0,
        pageSize: parseInt((document.body.clientHeight - 250 - 43) / 43),
        tableHeight: document.body.clientHeight - 250,
        tableLoading: false,
        searchParam: {
          inspectNo: "",
          driverName: "",
          driverArea: "",
          inspectTime: ""
        }
      };
    },
    computed: {
      ...mapGetters(["btnRule", "isAdmin"])
    },
    components: {driverAreaSelect},
    created() {
    },
    mounted() {
      this.tableLoading = true;
      this.getAllList();
    },
    methods: {
      downloadImg(url){
        location.href=url
      },
      uploadItem(row) {
        this.dataChild = row;
        this.visible = true;
      },
      indexMethod(index) {
        return index + 1 + (this.currentPage - 1) * this.pageSize;
      },
      handleDelete(row) {
        this.$confirm("确定要删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.tableLoading = true;
          let param = {
            id: row.id,
            codPic: '',
            nh3nPic: '',
            tpPic: '',
            tnPic: '',
            doPic: '',
            tubPic: '',
            leftLatitude: "",
            leftLongitude: "",
            rightLatitude: "",
            rightLongitude: "",
            codName: '',
            nh3nName: '',
            tpName: '',
            tnName: '',
            doName: '',
            tubName: '',
          };
          api
            .edit(param)
            .then(res => {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.getAllList();
            })
            .catch(e => {
              this.tableLoading = false;
            });
        });
      },
      initSearchParam() {
        this.searchParam = {
          inspectNo: "",
          driverName: "",
          driverArea: "",
          inspectTime: ""
        };
      },
      search() {
        this.currentPage = 1;
        this.tableLoading = true;
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList();
      },
      handleCurrentChange(val) {
        this.tableLoading = true;
        this.currentPage = val;
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList();
      },
      getAllList() {
        let searchParam = JSON.parse(JSON.stringify(this.searchParam));
        if (searchParam.inspectTime && searchParam.inspectTime.length > 0) {
          searchParam.inspectTime = searchParam.inspectTime[0]+'~'+ searchParam.inspectTime[1];
        }else{
          searchParam.inspectTime =''
        }
        searchParam.page = this.currentPage;
        searchParam.pageSize = this.pageSize;
        api
          .getAllList(searchParam)
          .then(res => {
            this.dataList = res.data.records ? res.data.records : [];
            this.count = res.data.total;
            this.tableLoading = false;
          })
          .catch(e => {
            this.dataList = [];
            this.tableLoading = false;
          });
      }
    }
  };
</script>

<style lang="less">
  .spectrum-list {
    height: fit-content;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    padding: 15px;
  }
</style>
