<template>
  <view>
    <view class="next-btn"  @tap="next">
      <view class="submit-btn"><text>流程审批</text></view>
    </view>
    <view class="two-btn" v-if="props.isAddOrSubSign">
      <view class="sign-btn"  @tap="openAddOrSubSign">
        <view class="text-list"><text>加签</text><text>减签</text></view>
      </view>
      <view class="submit-btn" @tap="next"><text>流程审批</text></view>
    </view>
  
    <!-- 流程审批 -->
    <custom-dialog  ref="dialogRef" title="流程审批" :hasCloseIcon="true" >
        <view class="approval-box">
          <uni-easyinput
            type="textarea"
            v-model="approvalData.approvedContent"
            placeholder="请输入审批意见"
          >
          </uni-easyinput>
        </view>
        <!-- 电子签章 -->
        <view class="stamp-box">
        <view class="select-box" v-if="props.hasStamp">
          <SelectStamp
            :stampId="stampInfo.stampId"
            @submit="changeStamp"
          ></SelectStamp>
        </view>
         <view class="input-box" v-if="props.hasStampPassword">
          <uni-easyinput
         
            v-model="stampInfo.password"
            placeholder="请填写电子签章密码"
          >
          </uni-easyinput>
         </view>
        </view>
        <!-- 按钮配置 -->
        <view class="btn-list">
          <view v-for="(item, index) in approvalData.buttonConfigs" :key="index">
            <view
              class="btn"
              :class="getBtnClass(item.approveType)"
              @tap="changeType(item)"
            >
              <text class="text">
                {{ item.buttonName }}
              </text>
            </view>
          </view>
        </view>
    </custom-dialog>

      <!-- 加签和减签-->
      <custom-dialog  ref="addOrSubSignRef" title="加签和减签" :hasCloseIcon="true" :hasFooterIcon="true">
        <view class="head-hr"></view>
      <SelectApproveUser
          :schemaId="props.schemaId"
          :taskId="props.taskId"
          @change="changeApproveUserData"
        />
      <template #footer>
        <custom-dialog-submit @tap="confirmApproveUserData"></custom-dialog-submit>
      </template>
    </custom-dialog>

    <!-- 驳回节点 -->
    <custom-dialog  ref="rejectRef" title="驳回节点" :hasCloseIcon="true" :hasFooterIcon="true">
      <view class="check-box"  v-if="rejectNodes.range.length>0">
        <view v-for="(item,index) in rejectNodes.range" :key="index" 
        class="check-item" @tap="changeRejectValue(item.activityId)">
          <view class="title">{{ item.activityName }}</view>
          <view class="checked" v-if="rejectNodes.value==item.activityId">
            <view class="icon"></view>
          </view>
          <view class="kong" v-else></view>
        </view>
        </view>
        <Empty v-else title="暂无数据"/>
      <template #footer>
        <custom-dialog-submit @tap="rejectRefSubmit"></custom-dialog-submit>
      </template>
    </custom-dialog>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import SelectApproveUser from "./nextNode/SelectApproveUser.vue"; // 加签减签
import SelectStamp from "./stamp/SelectStamp.vue"; // 选择签章
import { ApproveType, ApproveCode } from "@/common/enums/workflow.ts";
import { cloneDeep } from "@/utils/helper/utils.js";
import {postSetSign, getRejectNode } from "@/common/api/workflow/index";
import Empty from "@/components/layout/Empty.vue";
const props = defineProps({
  buttonConfigs: Array,
  isAddOrSubSign: Boolean,
  processId: String,
  taskId: String,
  schemaId: String,
  hasStamp: Boolean,
  hasStampPassword: Boolean,
	approvedContent:String
});
const emits = defineEmits(["submit"]);
const dialogRef = ref();
const rejectRef = ref();
const addOrSubSignRef = ref();
const signUsers = reactive({
  approvedUsers: [],
});
const stampInfo = reactive({
  stampId: "",
  password: "",
});

