<template>
  <div class="process-designer-container">
    <apass-list
      ref="list"
      search-placeholder="请输入关键字"
      :list-filter="filterList"
      :list-header="listHeader"
      :list-data="listData"
      :list-total="listTotal"
      @list-action="init"
      :list-padding-left="40"
    >
      <el-button type="primary" slot="header-left" @click="addNewProcess">
        新建流程
      </el-button>

      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item>
          在线组件工具
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          流程设计
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          流程管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </apass-list>

    <apass-dialog
      ref="dialog"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";

export default {
  components: {
    apassList,
    apassDialog,
  },
  data: () => ({
    filterList: [
      {
        name: "服务领域",
      },
      {
        name: "工作区域",
      },
      {
        name: "流程状态",
      },
    ],
    listHeader: [],
    listData: [],
    listTotal: 0,
    dialogInfo: {
      msg: "",
      submit: null,
    },
    tempFilter: null,
  }),
  methods: {
    init(filter) {
      console.log(filter);
      this.tempFilter = filter;

      this.listTotal = 3;
      this.listData = [
        {
          id: "WF00000001",
          name: "保安资格申请流程",
          sectors_name: "经济建设",
          create_time: "2021-01-01T00:00:00Z",
          state: "0",
        },
        {
          id: "WF00000002",
          name: "保安考试流程",
          sectors_name: "经济建设",
          create_time: "2021-01-01T00:00:00Z",
          state: "1",
        },
        {
          id: "WF00000003",
          name: "申请材料审核流程",
          sectors_name: "经济建设",
          create_time: "2021-01-01T00:00:00Z",
          state: "2",
        },
      ];
    },
    initFilter() {
      Promise.all([
        this.$http.get("/apaas/service/v3/service/manager/servtype"),
        this.$http.get("/apaas/service/v3/service/manager/servarea"),
      ])
        .then((response) => {
          let filterList = response.map((item) => {
            return {
              name: item.body.data[0].type_name,
              prop: item.body.data[0].type_code,
              data: item.body.data.map((v) => ({
                name: v.name,
                value: v.id,
              })),
            };
          });

          this.filterList = [
            ...filterList,
            {
              name: "流程状态",
              prop: "state",
              data: [
                {
                  name: "已发布",
                  value: 2,
                },
                {
                  name: "已部署",
                  value: 1,
                },
                {
                  name: "未部署",
                  value: 0,
                },
              ],
            },
          ];
        })
        .catch((error) => {
          console.log(error);
        });
    },
    iniHeader() {
      this.listHeader = [
        {
          label: "流程编号",
          prop: "id",
          width: 180,
        },
        {
          label: "流程名称",
          prop: "name",
          type: "button",
          callback: this.detailItem,
        },
        {
          label: "服务领域",
          prop: "sectors_name",
          align: "center",
          width: 240,
        },
        {
          label: "创建时间",
          prop: "create_time",
          getText(item) {
            return helper.dateStringTransform(item.create_time || "");
          },
          align: "center",
          width: 180,
        },
        {
          label: "状态",
          prop: "state",
          getText(item) {
            return ["未部署", "已部署", "已发布"][item.state || 0];
          },
          align: "center",
          width: 180,
        },
        {
          label: "操作",
          type: "buttons",
          align: "center",
          width: 300,
          actionList: [
            {
              label: "发布",
              callback: this.publishItem,
              disableHide: true,
              disabledRule(item) {
                return item.state == 2;
              },
            },
            {
              label: "编辑",
              callback: this.editItem,
            },
          ],
          moreActionList: [
            {
              label: "取消部署",
              callback: this.canceldeployItem,
            },
            {
              label: "复制",
              callback: this.copyItem,
            },
            {
              label: "删除",
              callback: this.deleteItem,
            },
          ],
        },
      ];
    },
    refresh() {
      this.init(this.tempFilter);
    },
    addNewProcess() {
      console.log("addNewProcess");
    },
    detailItem(item) {
      this.$router.push(`/progress/designer/detail/${item.id}`);
    },
    publishItem(item) {
      console.log(`publish ${item.name}`);
    },
    editItem(item) {
      console.log(`edit ${item.name}`);
    },
    canceldeployItem(item) {
      console.log(`cancel deploy ${item.name}`);
    },
    copyItem(item) {
      console.log(`copy ${item.name}`);
    },
    deleteItem(item) {
      console.log(`delete ${item.name}`);
    },
  },
  created() {
    this.initFilter();
    this.iniHeader();
  },
};
</script>

<style scoped>
.process-designer-container {
  height: 100%;
}
</style>
