<template>
  <div class="flow-drawer-content">
    <FlowDrawerItem name="是否允许发起人自选">
      <a-radio-group v-model:value="props.approverJumpStrategy.allowSelfSelect">
        <a-radio :value="true">是</a-radio>
        <a-radio :value="false">否</a-radio>
      </a-radio-group>
    </FlowDrawerItem>
    <!-- 审批人与发起人为同一人时 -->
    <FlowDrawerItem name="审批人与发起人为同一人时">
      <a-radio-group v-model:value="props.approverJumpStrategy.samePersonApprovalPolicy">
        <a-radio v-for="(sameApproval, i) in sameApprovals" :key="i" :value="sameApproval.value" class="radio-row">
          <span>{{ sameApproval.name }}</span>
          <FlowPopoverTip :popovers="sameApproval.popovers" :href="sameApproval.href" :hrefName="sameApproval.hrefName" />
        </a-radio>
      </a-radio-group>
    </FlowDrawerItem>
    <!-- 相邻审批节点为同一人时 -->
    <FlowDrawerItem name="相邻审批节点为同一人时">
      <a-radio-group v-model:value="props.approverJumpStrategy.adjacentApproverSkipPolicy">
        <a-radio v-for="(adjacentApproval, i) in adjacentApprovals" :key="i" :value="adjacentApproval.value" class="radio-row">
          <span>{{ adjacentApproval.name }}</span>
          <FlowPopoverTip :popovers="adjacentApproval.popovers" :href="adjacentApproval.href" :hrefName="adjacentApproval.hrefName" />
        </a-radio>
      </a-radio-group>
    </FlowDrawerItem>
    <!-- 审批人为空时 -->
    <FlowDrawerItem name="审批人为空时">
      <template #title>
        <span>审批人为空时</span>
      </template>
      <a-radio-group v-model:value="props.approverJumpStrategy.emptyApproverStrategy" @change="emptyApproverStrategyChange">
        <a-radio v-for="(approvalWithNull, i) in approvalWithNulls" :key="i" :value="approvalWithNull.value" class="radio-row">
          <span>{{ approvalWithNull.name }}</span>
          <FlowPopoverTip :popovers="approvalWithNull.popovers" :href="approvalWithNull.href" :hrefName="approvalWithNull.hrefName" />
        </a-radio>
      </a-radio-group>
    </FlowDrawerItem>

    <FlowDrawerItem v-if="props.approverJumpStrategy.emptyApproverStrategy == 20" name="审批人为空时指定成员">
      <FlowSelectUser
        v-model="props.approverJumpStrategy.emptyApproverPointUserId"
        v-model:label="props.approverJumpStrategy.emptyApproverPointUserName"
      />
    </FlowDrawerItem>

  </div>
</template>

<script setup name="Approver">
import loadApproverData from '../../data/load-approver-data';
import FlowPopoverTip from '../../common/FlowPopoverTip.vue'
import FlowDrawerItem from '../../common/FlowDrawerItem.vue'
import FlowSelectUser from '../../common/FlowSelectUser.vue';

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

// 数据
const { adjacentApprovals, sameApprovals, approvalWithNulls } = loadApproverData();

// 审批人为空改变
const emptyApproverStrategyChange = ({ target }) => {
  if (target.value != 20) {
    props.approverJumpStrategy.emptyApproverPointUserId = null;
    props.approverJumpStrategy.emptyApproverPointUserName = null;
  }
};
</script>

<style scoped lang="less">
.flow-drawer-content {
  width: 100%;
  height: 100%;
}
// 提示
.hint-info {
  line-height: 22px;
  color: #646a73;

  p {
    position: relative;
    padding-left: 10px;

    &::before {
      content: '';
      width: 4px;
      height: 4px;
      position: absolute;
      top: 9px;
      left: 0;
      border-radius: 2px;
      background: var(--primary-color);
    }
  }
}
.radio-row {
  display: block;
  height: 20px;
  line-height: 20px;
  margin-bottom: 14px;
}
</style>