const rejectNodes = reactive({
  range: [],
  value: [],
});
let approvalData = reactive({
  isCountersign: false, //是否会签节点
  isAddOrSubSign: false, //是否加签减签
  buttonConfigs: [],
  approvedType: ApproveType.AGREE,
  approvedResult: ApproveCode.AGREE,
  approvedContent: "",
  rejectNodeActivityId: "",
  circulateConfigs: [],
});
onMounted(() => {
  if (props.buttonConfigs) {
    approvalData.buttonConfigs = cloneDeep(props.buttonConfigs);
  }
  if (props.isAddOrSubSign) {
    approvalData.isAddOrSubSign = props.isAddOrSubSign;
  }
  approvalData.approvedType = ApproveType.AGREE;
  approvalData.approvedContent = props.approvedContent||"";
  approvalData.rejectNodeActivityId = "";
  rejectNodes.range = [];
  approvalData.circulateConfigs = [];
});
function getBtnClass(approveType) {
  if (approveType === ApproveType.AGREE) {
    return "btn1";
  }
  if (approveType === ApproveType.DISAGREE) {
    return "btn2";
  }
  if (approveType === ApproveType.REJECT) {
    return "btn3";
  }
  return "btn4";
}
async function changeType(item) { 
  if (item.approveType === ApproveType.OTHER) {
    approvalData.approvedType = ApproveType.OTHER;
    approvalData.approvedResult = item.buttonCode;
    submit();
  } else {
    approvalData.approvedType = item.approveType;
    if (approvalData.approvedType == ApproveType.AGREE) {
      approvalData.approvedResult = ApproveCode.AGREE;
      submit();
    }else if(approvalData.approvedType==ApproveType.STAGING){
			approvalData.approvedResult=ApproveCode.STAGING
			submit()
		} else if (approvalData.approvedType == ApproveType.REJECT) {
      let res = await getRejectNode(props.processId, props.taskId);
      if (res && res.data) {
        rejectNodes.range = res.data;
      }
      approvalData.approvedResult = ApproveCode.REJECT;
      rejectRef.value.open();
    } else if (approvalData.approvedType == ApproveType.DISAGREE) {
      approvalData.approvedResult = ApproveCode.DISAGREE;
      submit();
    } else if (approvalData.approvedType == ApproveType.FINISH) {
      approvalData.approvedResult = ApproveCode.FINISH;
      submit();
    } else {
      approvalData.approvedResult = "";
    }
  }
}
function rejectRefSubmit() {
  if (rejectNodes.value.length > 0) {
    rejectRef.value.close();
    submit();
  }
}
async function next() {
  dialogRef.value.open();
}
function cancel() {
  dialogRef.value.close();
}
function changeRejectValue(val){
  rejectNodes.value=val;
  approvalData.rejectNodeActivityId = rejectNodes.value
}
function submit() {
  emits("submit", {
    approvalData: approvalData,
    stamp: {
      stampId: stampInfo.stampId,
      stampPassword: stampInfo.password,
    },
  });
  cancel();
}
function openAddOrSubSign() {
  addOrSubSignRef.value.open();
}
function closeAddOrSubSign() {
  addOrSubSignRef.value.close();
}
function changeStamp(stampId) {
  stampInfo.stampId = stampId;
}
// 加签加签 人员选择
function changeApproveUserData(data) {
  signUsers.approvedUsers = data;
}
// 加签加签 确认
async function confirmApproveUserData() {
  try {
      let res = await postSetSign(
        props.schemaId,
        props.taskId,
        signUsers.approvedUsers
      );
      if (res&&res.success) {
        closeAddOrSubSign();
      } else {
        uni.showToast({
          icon: "none",
          title: "加签或者减签失败",
        });
      }
  } catch (_error) {
    uni.showToast({
      icon: "none",
      title: "加签或者减签失败",
    });
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  padding: 0 28rpx;
  margin-bottom: 40rpx;
 
}
.head-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 38rpx 0;
  .title {
    font-size: 35rpx;
    font-weight: bold;
    color: #253954;
    line-height: 42rpx;
  }
  .close {
    transform: rotate(45deg);
    font-size: 48rpx;
  }
}
.approval-box {
  background: #FFFFFF;
  border-radius: 19rpx 19rpx 19rpx 19rpx;
  opacity: 1;
  border: 2rpx solid #F2F2F2;
  .uni-easyinput__placeholder-class {
    font-size: 27rpx;
    font-weight: 500;
    color: #bdc3d6;
    line-height: 32rpx;
  }
}
.stamp-box {
  margin: 28rpx 0;
  .select-box{
    margin-bottom: 28rpx;
    background: #ffffff;
  }
  .input-box{
    margin-bottom: 28rpx;
    background: #ffffff;
    border: none;
    border-radius: 19rpx 19rpx 19rpx 19rpx;
    .uni-easyinput__placeholder-class {
      font-size: 27rpx;
      font-weight: 500;
      color: #bdc3d6;
      line-height: 32rpx;
    }
  }
}
.btn-list {
  .btn {
    height: 96rpx;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    margin: 20rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
      font-size: 31rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .btn1 {
    background: #5e95ff;
  }
  .btn2 {
    background: #ef6969;
  }
  .btn3 {
    background: #f5a147;
  }
  .btn4 {
   background: #EBEFFF;
    .text {
      color: #253954;
    }
  }
}
.two-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 115rpx;
  background: #ffffff;
  .sign-btn {
    height: 77rpx;
    background: #f3f4f8;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    margin: 0 38rpx;
    .text-list {
      padding: 19rpx 105rpx;
      text {
        font-size: 27rpx;
        font-weight: bold;
        color: #b7baca;
        line-height: 32rpx;
      }
    }
  }
  .submit-btn {
    flex: 1;
    height: 77rpx;
    background: #5e95ff;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 38rpx;
    text {
      font-size: 27rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 32rpx;
    }
  }
}
.next-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 135rpx;
  background: #ffffff;
  padding: 0 38rpx;
  .submit-btn {
    flex: 1;
    height: 96rpx;
    background: #5e95ff;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text {
      font-size: 31rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
    }
  }
}

  .check-box {
    .check-item{
      height: 77rpx;
      background: #FFFFFF;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      margin: 19rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 23rpx;
      .title{
        font-size: 27rpx;
        font-weight: 500;
        color: #253954;
        line-height: 32rpx;
      }
      .kong{
        width: 27rpx;
        height: 27rpx;
        background: #FFFFFF;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        border: 2rpx solid #E7EBF2;
        border-radius: 50%;
      }
      .checked{
        width: 27rpx;
        height: 27rpx;
        background: #FFFFFF;
        opacity: 1;
        border: 2rpx solid #5E95FF;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon{
          width: 15rpx;
          height: 15rpx;
          background: #5E95FF;
          border-radius: 50%;
        }
      }
    }
  }
  .head-hr{
  border: 2rpx solid #E7EBF2;
  margin-bottom: 9rpx;
}
</style>
