<template>
  <div class="bbsl-common-page">
    <!--查询-->
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="水库名称">
              <el-select
                size="mini"
                v-model="queryParam.params.rscd"
                clearable
                placeholder="请选择水库名称"
              >
                <el-option
                  v-for="item in rscds"
                  :key="item.id"
                  :label="item.rsnm"
                  :value="item.rscd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="巡检日期">
              <el-date-picker
                @change="changeDate"
                v-model="scopeTime"
                style="width:230px"
                size="mini"
                value-format="yyyy-MM-dd"
                type="daterange"
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="巡检类别">
              <el-select
                size="mini"
                v-model="queryParam.params.intp"
                clearable
                placeholder="请选择巡检类别"
              >
                <el-option
                  v-for="item in intps"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="onClickSearch"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
              <el-button type="text" @click.stop="openMore"
                >更多
                <i
                  :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="bbsl-search-more" v-if="showMore">
          <el-row>
            <el-col :span="24">
              <el-form-item label="是否正常">
                <el-select
                  size="mini"
                  v-model="queryParam.params.isNormal"
                  clearable
                  placeholder="请选择是否正常"
                >
                  <el-option
                    v-for="item in isNormals"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <!--表单-->
    <div class="bbsl-table-content" ref="contentPanel">
      <div class="bbsl-btn-content" ref="btnPanel"></div>
      <el-table
        stripe
        size="mini"
        :height="tableMaxHeight"
        :style="{width: '100%'}"
        ref="multipleSelection"
        v-loading="loading"
        border
        :row-key="getRowKey"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :cell-style="{'text-align': 'center'}"
      >
        <el-table-column fixed label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column
          fixed
          sortable
          prop="rsnm"
          label="水库名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          fixed
          sortable
          prop="intp"
          label="巡检类别"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          fixed
          sortable
          prop="inre"
          label="是否正常"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span style="color: #09ef09" v-if="scope.row.inre === 1">正常</span>
            <span style="color: red" v-if="scope.row.inre === 2">异常</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed
          sortable
          prop="rz"
          label="水库水位"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          fixed
          sortable
          prop="inps"
          label="巡查人员"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          fixed
          sortable
          prop="insdt"
          label="巡检日期"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" min-width="160">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" @click="relationStation(scope.row)"
                >查看</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="paginationPanel"
        align="right"
        class="bbsl-pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParam.pageBean.page"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="queryParam.pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <dsmdoalog
      v-if="StshowFormDias"
      @closeStshowForm="closeStshowForm"
      :StshowFormDias="StshowFormDias"
      @refList="getDateList"
      :rowId="rowId"
      :nol="nol"
    ></dsmdoalog>
  </div>
</template>

<script>
import dsmInsInin from '@/api/resIns/dsmInsInin.js'
import dsmdoalog from './components/dsm-doalog.vue'
import {TableMixin} from '@/mixins/tableMixin'
export default {
  components: {
    dsmdoalog
  },
  mixins: [TableMixin],
  data() {
    return {
      //数据
      rowId: '',
      nol: '',
      StshowFormDias: false,
      scopeTime: '',
      queryParam: {
        params: {
          rscd: '', //水库名称
          startTime: null,
          endTime: null,
          intp: null, //巡检类别
          isNormal: null, //是否正常
          rz: null, //水库水位
          inps: null //负责人
        },
        pageBean: {
          pageSize: 20,
          page: 1
        }
      },
      intps: [
        {name: '日常巡视检查', value: '1'},
        {name: '年度巡视检查', value: '2'},
        {name: '特别巡视检查', value: '3'}
      ], //巡检类别数组
      isNormals: [
        {name: '正常', value: 1},
        {name: '异常', value: 2}
      ], //是否正常
      tableData: [], //数据
      rscds: [], //水库名称数组
      total: 0 //总数据
    }
  },
  created() {
    this.getDateList()
    //获取水库下拉
    dsmInsInin.getResName({}, res => {
      this.rscds = res.value
      console.log(this.rscds, 'this.rscds')
    })
  },
  methods: {
    relationStation(row) {
      this.row = row
      this.nol = this.row.isNormal
      this.rowId = this.row.id
      this.StshowFormDias = true
    },
    closeStshowForm() {
      this.StshowFormDias = false
      this.getDateList()
    },
    openMore() {
      this.showMore = !this.showMore
    },
    changeDate(val) {
      if (val) {
        this.queryParam.params.startTime = val[0]
        this.queryParam.params.endTime = val[1]
      } else {
        this.queryParam.params.startTime = ''
        this.queryParam.params.endTime = ''
      }
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      dsmInsInin.ListGet(this.queryParam, res => {
        if (res.state) {
          this.tableData = res.value.rows
          this.tableData.forEach(item => {
            this.intps.forEach(ii => {
              if (item['intp'] == ii.value) {
                item['intp'] = ii.name
              }
            })
            this.isNormals.forEach(ss => {
              console.log()
              if (item['isNormal'] == ss.value) {
                item['isNormal'] = ss.name
              }
            })
          })
          this.$set(this.tableData, this.tableData)
          // this.total = res.value.total
          this.loading = false
        } else {
          this.$message(res.message)
        }
      })
    },
    // // 点击查询
    onClickSearch() {
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery() {
      this.queryParam.params = {}
      this.scopeTime = ''
      this.onClickSearch()
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val
      this.getDateList()
    },
    // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    }
  }
}
</script>

<style lang="scss" scoped>
.bbsl-search-more {
  width: 250px !important;
}
</style>
