<template>
  <el-form label-position="top" label-width="90px">
    <el-form-item label="⚙ 选择审批对象" prop="text" class="user-type">
      <el-radio-group v-model="nodeProps.assignedType">
        <el-radio v-for="item in approvalTypes" :label="item.type" :key="item.type">{{ item.name }}</el-radio>
      </el-radio-group>

      <!--      <div v-else>-->
      <!--        <span class="item-desc">发起人自己作为审批人进行审批</span>-->
      <!--      </div>-->
    </el-form-item>
    <el-form-item style="margin-top: -18px">
      <div v-if="nodeProps.assignedType === 'ASSIGN_USER'">
        <el-button size="mini" icon="Plus" type="primary" @click="showSysRolePicker" round>
          选择人员
        </el-button>
        <user-picker :check-matrix="true" title="请选择人员" :multiple="false" ref="sysRolePicker"
                     v-model:value="assignedUser" @ok="selectedUser"/>
        <!--        <ellipsis :row="3" :user-info="assignedUser"/>-->
        <role-items v-model="assignedUser"/>
      </div>
      <div v-else-if="nodeProps.assignedType === 'SELF_SELECT'">
        <el-radio-group size="mini" v-model="nodeProps.selfSelect.multiple">
          <el-radio-button :label="false">自选一个人</el-radio-button>
          <el-radio-button :label="true">自选多个人</el-radio-button>
        </el-radio-group>
      </div>
      <div v-else-if="nodeProps.assignedType === 'LEADER_TOP'">
        <el-divider/>
        <el-form-item label="审批终点" prop="text" class="approve-end">
          <el-radio-group v-model="nodeProps.leaderTop.endCondition">
            <el-radio label="TOP">直到最上层主管</el-radio>
            <el-radio label="LEAVE">不超过发起人的</el-radio>
          </el-radio-group>
          <div class="approve-end-leave" v-if="nodeProps.leaderTop.endCondition === 'LEAVE'">
            <span>第 </span>
            <el-input-number :min="1" :max="20" :step="1" size="mini" v-model="nodeProps.leaderTop.level"/>
            <span> 级主管</span>
          </div>
        </el-form-item>
      </div>
      <div v-else-if="nodeProps.assignedType === 'LEADER'">
        <el-divider/>
        <el-form-item label="指定主管" prop="text">
          <span>发起人的第 </span>
          <el-input-number :min="1" :max="20" :step="1" size="mini"
                           v-model="nodeProps.leader.level"></el-input-number>
          <span> 级主管</span>
          <div style="color: #409EFF; font-size: small;">直接主管为 第 1 级主管</div>
        </el-form-item>
      </div>
      <div v-else-if="nodeProps.assignedType === 'ROLE'">
        <el-button size="mini" icon="Plus" type="primary" @click="showRolePicker" round>
          选择系统角色
        </el-button>
        <role-picker title="请选择人员" :multiple="false" ref="rolePicker" :v-model="roleList" @ok="selectedRole"/>
        <role-items v-model="roleList"/>
      </div>
      <div v-else-if="nodeProps.assignedType === 'FORM_USER'">
        <el-form-item label="选择表单联系人项" prop="text" class="approve-end">
          <el-select style="width: 80%;" size="small" v-model="nodeProps.formUser"
                     placeholder="请选择包含联系人的表单项"
                     filterable clearable>
            <el-option v-for="(op,i) in forms" :label="op.title" :value="op.id" :key="i"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form-item>
    <!--    <el-divider></el-divider>-->
    <!--    <el-form-item label="审批人为空时" prop="text" class="line-mode">-->
    <!--      <el-radio-group v-model="nodeProps.nobody.handler">-->
    <!--        <el-radio label="TO_PASS">自动通过</el-radio>-->
    <!--        <el-radio label="TO_REFUSE">自动驳回</el-radio>-->
    <!--        <el-radio label="TO_ADMIN">转交审批管理员</el-radio>-->
    <!--        <el-radio label="TO_USER">转交到指定人员</el-radio>-->
    <!--      </el-radio-group>-->
    <!--      <div style="margin-top: 10px" v-if="nodeProps.nobody.handler === 'TO_USER'">-->
    <!--        <el-button size="mini" icon="Plus" type="primary" @click="showUserPicker()" round>-->
    <!--          选择人员-->
    <!--        </el-button>-->
    <!--        <user-picker title="请指定用户" :multiple="false" ref="toUserPicker" :v-model="nobodyAssignedUser"-->
    <!--                     @ok="selectNoSetUser"/>-->
    <!--        <ellipsis :row="3" :user-info="nobodyAssignedUser"/>-->
    <!--      </div>-->
    <!--    </el-form-item>-->

    <!--    <div v-if="showMode">-->
    <!--      <el-divider/>-->
    <!--      <el-form-item label="多人审批时审批方式" prop="text" class="approve-mode">-->
    <!--        <el-radio-group v-model="nodeProps.mode">-->
    <!--          <el-radio label="NEXT">会签 （按选择顺序审批，每个人必须同意）</el-radio>-->
    <!--          <el-radio label="AND">会签（可同时审批，每个人必须同意）</el-radio>-->
    <!--          <el-radio label="OR">或签（有一人同意即可）</el-radio>-->
    <!--        </el-radio-group>-->
    <!--      </el-form-item>-->
    <!--    </div>-->

    <el-divider>高级设置</el-divider>
    <!--    <el-form-item label="✍ 审批同意时是否需要签字" prop="text">-->
    <!--      <el-switch inactive-text="不用" active-text="需要" v-model="nodeProps.sign"></el-switch>-->
    <!--      <el-tooltip class="item" effect="dark" content="如果全局设置了需要签字，则此处不生效" placement="top-start">-->
    <!--        <i class="el-icon-question" style="margin-left: 10px; font-size: medium; color: #b0b0b1"></i>-->
    <!--      </el-tooltip>-->
    <!--    </el-form-item>-->
    <span v-if="nodeProps.assignedType!=='PROJECT_LEADER'">
    <span v-if="nodeProps.assignedType !== 'SUB_LEADER'">
    <el-form-item label="是否使用矩阵审批" prop="matrixApproval">
      <el-switch inactive-text="不用" active-text="使用" v-model="nodeProps.matrixApproval"></el-switch>
    </el-form-item>
    <el-form-item
        v-if="nodeProps.matrixApproval && (nodeProps.assignedType === 'SELF' || nodeProps.assignedType === 'ASSIGN_USER')"
        label="是否跳过自己" prop="skipSelf">
      <!--      {{nodeProps.skipSelf}}-->
      <el-switch inactive-text="不跳过" active-text="跳过" v-model="nodeProps.skipSelf"></el-switch>
    </el-form-item>
    </span>
    <el-form-item label="分管领导" prop="optionalChargeLeadership" v-if="nodeProps.matrixApproval">
      <el-switch inactive-text="系统" active-text="自选"
                 v-model="nodeProps.optionalChargeLeadership"></el-switch>
    </el-form-item>
    <el-form-item label="科创跳过" prop="dstiMatrix">
      <el-switch inactive-text="审批" active-text="跳过"
                 v-model="nodeProps.dstiMatrix"></el-switch>
    </el-form-item>
    <span v-if="nodeProps.assignedType === 'SUB_LEADER'">
      <el-form-item label="总经理" prop="generalManager">
      <el-switch inactive-text="不审批" active-text="审批" v-model="nodeProps.generalManager"></el-switch>
    </el-form-item>
      <el-form-item label="董事长" prop="president">
      <el-switch inactive-text="不审批" active-text="审批" v-model="nodeProps.president"></el-switch>
    </el-form-item>
    </span>
    </span>

    <!--    <el-form-item label="重复跳过" prop="duplicateApproval">-->
    <!--      <el-switch inactive-text="否" active-text="是"-->
    <!--                 v-model="nodeProps.duplicateApproval"></el-switch>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item label="审批期限（为 0 则不生效）" prop="timeLimit">-->
    <!--      <el-input style="width: 180px;" placeholder="时长" type="number"-->
    <!--                v-model="nodeProps.timeLimit.timeout.value">-->
    <!--        <el-select style="width: 75px;" v-model="nodeProps.timeLimit.timeout.unit" slot="append" placeholder="请选择" filterable>-->
    <!--          <el-option label="天" value="D"></el-option>-->
    <!--          <el-option label="小时" value="H"></el-option>-->
    <!--        </el-select>-->
    <!--      </el-input>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item label="审批期限超时后执行" prop="level" v-if="nodeProps.timeLimit.timeout.value > 0">-->
    <!--      <el-radio-group v-model="nodeProps.timeLimit.handler.type">-->
    <!--        <el-radio label="PASS">自动通过</el-radio>-->
    <!--        <el-radio label="REFUSE">自动驳回</el-radio>-->
    <!--        <el-radio label="NOTIFY">发送提醒</el-radio>-->
    <!--      </el-radio-group>-->
    <!--      <div v-if="nodeProps.timeLimit.handler.type === 'NOTIFY'">-->
    <!--        <div style="color:#409EEF; font-size: small">默认提醒当前审批人</div>-->
    <!--        <el-switch inactive-text="循环" active-text="一次" v-model="nodeProps.timeLimit.handler.notify.once"></el-switch>-->
    <!--        <span style="margin-left: 20px" v-if="!nodeProps.timeLimit.handler.notify.once">-->
    <!--							每隔-->
    <!--							<el-input-number :min="0" :max="10000" :step="1" size="mini"-->
    <!--                               v-model="nodeProps.timeLimit.handler.notify.hour"/>-->
    <!--							小时提醒一次-->
    <!--						</span>-->
    <!--      </div>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item label="🙅‍ 如果审批被驳回 👇">-->
    <!--      <el-radio-group v-model="nodeProps.refuse.type">-->
    <!--        <el-radio label="TO_INITIAL">重新开始流程</el-radio>-->
    <!--        <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
    <!--        <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
    <!--      </el-radio-group>-->
    <!--      <div v-if="nodeProps.refuse.type === 'TO_NODE'">-->
    <!--        <span>指定节点:</span>-->
    <!--        <el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转步骤" size="small"-->
    <!--                   v-model="nodeProps.refuse.target" filterable>-->
    <!--          <el-option v-for="(node, index) in nodeOptions" :key="index" :label="node.name"-->
    <!--                     :value="node.id"></el-option>-->
    <!--        </el-select>-->
    <!--      </div>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item label="自定义监听器">-->
    <!--      <div slot="label">-->
    <!--        <span style="margin-left: 20px">使用自定义监听器: </span>-->
    <!--        &lt;!&ndash;          <el-switch v-model="config.listener.state" @change="getListener"></el-switch>&ndash;&gt;-->
    <!--      </div>-->
    <!--      <div v-if="config.listener.state">-->
    <!--        <div slot="label">-->
    <!--          <span style="margin-right: 10px">设置监听器</span>-->
    <!--          <el-button type="primary" @click="addListener(config.listener.list)" link> + 添加</el-button>-->
    <!--        </div>-->
    <!--        <div v-for="(listen, index) in config.listener.list" :key="index">-->
    <!--          <el-input v-if="listen.isSys" placeholder="监听器名称" :disabled="true" size="small" style="width: 100px;"-->
    <!--                    v-model="listen.listenerName"/>-->
    <!--          <el-input v-if="!listen.isSys" placeholder="监听器名称" size="small" style="width: 100px;"-->
    <!--                    v-model="listen.listenerName"/>-->
    <!--          <el-radio-group size="small" style="margin: 0 5px;" @change="typeChange(listen)" v-model="listen.isSys">-->
    <!--            <el-radio-button :label="true">内置</el-radio-button>-->
    <!--            <el-radio-button :label="false">自定义</el-radio-button>-->
    <!--          </el-radio-group>-->
    <!--          <el-select v-if="listen.isSys" style="width: 180px;" v-model="listen.listenerValue" size="small"-->
    <!--                     @change="listenerOptionChange(listen)"-->
    <!--                     placeholder="请选择表单字段" filterable>-->
    <!--            <el-option v-for="option in listenerOption" :key="option.value" :label="option.label"-->
    <!--                       :value="option.value"/>-->
    <!--          </el-select>-->
    <!--          &lt;!&ndash;            <el-input v-if="listen.isSys" placeholder="请设置字段值" size="small" v-model="listen.listenerValue" style="width: 180px;"/>&ndash;&gt;-->
    <!--          <el-button v-if="!listen.isSys" type="primary" size="small" @click="settingListener(listen)" link>设置</el-button>-->
    <!--          <el-button @click="delListener(config.listener.list, index)"-->
    <!--                     class="el-icon-delete" type="primary"-->
    <!--                     style="margin-left: 5px; color: #c75450;" link/>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-form-item>-->
  </el-form>
  <!--
      <el-dialog custom-class="custom-dialog" class="border" width="600px" title="定义监听器设置"
                 append-to-body :close-on-click-modal="true"
                 :destroy-on-close="true" :visible.sync="editListenShow">
        <el-form ref="listenerForm" label-position="left" label-width="100px" :rules="listenerRules">
          <el-form-item label="监听器名称" prop="listenerName" class="listen">
            <el-input placeholder="请设置监听器名称" size="small" v-model="selectListen.listenerName"/>
          </el-form-item>
          <el-form-item label="监听器类型" prop="eventType" class="listen">
            <el-select placeholder="请选择监听器类型" @change="selectListen.eventType = []"
                       v-model="selectListen.listenerType" filterable>
              <el-option :value="'1'" label="任务监听"/>
              <el-option :value="'2'" label="执行监听"/>
            </el-select>
          </el-form-item>
          <el-form-item label="事件类型" prop="listenerType" class="listen">
            <el-select multiple placeholder="请选择事件类型" v-model="selectListen.eventType" filterable>
              <el-option value="create" label="create"/>
              <el-option v-if="selectListen.listenerType === '2'" value="end" label="end"/>
              <el-option v-if="selectListen.listenerType === '2'" value="take" label="take"/>
              <el-option v-if="selectListen.listenerType === '1'" value="assignment" label="assignment"/>
              <el-option v-if="selectListen.listenerType === '1'" value="complete" label="complete"/>
            </el-select>
          </el-form-item>
          <el-form-item label="值类型" prop="listenerValueType" class="listen">
            <el-radio-group size="small" style="margin: 0 5px;" @change="listenerValueTypeChange"
                            v-model="selectListen.listenerValueType">
              <el-radio-button :label="'0'">Java类</el-radio-button>
              <el-radio-button :label="'1'">表达式</el-radio-button>
              <el-radio-button :label="'2'">代理表达式</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="值" prop="listenerValue" class="listen">
            <el-input :placeholder="listenerValuePlaceholder" size="small" v-model="selectListen.listenerValue"/>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button size="mini" @click="editListenShow = false">取消</el-button>
          <el-button size="mini" type="primary" @click="editListenShow = false">确认</el-button>
        </div>
      </el-dialog>-->
