<template>
  <div id="main">
    <div class="contain">
      <div class="top">
        <div class="header">机械通风申请</div>
        <div class="middle">
          <div class="middle_flex">
            <div>仓号:</div>
            <div>{{ hourseDic[houseId] }}</div>
          </div>
          <div class="middle_flex">
            <div>申请人:</div>
            <div>{{ perList[applyPeople] }}</div>
          </div>
          <div class="middle_flex">
            <div>申请部门:</div>
            <div>{{ departmentName }}</div>
          </div>
          <div class="middle_flex">
            <div>公司:</div>
            <div>{{ deportDic[depotId] }}</div>
          </div>
        </div>
      </div>
      <div class="table_middle">
        <div>
          1.制定通风方案:
          <span v-if="this.subData == 1">否</span>
          <span v-if="this.subData == 0">是</span>
        </div>
      </div>
      <div id="process">
        <div class="process_title">机械通风流程</div>
        <div>
          <el-steps direction="vertical" :active="processActive">
            <el-step v-for="(item, index) in process" :key="index">
              <template>
                <div slot="title" class="stepTitle">
                  <div
                    :class="{
                      active: item.auditState == 1,
                      noActive: item.auditState == 2,
                    }"
                  >
                    {{ item.title }}
                  </div>

                  <div style="width: 200px">
                    <div
                      :class="{
                        active: item.auditState == 1,
                        noActive: item.auditState == 2,
                      }"
                    >
                      {{ perList[item.content] }}
                    </div>
                    <div v-if="item.auditState == 0">待审批</div>
                    <div v-if="item.auditState == 1">审批通过</div>
                    <div v-if="item.auditState == 2">审批不通过</div>
                    <div>{{ item.auditTime }}</div>

                    <div style="width: 200px; display: flex">
                      <el-button
                        type="danger"
                        size="mini"
                        v-if="
                          item.content == userInfo.uid && item.auditState == 0
                        "
                        @click="noAgree(item)"
                        >审批不通过</el-button
                      >
                      <el-button
                        type="success"
                        size="mini"
                        v-if="
                          item.content == userInfo.uid && item.auditState == 0
                        "
                        @click="agree(item)"
                        >审批通过</el-button
                      >
                    </div>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { checkList } from "@/api/reservesManagement/mechanicalVentilation"
export default {
  name: "Details",
  data() {
    return {
      //仓房编码
      houseId: null,
      //申请人
      applyPeople: null,
      //部门
      departmentName: null,
      //公司
      depotId: null,
      //人员字典数据
      perList: {},
      //库字典数据
      deportDic: {},
      //仓房字典数据
      hourseDic: {},
      //部门字典数据
      departDic: {},
      // 流程id
      processId: null,
      //流程高亮显示
      processActive: 1,
      //审批流程
      process: [],
      //用户字典列表
      perList: {},
      //
      tableData: [],
      //头部数据
      headData: [],
      //方案状态
      subData: null,
    }
  },
  methods: {
    //流程查看
    getCheckList() {
      var processId = this.processId
      checkList(processId).then((res) => {
        console.log(res.data, "......")
        if (res.code == 200) {
          //头部数据
          // this.headData=res.data.data[0];
          console.log(this.headData, "headData")
          this.tableData = res.data.process
          this.subData = res.data.process[0].list[0].subData
          //审批流程数据
          for (let i = 0; i < res.data.audit.length - 1; i++) {
            var ele = res.data.audit[i]
            this.process.push(ele)
            // this.process[0].content = this.userInfo.uid
          }
          this.stepActive = parseInt(res.data.data[0].ongoingStep)
        }
      })
    },
  },
  mounted() {
    //库字典数据
    this.deportDic = JSON.parse(localStorage.getItem("deportDic"))
    console.log(this.deportDic, " this.deportDic...")

    //部门字典数据
    this.departDic = JSON.parse(localStorage.getItem("departDic"))
    console.log(this.departDic, " this.departDic...")
    //获取当前缓存的用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    console.log(this.userInfo, "this.userInfo.....")
    //仓房字典数据
    this.hourseDic = JSON.parse(localStorage.getItem("hourseDic"))
    console.log(this.hourseDic, " this.hourseDic...")
    //人员字典
    this.perList = JSON.parse(localStorage.getItem("perList"))
    console.log(this.perList, "this.perList...")
    this.processId = this.$route.query.processId
    console.log(this.$route.query.processId, "this.$route.query.processId")
    this.getCheckList()
    this.depotId = this.$route.query.depotId
    this.houseId = this.$route.query.houseId
    this.applyPeople = this.$route.query.applyPeople
    this.departmentName = this.$route.query.departmentName
    console.log(this.depotId, "////")
  },
}
</script>
<style lang="scss">
#main {
  height: 100%;
  .contain {
    .top {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      .header {
        margin-bottom: 20px;
        color: #037d41;
      }
      .middle {
        margin-bottom: 20px;

        display: flex;
        justify-content: space-between;

        .middle_flex {
          display: flex;
          margin-bottom: 10px;
        }
      }
    }

    #process {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      .process_title {
        color: #037d41;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .stepTitle {
        display: flex;
        justify-content: space-between;
      }
    }
    .table_middle {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-top: 10px;
    }
  }

  .active {
    color: #1890ff;
  }
  .noActive {
    color: red;
  }
}
</style>