<template>
  <div class="process-approval">
    <ai-card title="流程设置">
      <template #right>
        <span class="iconfont iconAdd rightBtn"></span>
        <span class="rightBtn" style="margin-left: 8px;" @click="addAppStep(1)">添加审批步骤</span>
      </template>
      <template #content>
        <el-steps direction="vertical">
          <el-step v-for="(item,index) in form.processNodeList" :key="index">
            <div slot="title" class="step_title">
              <p>{{ item.nodeName }}（{{ dict.getLabel('nodeType', item.nodeType) }}）</p>
              <div class="peraoBtn">
                <el-button type="text" :disabled="index==0" class="iconfont iconMoveUp"
                           @click="form.processNodeList[index] = form.processNodeList.splice(index-1, 1,form.processNodeList[index])[0]">
                  上移
                </el-button>
                <el-button type="text" :disabled="index==(form.processNodeList.length-1)" class="iconfont iconMoveDown"
                           @click="form.processNodeList[index] = form.processNodeList.splice(index+1, 1,form.processNodeList[index])[0]">
                  下移
                </el-button>
                <el-button type="text" class="iconfont iconEdit" @click="addAppStep(2,item,index)">
                  编辑
                </el-button>
                <el-button type="text" class="iconfont iconDelete" @click="deleteInfo(index)">
                  删除
                </el-button>
              </div>
            </div>
            <div slot="description" class="step_desc">
              <div class="desc_style">
                <p>
                  选人方式：<span>{{ dict.getLabel('candidateApproverType', item.candidateApproverType) }}</span>
                </p>
              </div>
              <div class="desc_person" v-if="item.scopeCandidates==1||item.candidateApproverType==1">
                <p class="desc_p">指定人员：</p>
                <div class="desc_div">
                  <el-tag type="info" closable v-for="(value,i) in item.candidateList" :key="i"
                          @close="item.candidateList.splice(i,1)">
                    {{ value.name }}
                  </el-tag>
                  <el-button v-if="item.candidateList.length>0" type="text" @click="item.candidateList=[]">清空
                  </el-button>
                </div>
              </div>
              <ai-wechat-selecter slot="append" :instance="instance" :props="{id:'wxUserId',label:'name'}"
                                    v-model="item.candidateList" v-if="item.candidateApproverType==1">
                <el-button size="mini" type="primary">选择指定人员</el-button>
              </ai-wechat-selecter>
            </div>
          </el-step>
        </el-steps>
      </template>
    </ai-card>
    <el-dialog :title="titleType" class="editStyle" :visible.sync="isAddStep" width="575px" height="380px"
               :close-on-click-modal="false">
      <el-form :model="nodeObj" label-width="120px" ref="addForm" :rules="addRules">
        <el-form-item label="审批步骤名称：" prop="nodeName">
          <el-input size="small" v-model="nodeObj.nodeName" placeholder="如：部门主管审批（限10个字）" :maxLength="10"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="审批方式：" prop="nodeType">
          <el-radio-group v-model="nodeObj.nodeType">
            <section style="position: relative;top: 10px;margin-bottom: 30px;">
              <el-radio :label="2">或签
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="click"
                    content="或签是指该节点指定多名负责人审批时，其中任何一人完成审批即可。适合一个事项只需要某个岗位任何一人审批即可的业务场景。">
                  <el-button class="el-icon-warning" slot="reference"
                             style="padding:0;height:14px;border:0;"></el-button>
                </el-popover>
              </el-radio>
              <el-radio :label="3">抄送
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="click"
                    content="抄送是指一个事项审批完成后，抄送给需要知晓的单位或个人，被抄送的对象可以查阅该事项内容，无需审批。适合一个事项无需对方审批，但审批完成后需要通知对方知晓的业务场景。">
                  <el-button class="el-icon-warning" slot="reference"
                             style="padding:0;height:14px;border:0;"></el-button>
                </el-popover>
              </el-radio>
            </section>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center;">
        <el-button style="width: 92px;" size="small" @click="isAddStep = false">取消</el-button>
        <el-button style="width: 92px;" size="small" type="primary" @click="saveAddProgress('addForm')">确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "processApproval",
  inject: ['config'],
  props: {
    instance: Function,
    dict: Object,
    approvalSteps: String
  },
  data() {
    return {
      form: {
        processNodeList: [],
      },
      areaId: "",
      isAddStep: false,
      isSelectImg: false,
      isSelectUnit: false,
      isSelectPerson: false,
      nodeObj: {
        candidateApproverType: '1',
        candidateList: [],
        nodeIndex: '',
        nodeName: '',
        nodeType: '',
        scopeCandidates: ''
      },
      indexType: '',
      titleType: '',
      bomIndex: '',
    }
  },
  computed: {
    addRules() {
      return {
        nodeName: [
          {required: true, message: '请输入审批节点名称', trigger: 'change'}
        ],
        nodeType: [
          {required: true, message: '请选择审批方式', trigger: 'change'}
        ],
        candidateApproverType: [
          {required: true, message: '请选择选人方式', trigger: 'change'}
        ],
        scopeCandidates: [
          {required: true, message: '请选择选人范围', trigger: 'change'}
        ]
      }
    },
    ...mapState(['user'])
  },
  methods: {
    handleProcessApproval() {
      return Promise.resolve(this.form)
    },
    /**
     *删除
     * */
    deleteInfo(index) {
      this.$confirm("是否删除").then(() => {
        this.form.processNodeList.splice(index, 1)
      })
    },
    /**
     * 添加流程
     * @param index
     * @param item
     * @param i
     */
    addAppStep(index, item, i) {
      this.isAddStep = true;
      this.bomIndex = i;
      this.indexType = index;
      if (index == 2) {
        this.titleType = '编辑审批步骤';
        item.nodeType = item.nodeType * 1;
        item.candidateApproverType = item.candidateApproverType * 1;
        item.scopeCandidates = item.scopeCandidates * 1;
        this.nodeObj = JSON.parse(JSON.stringify(item));
      } else {
        this.titleType = '添加审批步骤';
        if (this.form.processNodeList.length > 0) {
          this.init();
        }
      }
    },
    // 确定添加审批步骤
    saveAddProgress(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.nodeObj.scopeCandidates == 0) this.nodeObj.candidateList = [];
          if (this.indexType == 1) {
            this.form.processNodeList.push(JSON.parse(JSON.stringify(this.nodeObj)));
          } else {
            this.form.processNodeList.splice(this.bomIndex, 1, JSON.parse(JSON.stringify(this.nodeObj)));
          }
          this.$refs[formName].resetFields();
          this.isAddStep = false;
        }
      })
    },
    init() {
      this.nodeObj = {
        candidateApproverType: '1',
        candidateList: [],
        nodeIndex: '',
        nodeName: '',
        nodeType: '',
        scopeCandidates: ''
      };
      this.$refs['addForm'].resetFields();
    },
  },
  created() {
    this.areaId = this.user.info.areaId.substring(0, 6) + '000000'
    if (this.config.detailObj?.id) {

      Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
    }
  }
}
</script>

