<template>
  <div id="reset-steps">
    <el-steps direction="vertical" :active="active">
      <el-step
        :title="
          node.status == 'pending'
            ? node.approvers
            : node.approver != ''
            ? node.approver
            : '待设置'
        "
        v-for="(node, index) in nodeDetails && nodeDetails.itemList"
        :key="index"
        :class="{ 'is-red': node.isRed, 'is-agree': node.isAgree }"
      >
        <template slot="description">
          <div
            :class="{
              'flow-logo': true,
              'logo-empty': node.status == 'pending',
            }"
          >
            {{
              node.approver
                ? node.approver.substr(node.approver.length - 2, 2)
                : "无"
            }}
            <i class="el-icon-success" v-if="node.status == 'pass'"></i>
          </div>
          <span class="approver-status">{{ node.nodeName }}</span>
          <span class="approver-time" v-if="node.link == 'start'">{{
            $tools.formatDateTime(node.oxCtime)
          }}</span>
          <span class="approver-time" v-if="node.status != 'pending'">{{
            $tools.formatDateTime(node.oxLtime)
          }}</span>

          <span
            class="approver-select"
            v-if="
              nodeDetails &&
              nodeDetails.itemList &&
              index > 0 &&
              !!node.id &&
              node.status == 'pending' &&
              nodeDetails.itemList[index - 1].status == 'pass'
            "
          >
            <el-row style="align-items: center; display: flex">
              <el-col :span="4">
                <p class="form-label">审批状态</p>
              </el-col>
              <el-col :span="20">
                <el-radio-group
                  v-model="form.status"
                  @change="changeStatus"
                  style="display: flex; position: relative; top: 0px"
                >
                  <el-radio label="pass">通过</el-radio>
                  <el-radio style="float: true" label="refuse">拒绝</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p class="form-label">审批意见</p>
              </el-col>
              <el-col :span="20">
                <el-input
                  :rows="5"
                  type="textarea"
                  v-model="form.opinion"
                  @change="changeOpinion"
                ></el-input>
              </el-col>
            </el-row>
          </span>

          <span
            class="approver-select"
            v-if="
              nodeDetails &&
              nodeDetails.itemList &&
              ((!nodeDetails.currNodeId && index == 0) ||
                (!!nodeDetails.currNodeId &&
                  node.id == nodeDetails.currNodeId)) &&
              (index == 0 || node.approverId == uid) &&
              index < nodeDetails.itemList.length - 1
            "
          >
            <el-row>
              <el-col :span="4">
                <p class="form-label">下一步审批人</p>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="nodeDetails.itemList[index + 1].approverId"
                  value-key="approverId"
                  placeholder="请选择"
                  @change="setApprover($event, index + 1)"
                  clearable
                  :disabled="
                    nodeDetails.itemList[index + 1].status == 'pass' ||
                    nodeDetails.itemList[index + 1].status == 'refuse'
                  "
                >
                  <el-option
                    v-for="(item, idx) in nodeDetails.itemList[index + 1]
                      .approverList"
                    :key="idx"
                    :label="item.approver"
                    :value="item.approverId"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </span>
          <div
            class="flow-log-time"
            v-if="node.status != 'pending' && index != 0"
          >
            {{ node.opinion }}
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
export default {
  name: "steps-view",
  props: ["nodeDetails", "type"],
  data() {
    return {
      active: 0,
      isShow: false,
      uid: "",
      form: {
        status: "pass",
        opinion: "同意",
      },
      nextApprover: {
        approver: "",
        approverId: "",
      }, // 下一步审批人
    };
  },
  watch: {
    form: {
      immediate: true,
      handler: function (obj) {
        this.$emit("auditcallBack", obj);
      },
    },
    nodeDetails: {
      immediate: true,
      handler: function (obj) {
        if (obj && obj.itemList && obj.itemList.length > 0) {
          this.isShow = true;
          var count = obj.itemList.length;
          for (var i = count - 1; i >= 0; i--) {
            var el = obj.itemList[i];
            if (el.status != "pending") break;
            if (el.approverId) {
              //存在审批人
              if (
                obj.itemList[i - 1].status == "pass" && //上一步已通过
                i == count - 1
              ) {
                //最后一步
                this.$emit("setNextApprover", {
                  isEnd: true,
                });
              } else {
                this.setApprover(el.approverId, i);
              }
              break;
            }
          }

          obj.itemList.forEach((el, index) => {
            if (obj.currNodeName == el.nodeName) {
              this.active = index;
              if (el.status == "refuse" || el.status == "reject") {
                this.$emit("callBack", el.approverId);
                return (el.isRed = true);
              } else if (obj.status == "finish") {
                this.$emit("callBack", el.approverId);
                return (el.isAgree = true);
              } else {
                this.$emit("callBack", el.approverId);
                return (el.isRed = false);
              }
            }
          });

          if (obj.status == "pending") {
            return;
          } else if (obj.status == "finish") {
            if (this.active == obj.itemList.length - 1) {
              this.active += 1;
            }
          }
        }
      },
    },
  },
  mounted() {
    this.uid = sessionStorage.getItem("userId");
  },
  methods: {
    setApprover(event, index) {
      if (!this.nodeDetails || !this.nodeDetails.itemList) return;
      var info = this.nodeDetails.itemList[index];
      if (!info || !info.approverList) {
        this.$emit("setNextApprover", {
          isEnd: true,
        });
        return;
      }
      info.approverList.forEach((item) => {
        if (event == item.approverId) {
          info.approver = item.approver;
          this.nextApprover.approver = item.approver;
          this.nextApprover.approverId = item.approverId;
          this.nextApprover.approverOrgId = item.approverOrgId;
        }
      });
      if (!!this.nextApprover) {
        this.$emit("setNextApprover", this.nextApprover);
      }
    },
    changeStatus: function (val) {
      val == "pass"
        ? (this.form.opinion = "同意")
        : (this.form.opinion = "拒绝");
      this.$emit("auditcallBack", this.form);
    },
    changeOpinion: function () {
      this.$emit("auditcallBack", this.form);
    },
  },
};
</script>
<style lang="less">
#reset-steps {
  /deep/ .el-step__icon {
    display: none;
  }

  /deep/ .el-step__title {
    margin-top: 0;
    color: #333;
    font-size: 14px;
  }

  .form-label {
    padding-right: 10px;
    text-align: right;
  }

  .approver-time {
    position: absolute;
    top: 0;
    right: 0;
    color: #34c724;
  }

  .approver-status {
    position: absolute;
    left: 34px;
    top: 20px;
    color: #999;
    font-size: 12px;
  }

  .approver-select {
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
    line-height: 32px;

    /deep/ .el-radio {
      float: left;
      width: 80px;
    }
  }

  .flow-logo {
    color: #fff;
    background: #4f90ff;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    line-height: 40px;
    text-align: center;
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: -13px;
    z-index: 1;
    border: 2px solid #fff;

    i {
      position: absolute;
      right: -2px;
      bottom: -2px;
      color: #34c724;
      background: #fff;
      border-radius: 20px;
      font-size: 12px;
    }
  }

  .logo-empty {
    background: #999;
  }

  .is-red {
    // .el-step__description.is-process{
    //   color: #f56c6c !important;
    // }
    // .el-step__title.is-process{
    //   color: #f56c6c !important;

    // }
    // .el-step__head.is-process{
    //   color: #f56c6c !important;
    //   border-color: #f56c6c !important;
    // }
    // .el-step__head.is-process .el-step__icon{
    //   background: #f56c6c !important;
    // }
    // .el-step__head.is-process .el-step__icon-inner{
    //   color: #f56c6c !important;
    // }
    // .el-step__line{
    //   background-color:#f56c6c !important;
    // }

    .el-step__title.is-finish {
      color: #34c724 !important;
    }

    .el-step__description.is-finish {
      color: #f56c6c !important;
    }

    .el-step__head.is-finish .el-step__icon {
      background: #f56c6c !important;
      border-color: #f56c6c !important;
    }

    .el-step__head.is-finish .el-step__icon-inner {
      background: #f56c6c !important;
      color: #f56c6c !important;
    }

    .el-step__head.is-finish .el-step__line {
      background-color: #f56c6c !important;
    }
  }
}

#reset-steps .is-red:last-child:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 100px;
  background-color: #f56c6c;
  position: absolute;
  left: 8px;
  top: 18px;
}

#reset-steps .el-step__head.is-finish {
  color: #bdc7d8;
  border-color: #4f90ff;
}

#reset-steps .is-agree:last-child:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 100px;
  background-color: #bdc7d8;
  position: absolute;
  left: 8px;
  top: 18px;
}

#reset-steps .flow-log-time {
  margin-left: 0;
  background: #f5f6f7;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}

#reset-steps .el-step__description {
  margin-left: 0;
  padding-right: 0;
  min-height: 40px;
}
</style>
