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

      <div id="step1">
        <el-table
          border
          stripe
          highlight-current-row
          :data="tableData"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            label="序号"
            prop="step"
            align="center"
            width="100px"
          >
            <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"
                        style="display: flex; justify-content: space-between"
                      >
                        <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.step }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="operationTime" label="时间" align="center">
          </el-table-column>

          <el-table-column prop="title" label="工作项" align="center" />
          <el-table-column prop="details" label="选项" align="center">
            <template slot-scope="scope">
              <el-radio-group
                v-model="scope.row.subData"
                @change="radioChange(scope.row)"
              >
                <el-radio :label="0" :disabled="pageType === 3 || disabled">{{
                  scope.row.details.split(",")[0]
                }}</el-radio>
                <el-radio :label="1" :disabled="pageType === 3 || disabled">{{
                  scope.row.details.split(",")[1]
                }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>

        <div class="btns">
          <el-button
            type="success"
            plain
            @click="goBack()"
            v-if="this.btnType != 3"
            >返回</el-button
          >
          <el-button type="success" @click="save()" v-if="this.btnType != 3">{{
            this.button
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//时间格式的转化
import { getNowFormatDate } from "@/utils"
import {
  addList,
  getAddList,
  getProcessList,
  userList,
  checkList,
  updateList,
} from "@/api/reservesManagement/mechanicalVentilation"

import { pSelect } from "@/api/system/userManagement/approver"
export default {
  name: "AddMeVentilation",

  data() {
    return {
      //初始化空对象
      obj: {},
      pageType: 0,
      btnType: null,
      //流程id
      processId: "",
      //当前登录人信息
      userInfo: {},
      //仓房id
      houseId: 1,
      //仓库id
      depotId: 1,
      perList: {},
      //人员列表
      approverSelect: [],
      //初始化当前登录人
      loginPeople: "",
      index: null,
      //状态  3=进行中
      auditState: 3,
      //当前流程索引值
      ongongstep: null,
      //申请人
      applyPeople: null,

      //审批人id
      //toPeople:null,
      //提交人
      fromPeople: null,
      //主流程id
      mainId: null,
      //初始化流程高亮显示
      processActive: 0,
      //初始化radio是否禁用
      disabled: false,
      //初始化按钮的内容为空
      button: "",
      //初始化表格数据
      tableData: [],
      //初始化点击的步骤
      step: 0,
      //初始化步骤高亮显示到第几步
      stepActive: 0,
      //步骤1
      totalData: [],

      //审批流程
      process: [],
      //流程选项

      subList: [],
    }
  },
  methods: {
    //合并列或行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.step != 1) {
        return
      }
      if (rowIndex === 1) {
        if (columnIndex === 0) {
          return [1, 4]
        }
      }
    },
    //人员字典数据列表
    // getPersonnelList() {
    //   var params = {
    //     depotId: this.depotId,
    //   }
    //   pSelect(params)
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.approverSelect = res.data
    //         this.approverSelect.forEach((item) => {
    //           console.log(item, "item....")
    //           this.perList[item.personnelId] = item.personnelName
    //         })
    //         console.log(this.perList, "perList...")
    //         this.processList()
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err)
    //     })
    // },

    // 用户字典列表
    getUserList() {
      var params = {
        depotId: this.depotId,
      }
      userList(params).then((res) => {
        if (res.code == 200) {
          console.log(res, "用户列表。。。。。")
          this.perList = res.data
        }
      })
    },
    //用户字典数据列表
    // getRoleSelect() {
    //   var params = {
    //     depotId: 1,
    //     roleIds: "2,3",
    //   }
    //   console.log(params, "params...")
    //   roleList(params)
    //     .then((res) => {
    //       console.log(res.data, "下拉选")
    //       if (res.code == 200) {
    //         var pros = JSON.parse(JSON.stringify(this.process));
    //         for (const key in res.data) {
    //           var arr = res.data[key];
    //           for (let index = 0; index < arr.length; index++) {
    //             var ele1 = arr[index];
    //              console.log(ele1,"ele1.......")
    //             for (let j = 0; j < pros.length; j++) {
    //               var ele2 = pros[j];
    //               if(ele2.content == ele1.uId)
    //               {
    //                 pros[j].uName = ele1.uName;
    //               }
    //             }

    //           }
    //         }
    //         this.process = pros;
    //         console.log(this.process, "?????");

    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err)
    //     })
    // },

    //获取流程数据
    processList() {
      var type = "tf"
      var userId = 1
      var depotId = this.depotId
      getProcessList(type, userId, depotId).then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < res.data.length - 1; i++) {
            var ele = res.data[i]
            this.process.push(ele)
          }
          // this.process[0].uName = this.userInfo.uname;
          console.log(this.process, "this.process...")

          this.process[0].content = this.userInfo.uid

          //申请人
          this.applyPeople = this.process[0].content
          //审批人
          // this.toPeople=this.process[1].content;
          //提交人
          this.fromPeople = this.process[0].content
        }
      })
    },

    //初始化应该显示第几步的表格、
    tableShow() {
      if (this.stepActive == 0) {
        this.tableData = this.totalData[0].list
        // this.subList = this.tableData
        //主流程ID
        this.mainId = this.totalData[0].step.id
      } else if (this.stepActive == 1) {
        this.tableData = this.totalData[1].list
      } else if (this.stepActive == 2) {
        this.tableData = this.totalData[2].list
      } else if (this.stepActive == 3) {
        this.tableData = this.totalData[3].list
      }
    },
    //radio选项改变是
    radioChange(row) {
      console.log(getNowFormatDate())
      row.operationTime = getNowFormatDate()
      this.changeBtn(this.tableData)
    },

    changeBtn(arr) {
      console.log(arr, "arrr")
      //完成标记
      var finish = true
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].process == null && arr[i].subData == null) {
          finish = false
          break
        }
      }

      if (finish) {
        if (this.stepActive == 0) {
          this.button = "保存并提交"
        } else {
          this.button = "保存"
        }
      } else {
        this.button = "暂存"
      }
    },
    //点击每步时
    stepClick(index) {
      this.step = index + 1
      if (this.step > this.stepActive + 1) {
        return
      }

      if (this.step == 1) {
        this.tableData = this.totalData[0].list

        // this.tableData.splice(1, 0, { details: "是，否" })
        // this.$set(this.tableData[1], "process", this.process)

        this.button = "保存并提交"
        this.disabled = true
      } else if (this.step == 2) {
        this.tableData = this.totalData[1].list
        this.button = "暂存"
        this.disabled = false
      } else if (this.step == 3) {
        this.tableData = this.totalData[2].list
        this.button = "暂存"
        this.disabled = false
      } else if (this.step == 4) {
        this.tableData = this.totalData[3].list
        this.button = "暂存"
        this.disabled = false
      }
      console.log(this.tableData, "?????????????????????????")
    },

    //点击返回按钮
    goBack() {
      this.$router.push({ path: "/reservesManagement/mechanicalVentilation" })
    },
    //新增时初始化页面
    processFirst() {
      var type = "tf"
      getAddList(type)
        .then((res) => {
          if (res.code == 200) {
            this.totalData = res.data

            this.totalData[0].list.splice(1, 0, {
              details: "是，否",
              process: this.process,
            })

            // this.$set(this.totalData[0].list, "process", this.process)
            this.main_id = this.totalData[0].step.id
            console.log(this.totalData, "this.totalData..")
            this.tableShow()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //流程新增
    tfAdd() {
      var data = {
        //流程类型
        type: "tf",
        //主流程id
        mainId: this.mainId,
        //主流程索引
        ongoingStep: this.stepActive,

        subList: this.subList,
        //仓房id
        houseId: this.houseId,
        //库id
        depotId: this.depotId,
        //发起人
        fromPeople: this.fromPeople,
        //申请人
        applyPeople: this.applyPeople,
        //审批人
        toPeople: this.toPeople,
        //申请时间
        applyTime: getNowFormatDate(),
      }
      console.log(data, "新增数据。。。")
      addList(data)
        .then((res) => {
          console.log(res.data)
          if (res.code == 200) {
            this.$router.push({
              path: "/reservesManagement/mechanicalVentilation",
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //点击保存并提交按钮时
    save() {
      this.tableData.forEach((ele) => {
        var obj = {}
        console.log(ele)
        obj.subData = ele.subData
        obj.subId = ele.id
        obj.mainId = ele.zid
        obj.operationTime = ele.operationTime
        if (obj.subData != null) {
          this.subList.push(obj)
        }
      })
      console.log(this.subList, "??????")

      if (this.button == "保存并提交") {
        console.log(this.totalData, "......")
        if (this.totalData[0].list[0].subData == null) {
          this.$message("请先选择选项")
          return
        }

        this.tfAdd()
      } else {
        //this.getUpdateList()
        if (this.button == "暂存") {
          this.auditState = 3
          this.ongoingStep = this.stepActive
          this.getUpdateList()
        } else if (this.button == "保存") {
          console.log("保存。。")

          if (this.stepActive < this.tableData.length - 1) {
            this.auditState = 3
            this.stepActive = this.stepActive + 1
          } else {
            this.auditState = 4
            this.stepActive = this.stepActive + 1
          }

          this.getUpdateList()
        }
      }
    },

    //查看接口
    getCheckList() {
      var processId = this.processId
      checkList(processId).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.process
          this.totalData = this.tableData

          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.tableData = res.data.process[this.stepActive].list
          this.totalData[0].list.splice(1, 0, {
            details: "是，否",
            process: this.process,
          })

          console.log(this.tableData, "tableData.......??????")
        }
      })
    },

    //每步新增/修改
    getUpdateList() {
      var data = {
        processId: this.processId,
        type: "tf",
        auditState: this.auditState,
        ongoingStep: this.stepActive,
        subList: this.subList,
      }
      updateList(data).then((res) => {
        if (res.code == 200) {
          this.$router.push({
            path: "/reservesManagement/mechanicalVentilation",
          })
        }
      })
    },
  },

  mounted() {
    console.log(this.$route.query, "route...")
    this.pageType = this.$route.query.type
    this.step = this.stepActive + 1
    console.log(this.stepActive, "stepActive.....")

    this.getUserList()
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    console.log(this.userInfo, "this.userInfo.....")

    if (this.$route.query.type == 1) {
      this.disabled = false
      this.processFirst()
      this.processList()
    } else if (this.$route.query.type == 2) {
      this.disabled = false
      this.stepActive = parseInt(this.$route.query.ongoingStep)
      console.log(this.stepActive, "修改this.stepActive....")
      this.processId = this.$route.query.processId

      this.step = this.stepActive + 1

      this.getCheckList()
    } else if (this.$route.query.type == 3) {
      this.disabled = true
      console.log(this.$route.query.processId, "this.$route.query....")
      //返回按钮
      this.btnType = this.$route.query.type
      this.processId = this.$route.query.processId
      //高亮显示
      this.stepActive = parseInt(this.$route.query.ongoingStep)
      this.step = this.stepActive + 1
      console.log(this.processId, "this.processId...")
      this.getCheckList()
    }

    if (this.stepActive == 0) {
      this.button = "保存并提交"
    } else {
      this.button = "暂存"
    }
  },
}
</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;
    }
  }
  .btns {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
  .active {
    color: #1890ff;
  }
  .noActive {
    color: red;
  }
}
</style>