<!--
@ 作者: 秦东
@ 时间: 2025-05-26 14:59:22
@ 备注: 新版抄送节点
-->
<script lang="ts" setup>
import $func from "@/utils/workflow/index";
import { setTypes, selectModes, selectRanges } from "@/utils/workflow/const";
import { useStore } from "@/store/workflow/index";
import { matrixInfo } from "@/api/matrixapi/type";

let props = defineProps({
  isFormFlow: {
    type: Boolean,
    default: true,
  },
  directormaxlevel: {
    type: Number,
    default: 4,
  },
});
const isExecutor = ref(false);
let ccSelfSelectFlag = ref([]);
let copyerConfig = ref({});
let store = useStore();
let { setCopyerConfig, setCopyer } = store;
let copyerDrawer = computed(() => store.copyerDrawer);
let copyerConfig1 = computed(() => store.copyerConfig1);
let checkedList = ref<any[]>([]); //选中得指定成员过度用
let visible = computed({
  get() {
    return copyerDrawer.value;
  },
  set() {
    closeDrawer();
  },
});
const matrixFieldList = ref<matrixInfo>();
const nodeSendSetUp = ref("first");
watch(copyerConfig1, (val) => {
  if (val.settype == 0) {
    copyerConfig.value.settype = 1;
  }
  copyerConfig.value = val.value;
  ccSelfSelectFlag.value =
    copyerConfig.value.ccSelfSelectFlag == 0 ? [] : [copyerConfig.value.ccSelfSelectFlag];
});
onMounted(() => {
  console.log("预加载数据建军节--------》", copyerConfig1.value);
  if (copyerConfig1.settype == 0) {
    copyerConfig.value.settype = 1;
  }
});
//监听审批人设置选项
watch(
  () => copyerConfig.value.settype,
  (val: any) => {
    console.log("监听审批人设置选项", copyerConfig.value);
    switch (val) {
      case 10:
        let sendOrg = {
          id: 313,
          idstr: "313",
          level: 4,
          all: 1,
        };
        govthree(sendOrg).then(({ data }) => {
          // console.log("监听审批人设置选项",data)
          orgList.value = data;
          nextTick(() => {
            setOrgTree(copyerConfig.value.orgList);
          });
        });
        break;
      case 0:
        copyerConfig.value.settype = 1;
        break;
      default:
        break;
    }
  },
  {
    deep: true,
  }
);
/**
@ 作者: 秦东
@ 时间: 2025-05-26 15:23:01
@ 功能: 写入数据
*/
const saveCopyer = () => {};
//关闭抽屉
const closeDrawer = () => {
  setCopyer(false);
};
/**
@ 作者: 秦东
@ 时间: 2025-05-26 16:23:35
@ 功能: 属性选择
*/
const changeType = (val: any) => {
  copyerConfig.value.nodeUserList = [];
  copyerConfig.value.examineMode = 1;
  copyerConfig.value.noHanderAction = 2;
  console.log("属性选择--->", val);
  switch (val) {
    case 2:
      copyerConfig.value.directorLevel = 1; //审批终点  最高层主管数
      break;
    case 7:
      copyerConfig.value.examineEndDirectorLevel = 1; //审批终点 第n层主管
      break;
    case 9:
      matrixFieldList.value = copyerConfig.value.matrix; //矩阵信息
      break;
    default:
  }
};
//判断审批设置是否显示
const isShowRatify = (id: number) => {
  if (id == 8) {
    return props.isFormFlow;
  } else if (id == 4) {
    return false;
  } else {
    return true;
  }
};
/**
@ 作者: 秦东
@ 时间: 2025-05-27 14:19:31
@ 功能: 添加指定成员
*/
let approverVisible = ref(false);
const addApprover = () => {
  approverVisible.value = true;
  checkedList.value = copyerConfig.value.nodeUserList;
};
/**
@ 作者: 秦东
@ 时间: 2025-05-27 15:25:07
@ 功能: 更新指定成员数据
*/
const sureApprover = (data: any) => {
  copyerConfig.value.nodeUserList = data;
  approverVisible.value = false;
};
</script>
<template>
  <el-drawer
    v-model="visible"
    :append-to-body="true"
    title="抄送人设置"
    class="set_promoter"
    :show-close="false"
    :size="550"
    :before-close="saveCopyer"
    >{{ props }}
    <div class="demo-drawer__content">
      <div class="drawer_content drawer_content">
        {{ copyerConfig }}
        <el-tabs v-model="nodeSendSetUp" class="demo-tabs">
          <el-tab-pane name="first">
            <template #label>
              <span class="wordKeyCss">属性设置</span>
            </template>
            <div class="info_box">
              <div class="approver_content">
                <el-radio-group
                  v-model="copyerConfig.settype"
                  class="clear"
                  @change="changeType"
                >
                  <template v-for="{ value, label } in setTypes" :key="value">
                    <el-radio
                      v-if="isShowRatify(value)"
                      :label="value"
                      style="width: auto"
                      >{{ label }}</el-radio
                    >
                  </template>
                </el-radio-group>
              </div>

              <!--指定成员-->
              <el-divider v-if="copyerConfig.settype == 1" content-position="left"
                >指定成员</el-divider
              >

              <div v-if="copyerConfig.settype == 1" class="approver_manager">
                <el-button type="primary" @click="addApprover">添加/修改成员</el-button>
                <p class="selected_list">
                  <el-tag
                    v-for="(item, index) in copyerConfig.nodeUserList"
                    :key="index"
                    closable
                    type="info"
                    effect="plain"
                    class="tag_us"
                    @close="$func.removeEle(copyerConfig.nodeUserList, item, 'targetId')"
                    >{{ item.name }}</el-tag
                  >
                  <el-tag
                    v-if="copyerConfig.nodeUserList.length != 0"
                    type="danger"
                    effect="dark"
                    @click="copyerConfig.nodeUserList = []"
                    >清除</el-tag
                  >
                </p>
              </div>

              <!--主管-->
              <el-divider v-if="copyerConfig.settype == 2" content-position="left"
                >主管</el-divider
              >
              <div v-if="copyerConfig.settype == 2" class="approver_manager">
                <p>
                  <el-row :gutter="10">
                    <el-col v-if="isExecutor" :span="6">
                      <select v-model="copyerConfig.attribute" style="width: 100%">
                        <option value="1">发起人</option>
                        <option value="2">执行人</option>
                      </select>
                    </el-col>
                    <el-col :span="18">
                      <select v-model="copyerConfig.directorLevel">
                        <option
                          v-for="item in props.directormaxlevel"
                          :key="item"
                          :value="item"
                        >
                          {{ item == 1 ? "直接" : "第" + item + "级" }}主管
                        </option>
                      </select>
                    </el-col>
                  </el-row>
                </p>
                <p class="tip">找不到主管时，由上级主管代审批</p>
              </div>

              <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
                <el-checkbox :label="1">允许发起人自选抄送人</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-tab-pane>
          <el-tab-pane name="helpInstructions">
            <template #label>
              <span class="wordKeyCss">帮助说明</span>
            </template>
            <div class="info_box">
              <QuillEditor v-model="copyerConfig.helpTips" height="400px" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCopyer">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </div>

    <!--选择成员-->
    <employees-dialog
      v-model:visible="approverVisible"
      :data="checkedList"
      @change="sureApprover"
    />
  </el-drawer>
</template>
<style lang="scss" scoped>
.approver_some .el-radio-group {
  display: block;
}
.approver_manager .el-radio-group {
  display: block;
}

.approver_some .el-radio {
  display: block;
}
.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    .el-radio {
      width: auto;
    }
  }
  .approver_manager,
  .approver_self_select,
  .approver_some,
  .approver_self {
    border-top: 0px solid #f2f2f2;
  }
  .approver_self_select,
  .approver_content {
    .el-button {
      margin-bottom: 20px;
    }
  }
  .approver_content,
  .approver_some,
  .approver_self_select {
    .el-radio-group {
      display: unset;
    }
    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
  }
  .approver_manager p {
    line-height: 32px;
  }
  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }
  .approver_self {
    padding: 28px 20px;
  }
  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 20px 20px;
  }
  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }
  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
}
.selected_list {
  margin: 0;
  line-height: 0;
  .tag_us {
    margin-right: 10px;
  }
  span {
    margin-top: 10px;
  }
  a {
    margin-top: 15px;
  }
}
.info_box {
  padding: 0 20px;
}
.wordKeyCss {
  padding: 0 20px;
}
</style>
