<template>
  <div class="global">
    <div class="mainContainer">
      <div class="top">机械通风</div>
      <div class="container">
        <div class="header">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="检测时间">
              <el-date-picker
                v-model="query.startTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="-------">
              <el-date-picker
                v-model="query.endTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="search()">查询</el-button>
              <el-button type="success" plain @click="clear()">清空</el-button>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="success" @click="add(1)">新增</el-button>
          </div>
        </div>

        <el-table
          border
          stripe
          :data="tfData"
          highlight-current-row
         
          style="width: 100%"
        >
          <el-table-column
          :index="indexMethod"
            type="index"
            align="center"
            label="序号"
            width="50px"
          >
          </el-table-column>

          <el-table-column prop="type" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="operationTime" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="auditState" label="状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.auditState == 0">待审批</div>
              <div v-if="scope.row.auditState == 1">审批通过</div>
              <div v-if="scope.row.auditState == 2">审批不通过</div>
              <div v-if="scope.row.auditState == 3">审批完成进行中</div>
              <div v-if="scope.row.auditState == 4">已完成</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="operation"
            label="操作"
            align="center"
            width="300px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success" plain
                @click="handleCheck(3, scope.$index, scope.row)"
                >查看</el-button
              >

              <el-button
                size="mini"
                @click="handleEdit(2, scope.$index, scope.row)"
                v-if="scope.row.auditState !=0&&scope.row.auditState !=4&&scope.row.auditState !=1&&scope.row.auditState !=2"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger" plain
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
       <el-pagination
          @current-change="handleCurrentChange"
          :page-count="5"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
//引入分页
import Pagination from "@/components/Pagination"
import { getList ,deleteTfList} from "@/api/reservesManagement/mechanicalVentilation"
export default {
  components: { Pagination },
  data() {
    return {
     //存储用户信息
      userInfo:{},
      //仓房编号
      houseId:1,
      //库编号
      depotId:1,
      //类型
      type:"tf",
      value: "",
      query: {
        startTime: "",
        endTime: "",
      },
      //分页
   
    
       pagination: {
        //当前页数
        curPage: 1,
        //每页显示的条数
        pageSize: 10,
        //总条数
        total: 0
      },
      // 列表数据
      tfData: [],
    }
  },
  methods: {
  

    //新增
    add(type) {
      this.$router.push({ 
        path: "/mechanicalVentilation/steps",
        query:{
          type:type
        }
         })
    },
    //查看
    handleCheck(type, index, row) {
      console.log(row, "row")

      if (row.auditState ==4) {
        console.log(4444444)
        this.$router.push({
          path: "/mechanicalVentilation/completed",
           query: {
            type: type,
            processId:row.processId,
            ongoingStep:row.ongoingStep
            
          },
        })
      } else{
        console.log(row.auditState,"row.status....")
        this.$router.push({
          path: "/mechanicalVentilation/steps",
          query: {
            type: type,
            processId:row.processId,
            ongoingStep:row.ongoingStep
          },
        })
      }
    },

    //修改
    handleEdit(type, index, row) {
      console.log(row,"修改row...")
      this.$router.push({
        path: "/mechanicalVentilation/steps",
        query: {
          type: type,
         processId:row.processId,
         ongoingStep:row.ongoingStep
         
        },
      })
    },


    //删除接口
      deleteList() {
      console.log('shancuu')
      this.$confirm('确定删除该项记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(11111)
      
           var id=this.id
          
          console.log(id, '删除id')
          deleteTfList(id)
            .then((res) => {
              if (res.code == 200) {
              this.tfList()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
             
                  
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        })
    },
    //删除
    handleDelete(index,row) {
      console.log(row,"row....")
        this.id = row.id;
        this.deleteList();
    },

    //获取列表
    tfList() {
      var condition={
        houseId:this.houseId,
        depotId:this.depotId,
        type:this.type,
        startTime:this.query.startTime,
        endTime:this.query.endTime
      };
      console.log(condition,"condition.....")
      condition=JSON.stringify(condition)
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition:condition
      }
      getList(data)
        .then((res) => {
          if (res.code == 200) {
            // this.tfData = res.data.list;
             this.tfData = res.data.records;
            this.pagination.pageSize = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //清空
    clear() {
      this.query = {}
    },

    //查询
    search(){
      this.tfList();
    },
    //当前页发生变化时
     handleCurrentChange(val) {
       console.log(val,"val...")
     this.pagination.curPage = val;
       this.tfList();
    },

      /* ----- 格式化表格序号 -----*/
    indexMethod(index) {
      return (
        (this.pagination.curPage - 1) * this.pagination.pageSize+ index + 1
      );
    },
  },
  mounted() {
    //获取当前缓存的用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    console.log(this.userInfo, "this.userInfo.....")
    this.tfList();
 
    
  },
 
}
</script>
<style lang="scss" scoped>
.top {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.container {
  padding: 10px;
  .header {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .el-pagination{
    text-align:right;
    margin-top:20px;
    }
}
</style>