<style lang="scss" scoped>
.process-approval {
  .rightBtn {
    font-size: 14px;
    color: #5088FF;
    user-select: none;
    cursor: pointer;
  }

  .step_title {
    font-weight: 700;
    height: 32px;
    line-height: 32px;
    display: flex;
    padding: 0 8px;
    justify-content: space-between;
    color: #333;

    p {
      font-size: 14px;
    }

    div {
      span {
        margin-left: 16px;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }

  .step_desc {
    font-size: 14px;
    padding: 8px;
    color: #999;
    margin-bottom: 20px;

    .desc_style {
      display: flex;
      margin-bottom: 16px;

      p {
        margin-right: 80px;
      }

      span {
        color: #333;
      }
    }

    .desc_person {
      display: flex;
      margin-bottom: 12px;

      .desc_p {
        position: relative;
        top: 4px;
        width: 70px;
      }

      .desc_div {
        flex: 1;
      }

      .el-tag {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
  }

  .add_btn {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 64px;
    line-height: 64px;
    background: #F3F6F9;
    width: 100%;
    text-align: center;

    .el-button {
      width: 92px;
    }
  }

  .select_per {
    width: 640px;
    height: 400px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;

    .add_item {
      width: 310px;
      height: 400px;
      background: rgba(252, 252, 252, 1);
      border-radius: 2px;
      border: 1px solid rgba(208, 212, 220, 1);
      position: relative;
      overflow: auto;

      .add_top {
        width: 100%;
        height: 40px;
        background: rgba(245, 245, 245, 1);
        border-bottom: 1px solid rgba(208, 212, 220, 1);
        padding: 0 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tree_list {
        width: 100%;
        height: 360px;
        overflow: auto;
      }

      .add_buttom {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        width: 310px;
        height: 32px;
        line-height: 32px;
        z-index: 10000;
        background: rgba(245, 246, 247, 1);
        color: rgba(51, 51, 51, 1);
        box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .add_tag {
        width: 310px;
        height: 360px;
        overflow-y: auto;

        .el-tag {
          margin: 8px;
        }
      }
    }
  }

  .icon {
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 16px;
    margin-bottom: 16px;
    cursor: pointer;
  }

  .icon_style {
    display: flex;
    flex-wrap: wrap;

    .icon:hover {
      border-color: #5088FF;
    }

    .icon_color {
      border-color: #5088FF;
    }
  }

  .dia_per_content {
    width: 640px;
    height: 400px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;

    .add_item {
      width: 310px;
      height: 400px;
      background: rgba(252, 252, 252, 1);
      border-radius: 2px;
      border: 1px solid rgba(208, 212, 220, 1);
      position: relative;
      overflow: auto;

      .add_top {
        width: 100%;
        height: 40px;
        background: rgba(245, 245, 245, 1);
        border-bottom: 1px solid rgba(208, 212, 220, 1);
        padding: 0 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tree_list {
        width: 100%;
        height: 360px;
        overflow: auto;
      }

      .add_buttom {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        width: 310px;
        height: 32px;
        line-height: 32px;
        z-index: 10000;
        background: rgba(245, 246, 247, 1);
        color: rgba(51, 51, 51, 1);
        box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .add_tag {
        width: 310px;
        height: 360px;
        overflow-y: auto;

        .el-tag {
          margin: 8px;
        }
      }
    }
  }

  .peraoBtn {
    .el-button--text {
      color: #333;
      font-size: 12px;
    }
  }

  ::v-deep .el-step__icon.is-text {
    border: 2px solid #2266FF;
    background: #2266FF;
    color: #FFFFFF;
  }

  ::v-deep .el-step__line {
    background-color: #D0D4DC;
  }
}
</style>
