<template>
    <div class="projectect-attendance-drawer">
      <el-drawer
        v-if="isOpen"
        :visible.sync="isOpen"
        size="70%"
      >
        <template slot="title">
          <div>流程发起角色配置</div>
        </template>
        <el-tabs  type="card"
          v-model="activeName"
          style="margin-left: 20px; margin-right: 20px"
          @tab-click="getList"
        >
          <el-tab-pane
            v-for="(it,idx) in processRoleList"
            :key="idx"
            :label="it.roleName+''"
            :name="it.roleId+''"
          ></el-tab-pane>
          <el-table v-loading="loading" fit :data="definitionList">
            <el-table-column label="流程编号" align="center" prop="deploymentId" :show-overflow-tooltip="true"/>
            <el-table-column label="流程标识" align="center" prop="flowKey" :show-overflow-tooltip="true" />
            <el-table-column label="流程分类" align="center" prop="category" >
                <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_process_category" :value="scope.row.category" />
                </template>
            </el-table-column>
            <el-table-column label="流程名称" align="center" width="200" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column
                label="项目排序"
                align="center"
                width="150"
            >
                <template slot-scope="scope">
                <el-input-number
                    size="mini"
                    v-model="scope.row.sorts"
                    :min="1"
                    :max="999"
                    @change="setSort(scope.row, $event)"
                ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="流程版本" align="center" width="80">
                <template slot-scope="scope">
                <el-tag size="medium" >v{{ scope.row.version }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
                <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
          </el-table>
        </el-tabs>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import {
  roleList,
  listDefinition,
  updateProcKeyRoleSort,
} from "@/api/flowable/definition";
  
  export default {
    name: "indexDrawer",
    components: {},
    dicts: ['sys_process_category'],
    data() {
      return {
        loading: false,
        isOpen: false,
        nodes: [],
        activeName: "0",
        // 遮罩层
        loading: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100
        },
        definitionList:[],
        processRoleList: [],
        form: {},
        rules: {},
      };
    },
    computed: { },
    mounted() {},
    methods: {
      show() {
        this.getRoleList();
        this.isOpen=true;
      },
      // 页签点击
      getList() {
        this.queryParams.roleId=this.activeName;
        this.form.roleId=this.activeName;
        listDefinition(this.queryParams).then(response => {
          this.definitionList = response.data.records;
        });
      },
      getRoleList(){
        this.loading=true;
        this.queryParams.roleKey="lc_";
        this.queryParams.roleId=null;
        roleList(this.queryParams).then(response => {
          this.processRoleList = response.data;
          this.activeName=response.data[0].roleId+'';
          this.getList();
          this.loading=false;
        });
      },
      // 取消按钮
      doCanel() {
        this.isOpen = false;
      },
      /** 设置排序 */
      setSort(row,val) {
        this.form.key=row.flowKey;
        this.form.sort=val;
        updateProcKeyRoleSort(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.getList();
        });
      }
    },
  };
  </script>
  <style lang="scss" scoped></style>
  