<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          v-auth="'workflow.create'"
        ></el-button>
        <!-- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length!==1"
						   @click="batch_del" v-auth="'workflow.delete'"></el-button> -->
      </div>
      <div class="right-panel">
        <el-select v-model="query.cate" placeholder="工作流分组" clearable style="width: 220px;"
        @change="handleQuery">
              <el-option
                v-for="item in wfCateOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
        <el-input
            v-model="query.search"
            placeholder="工作流名称"
            clearable
            @keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="ID" prop="id" width="180">
          <template #default="scope">
            <el-link @click="workflowShow(scope.row)" type="primary">{{ scope.row.id }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="工作流名称"
          prop="name"
          width="220"
        ></el-table-column>
        <el-table-column
          label="分类"
          prop="cate"
          width="80"
        ></el-table-column>
        <el-table-column
          label="标识"
          prop="key"
          width="160"
        ></el-table-column>
        <el-table-column
          label="流水前缀"
          prop="sn_prefix"
          width="80">
        </el-table-column>
        <el-table-column
          label="页面路径"
          prop="view_path"
          min-width="150">
        </el-table-column>
        <!-- <el-table-column
          label="工单查看权限校验"
          prop="view_permission_check"
          min-width="120"
        >
          <template #default="scope">
            <span v-if="scope.row.view_permission_check">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="工作流描述"
          prop="description"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          width="140"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="workflowShow(scope.row)"
              v-auth="'workflow.update'"
              >配置
            </el-button>
            <el-button
              link
              size="small"
              type="primary"
              @click="workflowEdit(scope.row)"
              v-auth="'workflow.update'"
              >编辑
            </el-button>
            <el-button
              link
              size="small"
              type="primary"
              @click="handleWatch(scope.row)"
            >
              流程图
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="workflowDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  v-auth="'workflow.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer v-model="limitedWatch" destroy-on-close :title="workflowName" :size="600">
      <degraDialog
      ref="degraDialogs" 
      :workFlowId="workFlowId"
      >
    </degraDialog>
  </el-drawer>
  <el-dialog :title="titleMap[type]" v-model="limitedVisible">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addForm"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="addForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="分类" prop="cate">
        <el-input v-model="addForm.cate" clearable></el-input>
      </el-form-item>
      <el-form-item label="标识" prop="key">
        <el-input v-model="addForm.key" clearable></el-input>
      </el-form-item>
      <el-form-item label="流水前缀">
        <el-input v-model="addForm.sn_prefix" clearable></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="addForm.description"
          type="textarea"
          :rows="4"
          placeholder="描述"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="查看权限校验">
        <el-switch v-model="addForm.view_permission_check"></el-switch>
      </el-form-item>
      <el-form-item label="展现表单字段">
        <el-transfer
          v-model="addForm.display_form_str"
          :data="choiceOption"
          :titles="['未展示字段', '展示字段']"
          :props="{ key: 'id', label: 'field_name' }"
        />
      </el-form-item>
      <el-form-item label="页面地址">
        <el-input v-model="addForm.view_path" clearable></el-input>
      </el-form-item>
      <el-form-item label="页面地址2">
        <el-input v-model="addForm.view_path2" clearable></el-input>
      </el-form-item>
      <el-form-item label="标题模板">
        <el-input v-model="addForm.title_template" clearable></el-input>
      </el-form-item>
      <el-form-item label="内容模板">
        <el-input v-model="addForm.content_template" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="limitedVisible = false">取 消</el-button>
      <el-button
        v-if="type !== 'show'"
        type="primary"
        :loading="isSaving"
        @click="submitHandle()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import degraDialog from "./degraD3_2.vue";
export default {
  name: "index",
  components: {
    degraDialog
  },
  data() {
    return {
      workflowName:"",
      workFlowId:'',
      apiObj: this.$API.wf.workflow.list,
      selection: [],
      checkList: [],
      choiceOption: [],
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      limitedWatch: false,
      type: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      wfCateOptions: [],
      //表单数据
      addForm: {
        name: "",
        sn_prefix: "",
        description: "",
        view_permission_check: true,
        display_form_str: [],
        title_template: "",
        content_template: "",
      },
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入工作流名称" }],
      },
      menu: {
        list: [],
        checked: ["1513426415243104256"],
        props: {
          children: "children",
          label: "name",
        },
      },
    };
  },
  mounted() {
    // this.getGroup();
    this.getWfCates();
  },
  methods: {
    //添加工作流
    handleAdd() {
      this.type = "add";
      this.limitedVisible = true;
    },

    getWfCates() {
      this.$API.wf.workflow.cates.req().then(res=>{
        this.wfCateOptions = res
      })
    },

    submitHandle() {
      let that = this;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          that.isSaveing = true;
          that.submit();
        }
      });
    },

    async submit() {
      let that = this;
      let res = null;
      try {
        if (that.type === "add") {
          res = await that.$API.wf.workflow.create.req(that.addForm);
        } else {
          res = await that.$API.wf.workflow.update.req(
            that.editId,
            that.addForm
          );
        }
        that.isSaveing = false;
        that.limitedVisible = false;
        that.$refs.table.refresh();
      } catch (e) {
        that.isSaveing = false;
      }
    },

    //编辑工作流
    workflowEdit(row) {
      this.type = "edit";
      this.editId = row.id;
      this.limitedVisible = true;
      this.addForm = Object.assign({}, row);
    },

    //工作流配置
    workflowShow(row) {
      let workflow = sessionStorage.getItem("jinYuWorkflowId");
      if (workflow) {
        sessionStorage.removeItem("jinYuWorkflowId");
        sessionStorage.setItem("jinYuWorkflowId", row.id);
      } else {
        sessionStorage.setItem("jinYuWorkflowId", row.id);
      }
      this.$router.push({ path: "/wf/configuration" });
    },

    //删除工作流
    async workflowDel(row) {
      var id = row.id;
      var res = await this.$API.wf.workflow.delete.req(id);
      if (res.err_msg) {
        this.$message.error(res.err_msg);
      } else {
        this.$refs.table.refresh();
        this.$message.success("删除成功");
        // this.$alert(res.message, "提示", {type: 'error'})
      }
    },

    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },

    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },

    //根据ID获取树结构
    filterTree(id) {
      var target = null;

      function filter(tree) {
        tree.forEach((item) => {
          if (item.id == id) {
            target = item;
          }
          if (item.children) {
            filter(item.children);
          }
        });
      }

      filter(this.$refs.table.tableData);
      return target;
    },

    //本地更新数据
    handleSaveSuccess(data, type) {
      if (type == "add") {
        this.$refs.table.refresh();
      } else if (type == "edit") {
        this.$refs.table.refresh();
      }
    },

    handleWatch(row) {
      let that = this;
      that.workFlowId = row.id;
      that.workflowName = row.name;
      that.limitedWatch = true;
    },

    closeMark() {
      this.limitedWatch = false;
    },
    scaleUp() {
      var svg = document.getElementById("mySvg");
      svg.style.transform = "scale(0.5)";
    }
  },
};
</script>
<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  background-color: #fefefe;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background-color: #f5f5f5;
}
.node rect {
  stroke: #606266;
  fill: #fff;
}

.edgePath path {
  stroke: #606266;
  fill: #333;
  stroke-width: 1.5px;
}

g.conditions > rect {
  fill: #00ffd0;
  stroke: #000;
}

.el-icon-close {
  cursor: pointer;
}
</style>

