<template>
  <div class="approver-user-select">
    <FlowDrawerItem name="基本配置">
      <a-form
        ref="formRef"
        :model="props.approverConfig.approverStrategy"
        style="padding-top: 10px"
        labelAlign="right"
        :rules="rules"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 22 }"
        autocomplete="off"
      >
        <a-form-item name="approverNodeType" label="节点类型">
          <a-select
            v-model:value="props.approverConfig.approverStrategy.approverNodeType"
            placeholder="请选择节点类型"
            allowClear
            @change="approverNodeTypeChange"
            style="width: 300px; margin-left: 20px"
          >
            <a-select-option :value="nodeType.type" v-for="nodeType in nodeTypeList" :key="nodeType.type">{{
              nodeType.name
            }}</a-select-option>
          </a-select>
          <a-tooltip>
            <template #title>
              单人活动：办理人只能选择一个 <br />
              多人单一：办理人可以选择多个，但只允许一个人办理<br />
              多人并行：办理人可以选择多个，多个办理人都要进行办理<br />
              多人顺序：办理人可以选择多个，多个办理人都要进行办理，并且有顺序要求</template
            >
            <question-circle-filled style="margin-left: 5px; font-size: 18px" />
          </a-tooltip>
        </a-form-item>
        <a-form-item name="approverNodeLeaveType" label="离开方式" v-if="props.approverConfig.approverStrategy.approverNodeType == 30">
          <a-radio-group v-model:value="props.approverConfig.approverStrategy.approverNodeLeaveType" style="margin-left: 20px">
            <a-radio :value="10" class="radio-row"
              >超过多少
              <a-input-number
                style="margin: 0 5px"
                :min="0"
                :max="100"
                v-model:value="props.approverConfig.approverStrategy.approverNodeLeavePercent"
                :disabled="props.approverConfig.approverStrategy.approverNodeLeaveType != 10"
              ></a-input-number
              >%，流程自动流转至下一个节点</a-radio
            >
            <a-radio :value="20" class="radio-row"
              ><span
                >参与者超过<a-input-number
                  style="margin: 0 5px"
                  v-model:value="props.approverConfig.approverStrategy.approverNodeLeaveCount"
                  :disabled="props.approverConfig.approverStrategy.approverNodeLeaveType != 20"
                ></a-input-number
                >个已处理</span
              ></a-radio
            >
            <a-radio :value="30" class="radio-row">
              <span>某个参与者已处理</span>
              <a-button
                style="margin: 0 5px"
                :disabled="props.approverConfig.approverStrategy.approverNodeLeaveType != 30"
                @click="singleClick"
                >...</a-button
              >
              <span class="approverStrategy-user">{{ getName(props.approverConfig.approverStrategy.personAlreadyAddressedList) }}</span>
            </a-radio>
            <a-radio :value="40" class="radio-row">
              <span>指定参与者全部处理</span>
              <a-button
                style="margin: 0 5px"
                :disabled="props.approverConfig.approverStrategy.approverNodeLeaveType != 40"
                @click="multipleClick"
                >...</a-button
              >
              <span class="approverStrategy-user">{{ getName(props.approverConfig.approverStrategy.personAllAddressedList) }}</span>
            </a-radio>
            <a-radio :value="50" class="radio-row">
              <span>拓展规则</span>
              <a-input
                style="width: 250px; margin: 0 5px"
                v-model:value="props.approverConfig.approverStrategy.customExpandRuleClass"
                :disabled="props.approverConfig.approverStrategy.approverNodeLeaveType != 50"
              ></a-input>
              <span>（必须实现接口 cn.stylefeng.workflow.instance.modular.task.strategy.BaseLeaveRule）</span>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </FlowDrawerItem>
    <!-- 指定成员 -->
    <FlowDrawerItem name="代理人设置">
      <AgentSet
        v-model:valueData="props.approverConfig.mainApprover"
        :approverNodeType="props.approverConfig.approverStrategy.approverNodeType"
      />
      <!-- <a-tabs v-model:activeKey="activeKey" tab-position="left" style="margin-top: 20px">
        <a-tab-pane key="1" tab="主办" force-render>
          <AgentSet v-model:valueData="props.approverConfig.mainApprover"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="协办" force-render>
          <AgentSet v-model:valueData="props.approverConfig.assistantApprover"/>
        </a-tab-pane>
        <a-tab-pane key="3" tab="读者" force-render>
          <AgentSet v-model:valueData="props.approverConfig.readerApprover"/>
        </a-tab-pane>
      </a-tabs> -->
    </FlowDrawerItem>

    <!-- 选择参与者 -->
    <ParticipantSelect
      v-model:visible="showPart"
      v-if="showPart"
      @done="closePart"
      :selectList="partList"
      :dataList="props.approverConfig.mainApprover.nodeApproverPersonList"
    />
  </div>
</template>

<script setup name="ApproverUserSelect">
import { ref, reactive } from 'vue';
import FlowDrawerItem from '../../common/FlowDrawerItem.vue';
import ParticipantSelect from './participant-select.vue';
import AgentSet from './agent-set.vue';

// 接收属性
const props = defineProps({
  approverConfig: {
    type: Object,
    default: {}
  },
});

// 节点类型列表
const nodeTypeList = ref([
  {
    type: 10,
    name: '单人活动'
  },
  {
    type: 20,
    name: '多人单一'
  },
  {
    type: 30,
    name: '多人并行'
  },
  {
    type: 40,
    name: '多人顺序'
  }
]);

// 验证规则
const rules = reactive({
  approverNodeType: [{ required: true, message: '请选择节点类型', type: 'number', trigger: 'change' }],
  approverNodeLeaveType: [{ required: true, message: '请选择离开方式', type: 'number', trigger: 'change' }]
});

// 是否显示选择参与者弹框
const showPart = ref(false);

// 参与者类型
const partType = ref('1');

// 参与者列表
const partList = ref([]);

// 获取显示名称
const getName = list => {
  let name = '';
  if (list) {
    name = list.map(item => item.userName).join(';');
  }
  return name;
};

// 单个参与者
const singleClick = () => {
  partType.value = '1';
  partList.value = [...props.approverConfig.approverStrategy.personAlreadyAddressedList];
  showPart.value = true;
};
// 多个参与者
const multipleClick = () => {
  partType.value = '2';
  partList.value = [...props.approverConfig.approverStrategy.personAllAddressedList];
  showPart.value = true;
};

// 关闭选择参与者弹框
const closePart = list => {
  if (partType.value == '1') {
    props.approverConfig.approverStrategy.personAlreadyAddressedList = list;
  } else {
    props.approverConfig.approverStrategy.personAllAddressedList = list;
  }
};

// 节点类型选择
const approverNodeTypeChange = value => {
  // 多人顺序
  if (value == 40) {
    props.approverConfig.approverJumpStrategy.allowSelfSelect = false;
  }
};
</script>

<style scoped lang="less">
.approver-user-select {
  width: 100%;
  height: 100%;
}
.group {
  width: 100%;
}
:deep(.ant-select) {
  width: 100%;
}
.radio-row {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.approverStrategy-user {
  width: 500px;
  height: 20px;
  margin-left: 5px;
  line-height: 26px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
