<template>
  <div class="container">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2>流程列表</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <el-button @click="goPath">增加</el-button>
      </div>
      <div class="tabbox">
        <el-table
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="procId"
            show-overflow-tooltip
            label="流程编号"
          >
          </el-table-column>
          <el-table-column align="center" prop="procName" label="流程名称">
          </el-table-column>
          <el-table-column prop="opNo" label="创建工号"></el-table-column>
          <el-table-column align="center" prop="opName" label="创建人">
          </el-table-column>
          <el-table-column align="center" prop="opTime" label="创建时间">
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="actionUrl"
            label="表单地址"
          >
          </el-table-column>
          <el-table-column align="center" prop="actionName" label="表单名称">
          </el-table-column>
          <el-table-column width="150" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                plain
                @click="launch(scope.row)"
                >发起</el-button
              >
              <el-button
                size="mini"
                type="success"
                plain
                @click="updates(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="primary"
                plain
                @click="deleteOne(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
    <el-dialog
      :append-to-body="true"
      :modal-append-to-body="false"
      :close-on-click-modal="true"
      title="发起流程"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="工单信息" name="first"
          ><el-form
            :model="ruleForm"
            :rules="rules"
            ref="launchForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="工单标题" prop="taskName">
              <el-input
                style="width: 80%"
                v-model="ruleForm.taskName"
                placeholder="请输入工单标题"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="param">
              <el-select
                style="width: 80%"
                @change="roleClick"
                v-model="ruleForm.param.roleCode"
                placeholder="请选择角色"
                clearable
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="附件" prop="delivery">
              <el-upload
                class="upload-demo"
                action="http://114.215.71.182:29600/spfm/satisfy/sati/inputMobileSatisfys"
                :before-remove="beforeRemove"
                :http-request="fileChange"
                :show-file-list="true"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form></el-tab-pane
        >
        <el-tab-pane label="处理轨迹" name="second">配置管理</el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('launchForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('launchForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :append-to-body="true"
      :modal-append-to-body="false"
      :close-on-click-modal="true"
      title="修改流程"
      :visible.sync="updateVisible"
      width="80%"
    >
      <div style="height: 500px; width: 100%">
        <iframe
          width="100%"
          height="100%"
          :src="`/static/views/flow/flowDesign.html?procId=${procId}`"
          frameborder="0"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mySearch from "../../../components/search";
export default {
  components: {
    mySearch,
  },
  data() {
    var checkRule = (rule, value, callback) => {
      if (value.roleCode == "") {
        callback(new Error("请选择角色"));
      } else {
        callback();
      }
    };
    return {
      procId: "",
      updateVisible: false,
      fileList: [],
      ruleForm: {
        taskId: "",
        woNo: "",
        stepId: "",
        taskName: "",
        procId: "",
        procName: "",
        procVersion: "0",
        file: "",
        param: { roleCode: "", roleName: "" },
        params: { attchFileId: "" },
        dealType: "0",
        dealTypeDesc: "提交",
      },
      rules: {
        taskName: [
          { required: true, message: "请输入工单名称", trigger: "blur" },
        ],
        param: [
          {
            required: true,
            validator: checkRule,
            message: "请选择角色",
            trigger: "change",
          },
        ],
      },
      roleList: [],
      activeName: "first",
      dialogVisible: false,
      tableList: [],
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      dialogStatus: false,
      searchList: [
        {
          type: "input",
          tit: "流程名称",
          value: "",
          width: "100%",
          options: [],
        },
        {
          type: "input",
          tit: "流程编码",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      params: {
        procName: "",
        procId: "",
      },
      loading: false,
      paramsData: {},
    };
  },
  methods: {
    defaultMenu(path, name) {
      let defaults = this.$store.state.tabList.filter((item) => {
        if (item.rountPath == path) {
          return item;
        }
      });
      if (defaults.length == 1) {
        return;
      }
      let params = {
        children: "",
        name: name,
        rountPath: path,
        target: "_self",
      };
      let set = new Set([...this.$store.state.tabList, params]);
      this.$store.commit("setDefaultActive", path);
      this.$store.commit("setTabList", Array.from(set));
    },
    updates(val) {
      this.procId = val.procId;
      this.updateVisible = true;
    },
    goPath() {
      this.$router.push("/flowDesign");
      this.defaultMenu('/flowDesign','流程绘制')
    },
    deleteOne(val) {
      console.log(val);
    },
    roleClick(val) {
      this.roleList.map((item) => {
        if (item.value == val) {
          this.ruleForm.param.roleName = item.label;
        }
      });
    },
    // 提交文件
    fileChange(param, type) {
      let formData = new FormData();
      formData.append("file", param.file);
      formData.append("woNo", this.ruleForm.woNo);
      formData.append("stepId", this.ruleForm.stepId);
      formData.append("taskName", this.ruleForm.taskName);
      formData.append("procId", this.ruleForm.procId);
      formData.append("procName", this.ruleForm.procName);
      formData.append("procVersion", this.ruleForm.procVersion);
      formData.append("roleCode", this.ruleForm.param.roleCode);
      formData.append("moduleName", "wo");
      this.$http({
        url: "/spfm/bpm/api/upload",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: formData,
      }).then((res) => {
        this.ruleForm.params.attchFileId = res.data.body.attchFileId;
      });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http({
            url: "/bpm/api/startProcAuto",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: this.ruleForm,
          }).then((res) => {
            if (res.data.result == 0) {
              this.$message({
                message: res.data.desc,
                type: "success",
              });
            }
          });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    handleClick(val) {},
    // 工单告警
    launch(val) {
      Object.keys(val).map((item) => {
        this.ruleForm[item] = val[item];
      });
      this.paramsData = JSON.parse(JSON.stringify(val));
      this.$http({
        url: "/spfm/bpm/api/taskInit",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          taskId: val.taskId,
          woNo: val.woNo,
          stepId: val.stepId,
          taskName: val.taskName,
          procId: val.procId,
          procName: val.procName,
          procVersion: val.procVersion,
          file: "",
          param: { roleCode: null },
          params: { attchFileId: "" },
        },
      }).then((res) => {
        res.data.roleCodeOpt.map((item) => {
          let obj = { label: "", value: "" };
          obj.label = item.optName;
          obj.value = item.optCode;
          this.roleList.push(obj);
        });
      });
      this.dialogVisible = true;
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.procName = v[0]) : "";
      v[1] ? (this.params.procId = v[1]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/bpm/api/queryBpmProcList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
  },
  created() {},
};
</script>
<style>
.el-input__suffix {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>