</template>
<script setup>
import {useProcessStore} from '@/stores/processStore.js'
import UserPicker from '../common/UserPicker.vue'
import RolePicker from '../common/RolePicker.vue'
import RoleItems from "../common/RoleItems.vue";
import {computed, defineProps} from 'vue'

const processStore = useProcessStore()

const toUserPicker = ref()
const rolePicker = ref()
const sysRolePicker = ref()
const showOrgSelect = ref(false)
const orgPickerSelected = ref([])
const approvalTypes = reactive([
  {name: "指定人员", type: "ASSIGN_USER"},
  // {name: "发起人自选", type: "SELF_SELECT"},
  // {name: "连续多级主管", type: "LEADER_TOP"},
  // {name: "主管", type: "LEADER"},
  // {name: "角色", type: "ROLE"},
  {name: "发起人自己", type: "SELF"},
  {name: "下属企业领导", type: "SUB_LEADER"},
  {name: "下属企业科创部对接人", type: "DSTI_CONTACT_PERSON"},
  {name: "项目负责人", type: "PROJECT_LEADER"},
  // {name: "表单内联系人", type: "FORM_USER"},
  // {name: "矩阵审批", type: "MATRIX_APPROVAL"},
])
const listenerOption = ref([])
const selectListen = ref({})
const editListenShow = ref(false)
const listenerValuePlaceholder = ref('请输入类路径')
const listenerRules = ref({
  listenerName: [
    {required: true, message: '监听器名称不能为空', trigger: 'blur'}
  ],
  eventType: [
    {required: true, message: '监听器类型不能为空', trigger: 'blur'},
    // {validator: checkLength,trigger:'blur'}
  ],
  listenerType: [
    {required: true, message: '监听器类型不能为空', trigger: 'blur'},
  ],
  listenerValue: [
    {required: true, message: '值不能为空', trigger: 'blur'}
  ],
})


