<template>
  <div>
    <p class="desc">选择能发起该审批的人员/角色/部门，不选则默认开放给所有人</p>
    <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="setType">
          <a-radio v-for="item in approvalTypes" :key="item.type" :value="item.type">
            {{ item.name }}
          </a-radio>
        </a-radio-group>

        <div v-if="setType === 1" class="mt-4">
          <a-button size="small" type="primary" shape="round" @click="selectUser">
            <i class="x-iconfont x-icon-plus" slot="icon"></i>
            选择人员
          </a-button>
          <OrgItemsView :value="config.nodeAssigneeList" @input="val => (config.nodeAssigneeList = val)" />
        </div>

        <div v-if="setType === 3" class="mt-4">
          <a-button size="small" type="primary" shape="round" @click="selectRole">
            <i class="x-iconfont x-icon-plus" slot="icon"></i>
            选择角色
          </a-button>
          <OrgItemsView :value="config.nodeAssigneeList" @input="val => (config.nodeAssigneeList = val)" />
        </div>

        <div v-if="setType === 7" class="mt-4">
          <a-button size="small" type="primary" shape="round" @click="selectDept">
            <i class="x-iconfont x-icon-plus" slot="icon"></i>
            选择部门
          </a-button>
          <OrgItemsView :value="config.nodeAssigneeList" @input="val => (config.nodeAssigneeList = val)" />
        </div>
      </a-form-item>
    </a-form>

    <OrgPicker
      ref="orgPickerRef"
      :title="pickerTitle"
      :multiple="true"
      :type="orgPickerType"
      :selected="config.nodeAssigneeList"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import OrgItemsView from '@/views/workFlow/designer/common/OrgItemsView.vue';
import OrgPicker from '@/components/OrgPicker/OrgPicker.vue';

export default {
  name: 'RootNodeConfig',
  components: {
    OrgItemsView,
    OrgPicker
  },
  props: {
    config: {
      type: Object,
      default: () => ({
        nodeAssigneeList: [],
        setType: 1
      })
    }
  },
  data() {
    return {
      orgPickerRef: null,
      orgPickerType: 'user',
      orgPickerSelected: [],
      approvalTypes: [
        { name: '指定成员', type: 1 },
        { name: '角色', type: 3 },
        { name: '部门', type: 7 }
      ],
      setType: this.config.setType || 1,
      lastSetType: this.config.setType || 1
    };
  },
  computed: {
    pickerTitle() {
      switch (this.orgPickerType) {
        case 'user':
          return '请选择人员';
        case 'role':
          return '请选择角色';
        case 'dept':
          return '请选择部门';
        default:
          return '请选择';
      }
    }
  },
  watch: {
    setType: {
      handler(newVal) {
        this.config.setType = newVal;
        if (newVal !== this.lastSetType) {
          // 仅当 setType 实际变化时才清空原有选择
          if (this.config.nodeAssigneeList) {
            this.config.nodeAssigneeList.splice(0, this.config.nodeAssigneeList.length);
          }
          this.lastSetType = newVal;
        }

        // 设置选择器类型
        switch (newVal) {
          case 1:
            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.config.nodeAssigneeList];
      this.orgPickerType = 'user';
      this.$nextTick(() => {
        this.$refs.orgPickerRef.show();
      });
    },
    selectRole() {
      this.orgPickerSelected = [...this.config.nodeAssigneeList];
      this.orgPickerType = 'role';
      this.$nextTick(() => {
        this.$refs.orgPickerRef.show();
      });
    },
    selectDept() {
      this.orgPickerSelected = [...this.config.nodeAssigneeList];
      this.orgPickerType = 'dept';
      this.$nextTick(() => {
        this.$refs.orgPickerRef.show();
      });
    },
    confirmHandle(data) {
      this.config.nodeAssigneeList.splice(0, this.config.nodeAssigneeList.length, ...data);
    }
  }
};
</script>

<style lang="less" scoped>
.desc {
  font-size: small;
  color: #8c8c8c;
}

.mt-4 {
  margin-top: 12px;
}

.approval-user {
  margin-top: 12px;
}
</style>
