<template>
  <div class="global">
    <div class="mainContainer">
      <div class="steps">
        <el-steps :active="stepActive" align-center direction="horizontal">
          <el-step
            :title="item.step.title"
            icon="iconfont iconrun-line"
            v-for="(item, index) in tableData"
            :key="index"
            @click.native="stepClick(index)"
          ></el-step>
        </el-steps>
      </div>

      <div id="step1">
        <el-table
          border
          stripe
          highlight-current-row
          :data="totalData"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            align="center"
            label="序号"
            width="100px"
            type="index"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.hasOwnProperty('process') &&
                  scope.row.process.length != 0
                "
                style="height: 300px"
              >
                <el-steps direction="vertical" :active="1">
                  <el-step
                    v-for="(item, index) in scope.row.process"
                    :key="index"
                  >
                    <template>
                      <div slot="title" class="stepTitle">
                         <div
                      :class="{
                        active: item.auditState == 1,
                        noActive: item.auditState == 2,
                      }"
                    >
                      {{ item.title }}
                    </div>
                        
                        <div style="display: flex; flex-direction: column">

                               <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>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
              
              <div v-else>{{ scope.row.index }}</div>  
            </template>
          </el-table-column>
          <el-table-column
            label="时间"
            prop="operationTime"
            align="center"
            width="300px"
          >
          
          </el-table-column>

          <el-table-column prop="title" label="工作项" align="center" />
          <el-table-column prop="option" label="选项" align="center">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.subData">
                <el-radio :label="0" :disabled="disabled">{{
                  scope.row.details.split(",")[0]
                }}</el-radio>
                <el-radio :label="1" :disabled="disabled">{{
                  scope.row.details.split(",")[1]
                }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
//时间格式的转化
import { getNowFormatDate } from "@/utils"
import { checkList } from "@/api/reservesManagement/mechanicalVentilation"
export default {
  name: "AddMeVentilation",

  data() {
    return {
      //人员字典数据
      perList: {},
      //流程id
      processId: null,
      //初始化点击的步骤
      step: "",
      //初始化步骤高亮显示到第几步
      stepActive: null,
      //表格数据
      totalData: [],
      tableData: [],
      //审批流程
      process: [],
      disabled: true,
    }
  },
  methods: {
    //查看接口
    getCheckList() {
      var processId = this.processId
      checkList(processId).then((res) => {
        console.log(res, ".......")
        if (res.code == 200) {
          var index = 1
          this.tableData = res.data.process
          this.tableData.forEach((item1) => {
            item1.list.forEach((item) => {
              item.index = index
              this.totalData.push(item)
              index++
            })
          })
          // console.log(this.totalData,"totalData.......")
          for (let i = 0; i < res.data.audit.length - 1; i++) {
            var ele = res.data.audit[i]
            this.process.push(ele)
            if (this.process[0].content == 0) {
              this.process[0].content = this.userInfo.uid
            } else {
              this.process[0].content = res.data.audit[0].content
            }
          }

          // this.totalData[1].process=this.process;
          this.totalData.splice(1,0,{details:"是，否"});
          this.$set(this.totalData[1], "process", this.process)
          console.log(this.totalData, "totalData.......")
        }
      })
    },
    //合并列或行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        if (columnIndex === 0) {
          return [1, 4]
        }
      }
    },
    
  },
  mounted() {
    this.processId = this.$route.query.processId
    console.log(this.processId, "//////")
    this.stepActive = parseInt(this.$route.query.ongoingStep)
    this.getCheckList()
    //获取人员字典数据
    this.perList = JSON.parse(localStorage.getItem("perList"))
  },
}
</script>
<style lang="scss">
.mainContainer {
  position: relative;
  .steps {
    height: 80px;
    margin: 10px 0;

    .iconfont {
      font-size: 55px;
    }
  }
  #step1,
  #step2,
  #step3,
  #step4,
  #process {
    display: block;
  }
  #process {
    margin-top: 20px;
    padding: 20px;
    background: rgb(235, 233, 233);
    .process_title {
      margin-bottom: 20px;
    }
    .stepTitle {
      display: flex;
      justify-content: space-between;
    }
  }
  .stepTitle {
    display: flex;
    justify-content: space-between;
  }
  .btns {
    text-align: right;
  }
  .active {
    color: #1890ff;
  }
  .noActive {
    color: red;
  }
}
</style>