<template>
  <el-card class="box-card">
    <el-row :gutter="10">
      <el-col :span="4">
        <treeList :data="treeListData" v-model="sourceList.pagination.tenantId" node-key="id" @change="treeChange"> </treeList>
      </el-col>
      <el-col :span="20">
        <byTable
          :source="sourceList.data"
          :pagination="sourceList.pagination"
          :config="config"
          :loading="loading"
          highlight-current-row
          :selectConfig="selectConfig"
          :table-events="{
            select: select,
          }"
          :action-list="[
            {
              text: '添加流程',
              action: () => openModal('add'),
              disabled: !sourceList.pagination.tenantId,
            },
          ]"
          @get-list="getList">
          <template #slotName="{ item }">
            {{ item.createTime }}
          </template>
        </byTable>
      </el-col>
    </el-row>

    <el-dialog :title="modalType == 'add' ? '新增' : '编辑'"  v-if="dialogVisible" v-model="dialogVisible" width="500" v-loading="loading">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform"> </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm('byform')" size="large" :loading="submitLoading"> 确 定 </el-button>
      </template>
    </el-dialog>

    <!-- 版本切换模态框 -->
    <el-dialog title="版本切换" v-if="versionVisible" v-model="versionVisible" width="500" v-loading="loading">
      <el-form>
        <el-form-item label="流程名称">
          <el-input v-model="formData.flowName" disabled placeholder="请输入流程名称"></el-input>
        </el-form-item>
        <el-form-item label="当前版本">
          <el-select v-model="formData.version" placeholder="请选择">
            <el-option v-for="item in versionList" :key="item.id" :label="'v' + item.versionNumber" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="versionVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="changeVersion(formData.version)" size="large" :loading="submitLoading"> 确 定 </el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup name="ProcessConfig">
import { ElMessage } from "element-plus";
import byTable from "/src/components/byTable/index";
import byForm from "/src/components/byForm/index";
import treeList from "/src/components/treeList/index";

const loading = ref(false);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
let dialogVisible = ref(false);
const versionVisible = ref(false);
let modalType = ref("add");
let rules = ref({
  roleKey: [{ required: true, message: "请选择部门", trigger: "blur" }],
  nickName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  userName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
});
const { proxy } = getCurrentInstance();
const selectConfig = computed(() => {
  return [];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "功能模块",
        prop: "classifyName",
      },
    },
    {
      attrs: {
        label: "流程标识",
        prop: "flowKey",
      },
    },
    {
      attrs: {
        label: "流程名称",
        prop: "flowName",
      },
    },

    {
      attrs: {
        label: "当前版本",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "v" + row.versionNumber,
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              getVersionList(row);
            },
          },
        ];
      },
    },
    {
      attrs: {
        label: "操作",
        width: "200",
        align: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "新建版本",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              getDtl(row);
            },
          },
        ];
      },
    },
  ];
});
let versionList = ref([]);
const getVersionList = (row) => {
  formData.flowName = row.flowName;
  formData.version = row.id;
  versionVisible.value = true;
  proxy
    .post("/flowDefinition/getVersionList", {
      flowKey: row.flowKey,
      tenantId: row.tenantId,
    })
    .then((message) => {
      versionList.value = message;
    });
};
const changeVersion = (id) => {
  if (!id) {
    ElMessage.error("请选择版本");
    return;
  }
  proxy
    .post("/flowDefinition/updateVersion", {
      id: id,
    })
    .then(() => {
      ElMessage.success("切换成功");
      versionVisible.value = false;
      getList();
    });
};
let formData = reactive({
  data: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const byform = ref(null);
const treeListData = ref([]);
const formConfig = computed(() => {
  return [
    {
      type: "select",
      label: "功能模块",
      prop: "titleTemplate",
      isLoad: {
        url: `/flowInfo/getClassifyList`,
        labelKey: "stringArray",
        labelVal: "stringArray",
        method: "post",
        resUrl: "",
      },
      fn: (data) => {
        getFlowList(data);
      },
    },
    {
      type: "select",
      label: "流程名称",
      prop: "flowInfoId",
      data: [],
    },
  ];
});
const getFlowList = (name) => {
  proxy
    .post("/flowInfo/page", {
      pageNum: 1,
      pageSize: 1000,
      status: 1,
      classifyName: name,
    })
    .then((message) => {
      formConfig.value[1].data = message.rows.map((item) => {
        return {
          label: item.flowName,
          value: item.id,
        };
      });
    });
};
const getTreeList = () => {
  proxy.post("/tenantInfo/list").then((message) => {
    message.map((item) => {
      item.label = item.enterpriseName;
      item.id = item.tenantId;
      item.children = [];
    });
    treeListData.value = message;
  });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/flowDefinition/page", sourceList.value.pagination).then((message) => {
    sourceList.value.data = message.rows;
    sourceList.value.pagination.total = message.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
const treeChange = (e) => {
  sourceList.value.pagination.tenantId = e.id;
  getList({ tenantId: e.id });
};
const openModal = () => {
  dialogVisible.value = true;
  modalType.value = "add";
  formData.data = {
    userType: 1,
  };
};
const selection = ref({
  data: [],
});
const select = (_selection) => {
  selection.value.data = _selection;
};
const submitForm = () => {
  byform.value.handleSubmit(() => {
    proxy
      .post("/flowDefinition/" + modalType.value, {
        ...formData.data,
        tenantId: sourceList.value.pagination.tenantId,
      })
      .then(() => {
        ElMessage({
          message: modalType.value == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        dialogVisible.value = false;
        getList();
      });
  });
};
const router = useRouter();
const getDtl = (row) => {
  formData.data = { ...row };
  router.push({
    path: "processChart",
    query: {
      id: row.id,
      flowInfoId: row.flowInfoId,
      tenantId: row.tenantId,
    },
  });
};
getTreeList();
getList();
</script>

<style lang="scss" scoped></style>
