<template>
  <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :layout="'horizontal'" size="small">
    <a-form-item label="⚙ 选择审批对象" class="approval-user">
      <a-radio-group v-model="nodeProps.setType">
        <a-radio v-for="item in approvalTypes" :key="item.name" :value="item.type">
          {{ item.name }}
        </a-radio>
      </a-radio-group>

      <div v-if="nodeProps.setType === 1" class="mt-4">
        <a-button size="small" type="primary" @click="selectUser">
          <i class="x-iconfont x-icon-plus" /> 选择人员
        </a-button>
        <OrgItemsView v-model="nodeProps.nodeAssigneeList" />
      </div>

      <div v-if="nodeProps.setType === 3" class="mt-4">
        <a-button size="small" type="primary" @click="selectRole">
          <i class="x-iconfont x-icon-plus" /> 选择角色
        </a-button>
        <OrgItemsView v-model="nodeProps.nodeAssigneeList" />
      </div>

      <div v-if="nodeProps.setType === 7" class="mt-4">
        <a-button size="small" type="primary" @click="selectDept">
          <i class="x-iconfont x-icon-plus" /> 选择部门
        </a-button>
        <OrgItemsView v-model="nodeProps.nodeAssigneeList" />
      </div>

      <div v-if="nodeProps.setType === 8" class="mt-4">
        <a-button size="small" type="primary" @click="selectUser">
          <i class="x-iconfont x-icon-plus" /> 选择候选人员
        </a-button>
        <OrgItemsView v-model="nodeProps.nodeAssigneeList" />
      </div>
    </a-form-item>

    <div v-if="showMode">
      <a-divider />
      <a-form-item label="多人审批时审批方式">
        <a-radio-group v-model="nodeProps.examineMode">
          <a-radio :value="1">按顺序依次审批</a-radio>
          <a-radio :value="2">会签（每个人必须同意）</a-radio>
          <a-radio :value="3">或签（一人同意即可）</a-radio>
        </a-radio-group>
      </a-form-item>
    </div>

    <a-divider>高级设置</a-divider>

    <a-form-item label="超时自动审批">
      <a-switch v-model="nodeProps.termAuto" />
    </a-form-item>

    <a-form-item v-if="nodeProps.termAuto" label="审批期限(小时)">
      <a-input-number v-model="nodeProps.term" :min="0" style="width: 180px" placeholder="时长" />
      <div style="margin-top: 8px">
        <span class="mr-2">超时策略：</span>
        <a-radio-group v-model="nodeProps.termMode">
          <a-radio :value="0">自动通过</a-radio>
          <a-radio :value="1">自动拒绝</a-radio>
        </a-radio-group>
      </div>
    </a-form-item>

    <a-form-item label="驳回策略">
      <a-radio-group v-model="nodeProps.rejectStrategy">
        <a-radio :value="4">直接结束流程</a-radio>
        <a-radio :value="2">驳回到上级审批节点</a-radio>
        <a-radio :value="1">驳回到发起人</a-radio>
      </a-radio-group>
    </a-form-item>

    <OrgPicker
      ref="orgPickerRef"
      :title="pickerTitle"
      :type="orgPickerType"
      :multiple="true"
      :selected="orgPickerSelected"
      @confirm="handleSelected"
    />
  </a-form>
</template>

<script>
import OrgItemsView from '@/views/workFlow/designer/common/OrgItemsView.vue';
import { mapState } from 'vuex';
import OrgPicker from '@comp/OrgPicker/OrgPicker.vue'

export default {
  name: 'ApprovalNodeConfig',
  components: {
    OrgPicker,
    OrgItemsView
  },
  data() {
    return {
      orgPickerRef: null,
      orgPickerSelected: [],
      orgPickerType: 'user',
      lastSetType: null,
      approvalTypes: [
        { name: '指定成员', type: 1 },
        // { name: '主管', type: 2 },
        { name: '角色', type: 3 },
        // { name: '发起人自选', type: 4 },
        // { name: '发起人自己', type: 5 },
        // { name: '连续多级主管', type: 6 },
        { name: '部门', type: 7 },
        // { name: '指定候选', type: 8 }
      ]
    };
  },
  computed: {
    ...mapState({
      nodeProps: state => state.workflow.selectedNode
    }),
    pickerTitle() {
      switch (this.orgPickerType) {
        case 'user':
          return '请选择人员';
        case 'role':
          return '请选择角色';
        case 'dept':
          return '请选择部门';
        default:
          return '-';
      }
    },
    showMode() {
      return [1, 3, 7, 8].includes(this.nodeProps.setType) &&
        this.nodeProps.nodeAssigneeList &&
        this.nodeProps.nodeAssigneeList.length > 0;
    }
  },
  watch: {
    'nodeProps.setType': {
      handler(newType) {
        if (newType !== this.lastSetType) {
          if (this.nodeProps.nodeAssigneeList) {
            this.nodeProps.nodeAssigneeList.splice(0);
          }
          this.lastSetType = newType;
        }
        switch (newType) {
          case 1:
          case 8:
            this.orgPickerType = 'user';
            break;
          case 3:
            this.orgPickerType = 'role';
            break;
          case 7:
            this.orgPickerType = 'dept';
            break;
          default:
            this.orgPickerType = 'user';
        }
      },
      immediate: true
    }
  },
  methods: {
    selectUser() {
      this.orgPickerSelected = [...this.nodeProps.nodeAssigneeList];
      this.orgPickerType = 'user';
      this.$nextTick(() => this.$refs.orgPickerRef.show());
    },
    selectRole() {
      this.orgPickerSelected = [...this.nodeProps.nodeAssigneeList];
      this.orgPickerType = 'role';
      this.$nextTick(() => this.$refs.orgPickerRef.show());
    },
    selectDept() {
      this.orgPickerSelected = [...this.nodeProps.nodeAssigneeList];
      this.orgPickerType = 'dept';
      this.$nextTick(() => this.$refs.orgPickerRef.show());
    },
    handleSelected(selectedList) {
      this.orgPickerSelected = [...selectedList];
      const cleanList = selectedList.map(item => ({
        id: item.id,
        name: item.name,
        type: item.type
      }));

      this.$store.commit('workflow/SET_NODE_ASSIGNEE_LIST', cleanList);
    }
  }
};
</script>

<style scoped>
.approval-user ::v-deep .ant-form-item-control {
  display: block;
}
.mt-4 {
  margin-top: 12px;
}
</style>
