<template>
  <div>
    <el-form
      ref="taskAssignRuleForm"
      :model="form"
      :rules="rules"
      label-width="110px"
    >
      <el-form-item label="规则类型" prop="type">
        <el-select
          v-model="form.type"
          clearable
          style="width: 100%"
          @change="emptyingRules"
        >
          <el-option
            v-for="dict in this.dict[
              this.dictEnum['工作流任务分配规则的类型']
            ] || []"
            :key="parseInt(dict.dictCode)"
            :label="dict.dictValue"
            :value="parseInt(dict.dictCode)"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
        <el-select
          v-model="form.roleIds"
          multiple
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in roleOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 20 || form.type === 21"
        label="指定部门"
        prop="deptIds"
      >
        <!--        <treeSelect-->
        <!--          v-model="form.deptIds"-->
        <!--          :options="deptTreeOptions"-->
        <!--          multiple-->
        <!--          flat-->
        <!--          :defaultExpandLevel="3"-->
        <!--          placeholder="请选择指定部门"-->
        <!--          :normalizer="normalizer"-->
        <!--        />-->

        <ele-tree-select
          clearable
          multiple
          ref="planTreeRef"
          filterable
          :data="deptTreeOptions"
          v-model="form.deptIds"
          :checkStrictly="true"
          childrenKey="children"
          node-key="id"
          valueKey="id"
          labelKey="name"
          placeholder="请选择"
          default-expand-all
        />
      </el-form-item>
      <el-form-item v-if="form.type === 22" label="指定工种" prop="workTypeIds">
        <el-select
          v-model="form.workTypeIds"
          multiple
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="dict in this.dict[this.dictEnum['工种']] || []"
            :key="dict.dictCode"
            :label="dict.dictValue"
            :value="dict.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 30 || form.type === 31 || form.type === 32"
        label="指定用户"
        prop="userIds"
      >
        <el-select
          v-model="form.userIds"
          multiple
          clearable
          style="width: 100%"
          :filterable="true"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 40"
        label="指定用户组"
        prop="userGroupIds"
      >
        <el-select
          v-model="form.userGroupIds"
          multiple
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in userGroupOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
        <el-select
          v-model="form.scripts"
          multiple
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="dict in this.dict[
              this.dictEnum['工作流任务分配自定义脚本']
            ] || []"
            :key="dict.dictCode"
            :label="dict.dictValue"
            :value="dict.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 60"
        label="自定义变量"
        prop="variableName"
      >
        <el-input
          placeholder="请输入自定义变量名称"
          v-model="form.variableName"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item v-if="form.type === 70" label="审核方向" prop="direction">
        <el-select v-model="form.direction" clearable style="width: 100%">
          <el-option key="0" label="从下到上" value="0" />
          <el-option key="1" label="从上到下" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 70"
        label="指定部门负责人"
        prop="topLevel"
      >
        <el-select
          v-if="form.direction == 0"
          v-model="form.topLevel"
          clearable
          style="width: 100%"
        >
          <el-option key="1" label="直接部门负责人" value="1" />
          <el-option key="2" label="上二级部门负责人" value="2" />
          <el-option key="3" label="上三级部门负责人" value="3" />
          <el-option key="4" label="上四级部门负责人" value="4" />
          <el-option key="5" label="上五级部门负责人" value="5" />
          <el-option key="6" label="上六级部门负责人" value="6" />
          <el-option key="7" label="上七级部门负责人" value="7" />
          <el-option key="8" label="上八级部门负责人" value="8" />
          <el-option key="9" label="上九级部门负责人" value="9" />
        </el-select>
        <el-select v-else v-model="form.topLevel" clearable style="width: 100%">
          <el-option key="99" label="最高级部门负责人" value="99" />
          <el-option key="2" label="第二层部门负责人" value="2" />
          <el-option key="3" label="第三层部门负责人" value="3" />
          <el-option key="4" label="第四层部门负责人" value="4" />
          <el-option key="5" label="第五层部门负责人" value="5" />
          <el-option key="6" label="第六层部门负责人" value="6" />
          <el-option key="7" label="第七层部门负责人" value="7" />
          <el-option key="8" label="第八层部门负责人" value="8" />
          <el-option key="9" label="第九层部门负责人" value="9" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import treeSelect from '@riophae/vue-treeselect';
  import '@riophae/vue-treeselect/dist/vue-treeselect.css';
  import { listRoles } from '@/api/system/role';
  import {
    listAllUserBind,
    listOrganizations
  } from '@/api/system/organization';
  import { listSimpleUserGroups } from '@/api/bpm/userGroup';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    name: 'index',
    components: { treeSelect },
    mixins: [dictMixins],
    props: {
      model: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        form: {
          options: [],
          roleIds: [],
          userIds: [],
          deptIds: [],
          workTypeIds: [],
          userGroupIds: [],
          scripts: [],
          variableName: '',
          topLevel: ''
        },
        userGroupOptions: [],
        userOptions: [],
        deptTreeOptions: [],
        roleOptions: [],
        rules: {}
      };
    },
    created() {
      this.requestDict('工作流任务分配规则的类型');
      this.requestDict('工作流任务分配自定义脚本');
      this.requestDict('工种');
      this.init0();
    },
    methods: {
      /** 初始化 */
      init0() {
        // 设置可见
        // 获得列表

        // 获得角色列表
        this.roleOptions = [];
        listRoles({
          current: 1,
          size: 9999
        }).then((data) => {
          this.roleOptions.push(...data.list);
        });
        // 获得部门列表
        this.deptOptions = [];
        this.deptTreeOptions = [];
        listOrganizations().then((data) => {
          this.deptOptions.push(...data);
          this.deptTreeOptions.push(...this.handleTree(data, 'id'));
        });
        // 获得岗位列表 暂无岗位概念
        this.postOptions = [];
        /*listSimplePosts().then(response => {
        this.postOptions.push(...response.data);
      });*/
        // 获得用户列表
        this.userOptions = [];
        listAllUserBind().then((data) => {
          this.userOptions.push(...data);
        });
        // 获得用户组列表
        this.userGroupOptions = [];
        listSimpleUserGroups().then((response) => {
          this.userGroupOptions.push(...response);
        });
      },
      // 选择规则清空上一次选择内容
      emptyingRules() {
        this.form.options = [];
        this.form.roleIds = [];
        this.form.deptIds = [];
        this.form.workTypeIds = [];
        this.form.userIds = [];
        this.form.userGroupIds = [];
        this.form.scripts = [];
        this.form.variableName = '';
      },
      /**
       * 构造树型结构数据
       * @param {*} data 数据源
       * @param {*} id id字段 默认 'id'
       * @param {*} parentId 父节点字段 默认 'parentId'
       * @param {*} children 孩子节点字段 默认 'children'
       * @param {*} rootId 根Id 默认 0
       */
      handleTree(data, id, parentId, children, rootId) {
        id = id || 'id';
        parentId = parentId || 'parentId';
        children = children || 'children';
        rootId =
          rootId ||
          Math.min.apply(
            Math,
            data.map((item) => {
              return item[parentId];
            })
          ) ||
          0;
        //对源数据深度克隆
        const cloneData = JSON.parse(JSON.stringify(data));
        //循环所有项
        const treeData = cloneData.filter((father) => {
          let branchArr = cloneData.filter((child) => {
            //返回每一项的子级数组
            return father[id] == child[parentId];
          });
          branchArr.length > 0 ? (father.children = branchArr) : '';
          //返回第一层
          return father[parentId] == rootId;
        });
        return treeData !== '' ? treeData : data;
      },

      // 格式化部门的下拉框
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      }
    }
  };
</script>
<style scoped lang="scss">
  ::v-deep .vue-treeselect__menu-container {
    z-index: 9999999;
  }
</style>
