<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-person-select :chooseUserList="item.candidateList" v-if="item.candidateApproverType==1" :instance="instance" customRightText url="/user/page"
                                headerTitle="人员列表" dialogTitle="选择" :isMultiple="true" @selectPerson="e => changeCharge(e, index)">
                <template v-slot:option="{ item }">
                  <span class="iconfont iconProlife">{{ item.name }}</span>
                  <span>{{ item.phone }}</span>
                </template>
              </ai-person-select>
            </div>
          </el-step>
        </el-steps>
      </template>
    </ai-card>
    <ai-dialog :title="titleType" class="editStyle" :visible.sync="isAddStep" width="575px" height="380px"
               :close-on-click-modal="false" @onConfirm="saveAddProgress">
      <el-form size="small" :model="nodeObj" label-width="100px" ref="addForm" :rules="addRules">
        <el-form-item label="审批步骤" prop="nodeName">
          <el-input v-model="nodeObj.nodeName" placeholder="如：部门主管审批（限10个字）" :maxLength="10" clearable/>
        </el-form-item>
        <el-form-item label="审批方式" prop="nodeType">
          <el-radio-group v-model="nodeObj.nodeType" @change="nodeObj.areaFilter='',nodeObj.annexEnable='',nodeObj.pictureEnable=''">
            <el-radio v-for="op in approvalWays" :key="op.value" :label="op.value">
              <span v-text="op.label"/>
              <el-popover placement="top-start" width="200" trigger="click" :content="op.tips">
                <el-button type="text" slot="reference" icon="el-icon-warning" class="color-666"/>
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="nodeObj.nodeType==2">
          <el-form-item label="数据权限" prop="areaFilter">
            <el-radio-group v-model="nodeObj.areaFilter">
              <el-radio v-for="op in dict.getDict('processNodeAreaFilter')" :key="op.dictValue" :label="op.dictValue">
                <span v-text="op.dictName"/>
                <el-popover placement="top-start" width="200" trigger="click" :content="dict.getLabel('processNodeAreaFilterTips',op.dictValue)">
                  <el-button type="text" slot="reference" icon="el-icon-warning" class="color-666"/>
                </el-popover>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="附件图片">
            <el-checkbox v-model="nodeObj.annexEnable" label="1">附件</el-checkbox>
            <el-checkbox v-model="nodeObj.pictureEnable" label="1">图片</el-checkbox>
          </el-form-item>
        </template>
      </el-form>
    </ai-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: [],
      },
      approvalWays: [
        {value: 2, label: '或签', tips: '或签是指该节点指定多名负责人审批时，其中任何一人完成审批即可。适合一个事项只需要某个岗位任何一人审批即可的业务场景。'},
        {value: 3, label: '抄送', tips: '抄送是指一个事项审批完成后，抄送给需要知晓的单位或个人，被抄送的对象可以查阅该事项内容，无需审批。适合一个事项无需对方审批，但审批完成后需要通知对方知晓的业务场景。'},
      ],
      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'}],
        areaFilter: [{required: true, message: '请选择数据权限'}],
        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)
      }).catch(() => 0)
    },
    changeCharge(e, i) {
      this.$set(this.form.processNodeList[i], 'candidateList', e.map(v => {
        return {
          ...v,
          candidate: v.id
        }
      }))
    },
    /**
     * 添加流程
     */
    addAppStep(index, item, i) {
      this.isAddStep = true;
      this.bomIndex = i;
      this.indexType = index;
      if (index == 2) {
        this.titleType = '编辑审批步骤';
        item.nodeType = item.nodeType * 1;
        item.areaFilter = item.areaFilter * 1;
        item.candidateApproverType = item.candidateApproverType * 1;
        item.scopeCandidates = item.scopeCandidates * 1;
        this.nodeObj = this.$copy(item)
      } else {
        this.titleType = '添加审批步骤';
        if (this.form.processNodeList.length > 0) {
          this.init();
        }
      }
    },
    // 确定添加审批步骤
    saveAddProgress() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.nodeObj.scopeCandidates == 0) this.nodeObj.candidateList = [];
          if (this.indexType == 1) {
            this.form.processNodeList.push(this.$copy(this.nodeObj));
          } else {
            this.form.processNodeList.splice(this.bomIndex, 1, this.$copy(this.nodeObj));
          }
          this.$refs.addForm.resetFields();
          this.isAddStep = false;
        }
      })
    },
    init() {
      this.nodeObj = {
        candidateApproverType: '1',
        candidateList: [],
        nodeIndex: '',
        nodeName: '',
        nodeType: '',
        scopeCandidates: '1'
      };
      this.$refs.addForm?.resetFields();
    },
  },
  created() {
    this.dict.load("processNodeAreaFilter", 'processNodeAreaFilterTips')
    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;
    }
  }

  .color-666 {
    color: #666;
  }

  .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: 14px;
    }
  }

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

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