<template>
  <el-collapse v-model="parserActive" accordion>
    <el-collapse-item :title="'预设办理人信息'" name="1">
      <div v-for="(item, index) of nodeList" :key="index">
        <el-form-item prop="flow" :label="`➤ 节点`">
          <el-select
            v-model="item.name"
            @change="changePreset($event, null, index)"
          >
            <el-option
              v-for="items in item.option"
              :key="items.nodeId"
              :label="items.nodeName"
              :value="items.nodeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.name != 'endEvent'" prop="user" label="办理人">
          <SelectUser
            ref="selectUser"
            :showUser="true"
            :showTooltip="showTooltip"
            :nextUser="item.nextUser"
            :radioList="item.radioList"
            :multiple="item.multiple"
            :isCustomUser="item.isCustomUser"
            :options="item.options"
            :presetEdit="item.presetEdit"
            :selectUserList="item.selectUserList"
            @change="changePresetUser($event, index)"
            :types="['employee', 'persongroup']"
            :params="item.params"
          />
        </el-form-item>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { getPresetNodeInfo } from 'eoss-ui/src/config/api';
import SelectUser from '../selectUser.vue';
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'Parser',
  components: {
    [SelectUser.name]: SelectUser
  },
  data() {
    return {
      nodeList: [],
      nextNodeId: '',
      parserActive: ''
    };
  },
  props: {
    processDefinitionId: {
      type: String,
      default: ''
    },
    presetTaskNodeKeyStr: {
      type: String,
      default: ''
    },
    customPresetHintMessage: {
      type: String,
      default: ''
    },
    presetTaskNodeMap: {
      type: Object,
      default: () => {}
    },
    pendingId: {
      type: String,
      default: ''
    },
    businessId: {
      type: String,
      default: ''
    },
    nodeId: {
      type: String,
      default: ''
    }
  },
  watch: {
    presetTaskNodeKeyStr: {
      handler(val) {
        this.getNodeList();
      },
      deep: true,
      immediate: true
    },
    showTooltip: { type: Boolean, default: true },
    parserActive: {
      handler(val) {
        if (val === '1') {
          this.getNodeUser();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeSelectData() {
      let presetUserJson = [];
      this.nodeList.map((item) => {
        presetUserJson.push({
          name: item.name,
          value: item.multiple ? item.nextUser.join(',') : item.nextUser
        });
      });
      this.$emit('changePreset', presetUserJson);
      this.$emit('change-preset', presetUserJson);
    },
    changePresetUser(val, index) {
      const { nextUser } = val;
      this.nodeList[index].nextUser = nextUser;
      this.changeSelectData();
    },
    getNodeList() {
      for (let key in this.presetTaskNodeMap) {
        this.nextNodeId = this.nextNodeId
          ? this.nextNodeId + ',' + key
          : this.nextNodeId + key;
        this.nodeList.push({
          name: key,
          option: [{ nodeId: key, nodeName: this.presetTaskNodeMap[key] }]
        });
      }
    },
    getNodeUser() {
      this.$emit('loadingStart');
      this.$emit('loading-start');
      const { nextNodeId, processDefinitionId, businessId, pendingId, nodeId } =
        this;
      let params = {
        url: getPresetNodeInfo,
        data: {
          nextNodeId,
          processDefinitionId,
          businessId,
          pendingId,
          nodeId
        },
        method: 'post'
      };
      util
        .ajax(params)
        .then((res) => {
          const { status, message, data } = res;
          if (status == 'success') {
            if (data) {
              this.nodeList.map((item) => {
                for (let key in data) {
                  if (item.name === key) {
                    item.configInfo = data[key];
                  }
                }
              });
              this.getConfig();
            }
          } else {
            this.$message.error(message || '系统错误，请联系管理员！');
          }
        })
        .catch((err) => {
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    },
    getConfig() {
      this.nodeList = this.nodeList.filter(
        (item) => item.name.indexOf(this.nodeId) == -1
      );
      this.nodeList.map((item, index) => {
        const { multiple, params } = this.isMultiple(
          item.configInfo.nodeExtAttr.userSelectionType
        );
        item.multiple = multiple;
        item.params = params;
        item.presetEdit = item.configInfo.nodeExtAttr.presetEdit;
        item.nextUser = [];
        item.options = [];
        item.radioList = [];
        item.selectUserList = [];
        item.isDefSelectedObj = item.configInfo.nodeExtAttr.isDefSelectedObj;
        item.configInfo.nextUserList.map((items) => {
          if (item.multiple && item.isDefSelectedObj == 1) {
            item.nextUser.push(items.userId);
            item.selectUserList.push({
              showname: items.username,
              showid: items.userId
            });
          }
          item.options.push({
            showname: items.username,
            showid: items.userId
          });
        });
        if (
          !item.multiple &&
          item.configInfo.nextUserList.length > 0 &&
          item.isDefSelectedObj == 1
        ) {
          item.nextUser = item.configInfo.nextUserList[0].userId;
          item.selectUserList.push({
            showname: item.configInfo.nextUserList[0].username,
            showid: item.configInfo.nextUserList[0].userId
          });
        }
        if (!item.multiple && item.isDefSelectedObj != 1) item.nextUser = '';
        item.presetEdit != 0 && (item.radioList = item.options);
        this.$refs.selectUser[index].changeInfo(item);
      });
      this.changeSelectData();
      this.$emit('loadingEnd');
      this.$emit('loading-end');
    },
    isMultiple(val, choiceOrgId, choiceDeptId, pOrgId) {
      let multiple = false;
      let params = {};
      if (val == 2 || val == 4 || val == 6 || val == 16) {
        multiple = true;
      }
      if (val == 1 || val == 2 || val == 5) {
        params.filid = util.getStorage('orgId');
        params.only_filid = true;
        if (choiceOrgId) {
          params.filid = choiceOrgId;
        }
      }
      if (val == 5 || val == 6) {
        params.filid = util.getStorage('orgId');
        params.mydeptid = util.getStorage('depId');
        if (choiceDeptId) {
          params.mydeptid = choiceDeptId;
        }
        if (choiceOrgId) {
          params.filid = choiceOrgId;
        }
      }
      if (val == 15 || val == 16) {
        params.filid = util.getStorage('orgId');
        if (pOrgId) {
          params.filid = pOrgId;
        }
      }
      return { multiple, params };
    }
  }
};
</script>

<style></style>
