<template>
  <div id="main">
    <div class="container" v-if="isShow">
      <div
        class="top"
        v-for="(item, index) in pendingList"
        :key="index"
        @click="goDetails(item)"
      >
        <div class="header">机械通风申请</div>
        <div class="middle">
          <div class="middle_flex">
            <div>仓号:</div>
            <div>{{ hourseDic[item.houseId] }}</div>
          </div>
          <div class="middle_flex">
            <div>申请人:</div>
            <div>{{ perList[item.applyPeople]}}</div>
          </div>
          <div class="middle_flex">
            <div>申请部门:</div>
            <div>{{ item.departmentName }}</div>
          </div>
          <div class="middle_flex">
            <div>公司:</div>
            <div>{{ deportDic[item.depotId] }}</div>
          </div>
        </div>
        <div class="div_border"></div>
        <div class="bottom_flex">
          <div>{{ item.applyTime }}</div>

          <el-button
            type="success"
            plain
            size="mini"
            @click="goDetails(item)"
            v-if="item.auditState == 0"
            >去审批</el-button
          >
          <el-button
            type="success"
            plain
            size="mini"
            @click="goDetails(item)"
            v-else-if="item.auditState == 1"
            >审批通过</el-button
          >
          <el-button
            type="success"
            plain
            size="mini"
            @click="goDetails(item)"
            v-else-if="item.auditState == 2"
            >审批不通过</el-button
          >
          <el-button
            type="success"
            plain
            size="mini"
            @click="goDetails(item)"
            v-else-if="item.auditState == 3"
            >审批完成进行中</el-button
          >
          <el-button
            type="success"
            plain
            size="mini"
            @click="goDetails(item)"
            v-else
            >已完成</el-button
          >
        </div>
      </div>
      <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"
        v-if="pendingCount!=0"
      ></el-pagination>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>
<script>
import { pending } from "@/api/daiBan/index"
export default {
  name: "Pending",
  data() {
   
    return {
       //待处理数量
      pendingCount:0,
      //人员字典数据
      perList: {},
      //库字典数据
      deportDic: {},
      //仓房字典数据
      hourseDic: {},
      //部门字典数据
      departDic: {},
      isShow: true,
      //待处理列表数据
      pendingList: [],
      //分页

      pagination: {
        //当前页数
        curPage: 1,
        //每页显示的条数
        pageSize: 10,
        //总条数
        total: 0,
      },
    }
  },
  mounted() {
    console.log(this.$route)
    if (this.$route.name == "PenDetails") {
      this.isShow = false
    } else {
      this.isShow = true
    }
    //获取当前缓存的登录用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    console.log(this.userInfo, "this.userInfo.....")
     //人员字典数据
    this.perList = JSON.parse(localStorage.getItem("perList"))
    console.log(this.perList, " this.perList...")

    //库字典数据
    this.deportDic = JSON.parse(localStorage.getItem("deportDic"))
    console.log(this.deportDic, " this.deportDic...")
    //仓房字典数据
    this.hourseDic = JSON.parse(localStorage.getItem("hourseDic"))
    console.log(this.hourseDic, " this.hourseDic...")

    //部门字典数据
    this.departDic = JSON.parse(localStorage.getItem("departDic"))
    console.log(this.departDic, " this.departDic...")

    this.getPending()
  },
  methods: {
    goDetails(item) {
      this.$router.push({
        path: "/daiban/pending/penDetails",
        query: {
          processId: item.processId,
          auditState: item.auditState,
          id: item.id,
          ongoingStep: item.ongoingStep,
           houseId: item.houseId,
          applyPeople: item.applyPeople,
          departmentName: item.departmentName,
          depotId: item.depotId,
        },
      })
    },

    //列表数据
    getPending() {
      var condition = {
        userId: this.userInfo.uid,
      }
      console.log(condition, "condition.....")
      condition = JSON.stringify(condition)
      
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: condition,
      }
      
      pending(data).then((res) => {
         
        if (res.code == 200) {
          console.log(res)
          this.pendingList = res.data.records
         
          this.pendingCount=res.data.total;
          console.log( this.pendingCount)
         
          localStorage.setItem("pendingCount", JSON.stringify(this.pendingCount));
          // this.bus.$emit("pendingCount",pendingCount);
          this.bus.$emit("pendingCount");

          this.pagination.total = res.data.total;
        }
      })
    },

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

  },
}
</script>
<style lang="scss">
#main {
  height: 100%;
  .container {
    width: 100%;

    .top {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 20px;
      .header {
        height: 20%;
        margin-bottom: 20px;
      }
      .middle {
        margin-bottom: 20px;
        width: 80%;
        display: flex;

        justify-content: space-between;
        .middle_flex {
          display: flex;
        }
      }
      .div_border {
        border-top: 1px solid #ccc;
        margin-bottom: 20px;
      }

      .bottom_flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }
  }
}
</style>