const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    }
  }
})


const nodeProps = computed(() => {
  return processStore.getSelectedNode().props;
})

const assignedUser = computed({
  get() {
    return props.config.assignedUser || [];
  },
  set(val) {
    props.config.assignedUser = val
  }
})


const nobodyAssignedUser = computed({
  get() {
    return props.config.nobody.assignedUser || [];
  },
  set(val) {
    props.config.nobody.assignedUser = val
  }
})

const roleList = computed({
  get() {
    return props.config.roleList || [];
  },
  set(val) {
    props.config.roleList = val
  }
})
watch(() => props.config.roleList, (value) => {
  roleList.value = value
})

const forms = computed(() => {
  return processStore.getDesign().formItems.filter(f => {
    return f.name === "UserPicker";
  });
})


const nodeOptions = computed(() => {
  let values = [];
  const excType = ["ROOT", "EMPTY", "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS", "CC", "END", "TRIGGER"];
  processStore.nodeMap.forEach((v) => {
    if (excType.indexOf(v.type) === -1) {
      values.push({id: v.id, name: v.name});
    }
  });
  return values;
})


const showMode = computed(() => {
  let props = processStore.getSelectedNode().props;
  switch (props.assignedType) {
    case "ASSIGN_USER":
      return props.assignedUser.length > 0;
    case "SELF_SELECT":
      return props.selfSelect.multiple;
    case "LEADER_TOP":
      return props.formUser !== "";
    case "FORM_USER":
    case "ROLE":
      return true;
    default:
      return false;
  }
})
//指定人员
const showSysRolePicker = () => {
  sysRolePicker.value.showUserPicker()
}
//点击转交给指定人员
const showUserPicker = () => {
  toUserPicker.value.showUserPicker()
}
//选择系统角色
const showRolePicker = () => {
  rolePicker.value.showRolePicker()
}
const checkLength = (rule, value, callback) => {
  if (value.length === 0) {
    callback(new Error("事件类型不能为空!"))
  } else {
    callback()
  }
}

const selectNoSetUser = (select) => {
  let userInfoList = []
  for (let val of select) {
    let userInfo = {
      id: val.id,
      name: val.name,
      avatar: val.avatar,
    }
    userInfoList.push(userInfo)
  }
  nobodyAssignedUser.value = userInfoList
}


const selectedRole = (select) => {
  let roleInfoList = []
  for (let val of select) {
    let userInfo = {
      value: val.roleId,
      name: val.roleName
    }
    roleInfoList.push(userInfo)
  }
  roleList.value = roleInfoList
}
const selectedUser = (select) => {
  let userInfoList = []
  for (let val of select) {
    let userInfo = {
      id: val.id,
      name: val.name,
      companyName: val.companyName,
      accountType: val.accountType,
    }
    userInfoList.push(userInfo)
  }
  assignedUser.value = userInfoList
}

</script>

<style scoped>

</style>
