<template>
  <div>
    <!-- 顶部时间选择下拉选项 -->
    <div class="grain-layout">
      <el-row :gutter="20">
        <el-col :span="11">
          <div class="grid-content bg-purple">
            <div class="block">
              <!-- <span class="demonstration"
                >起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span
              > -->
              <span class="demonstration">检测时间：</span>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00', '08:00:00']"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="7"
          ><div class="grid-content bg-purple">
            <div class="top_select">
              <span class="demonstration"> 检查类型: </span>
              <el-select v-model="check_person" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <div class="btns">
              <el-button @click="clear">清空</el-button>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table border stripe :data="data2" highlight-current-row>
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50px"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column prop="checkTime" label="记录时间" align="center" />
        <el-table-column prop="checkPerson" label="检查类型" align="center" />
        <el-table-column
          prop="anomalousStatus"
          label="有无异常"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.anomalousStatus == "1" ? "有" : "无" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="anomalousStatus" label="状态" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.recordStatus == "0" ||
                scope.row.recordStatus == null ||
                scope.row.recordStatus == ""
                  ? "进行中"
                  : "已完成"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="checkList" label="异常项" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.waterAbnormal == "1" ? "水分检测异常" : "" }}
              {{ scope.row.grainAbnormal == "1" ? "粮情异常" : "" }}
              {{ scope.row.pestAbnormal == "1" ? "虫害异常" : "" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="230px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleCheck(1, scope.$index, scope.row)"
              >查看</el-button
            >
            <!--@click="add(scope.$index, scope.row)"
                 v-if="scope.row.uid <= 2" -->
            <el-button
              size="mini"
              @click="handleEdit(3, scope.$index, scope.row)"
              v-if="true"
              >修改</el-button
            >
            <el-button
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          class="right"
          :current-page.sync="listQuery.page"
          :page-size="listQuery.limit"
          :page-sizes="[10, 20, 30, 40]"
          :total="total"
          @size-change="sizeChange"
          @current-change="pageChange"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
// import Pagination from "@/components/Pagination"
import {
  getAllPages,
  queryGrainInfo,
  checkGrainInfo,
  deleteGrainInfo,
  editGrainInfo
} from "@/api/grainCheck/index"
export default {
  // components: { Pagination },
  name: "AllGrain",
  data() {
    return {
      activeName: "AllGrain",
      // 全部粮情检查记录数据
      data2: [],
      // select 选项数据
      options: [
        {
          value: "选项1",
          label: "保管员每周检查粮情"
        },
        {
          value: "选项2",
          label: "科长每两周检查粮情"
        },
        {
          value: "选项3",
          label: "分管副总每月检查粮情"
        },
        {
          value: "选项4",
          label: "总经理每季检查粮情"
        },
        {
          value: "选项5",
          label: "请选择"
        }
      ],
      check_person: "",
      value2: "",
      // 分页
      total: 30,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      allGrainData: {}
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.activeName = this.$route.name
  },
  methods: {
    // 获取数据
    getList() {
      let data = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      getAllPages(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            console.log(res, "res.data.records")
            this.data2 = res.data.records
            this.loading = false
            this.listQuery.limit = res.data.size
            this.total = res.data.total
            console.log(this.listQuery, "分页信息")
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 查询
    handleQuery() {
      let condition = {
        check_person: this.check_person,
        // check_person: "科长每两周检查粮情",
        check_start_time: this.value2[0],
        check_end_time: this.value2[1]
      }
      // let conditions = JSON.stringify(condition)

      let data3 = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit,
        condition: JSON.stringify(condition)
      }
      queryGrainInfo(data3)
        .then(res => {
          this.data2 = res.data.records
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 个数切换
    sizeChange(v) {
      this.listQuery.limit = v
      this.getList()
    },
    //页数切换
    pageChange(v) {
      this.listQuery.page = v
      console.log(this.listQuery, "分页")
      this.getList()
    },
     //切换分页序号递增
    indexMethod(index) {
      let curpage = this.listQuery.page //单前页码
      let limitpage = this.listQuery.limit //每页条数
      return index + 1 + (curpage - 1) * limitpage
    },
    // 删除
    handleDelete(a, b) {
      console.log(b.id)
      // this.allGrainData.splice(a, 1)

      this.$confirm("确定删除该项记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let id = b.id
        deleteGrainInfo(id)
          .then(res => {
            console.log(res)
            this.$message({
              message: "恭喜你，删除成功了！",
              type: "success"
            })
            this.getList()
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    // 修改
    handleEdit(type, index, row) {
      // console.log(row, "row")
      this.$router.push({
        path: "/grainCheck/addNewGrain",
        query: { type: type, pid: row.id, data: row }
      })
    },
    // 查看
    handleCheck(type, index, row) {
      this.$router.push({
        path: "/grainCheck/addNewGrain",
        query: { type: type, pid: row.id, data: row }
      })
    },
    //清空
    clear() {
      this.value2 = ""
      this.check_person = ""
    },
    handleClick(tab, event) {
      // console.log(tab, event)
      this.$router.push(tab.name)
    },
    // 状态改成图标
    formatterColumn(row, column) {
      switch (row.recordStatus) {
        case "0":
          return "有异常"
          break
        case "1":
          return "无异常"
          break
      }
    },

    // 查看权限
    add(a, b) {
      this.$router.push("/grainCheck/addNewGrain")
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-table {
  margin-top: 15px;
}
.demonstration {
  font-size: 15px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
</style>
