<template>
  <div class="setActionProcess">
    <div
      class="action_show_box"
      v-if=" powers.some((i) => i == '001')"
    >
      <ul class="role-list fl">
        <p class="role-list__title">流程列表</p>
        <p
          v-if="processList.length == 0"
          style="line-height: 60px; text-align: center; color: #909399"
        >
          暂无数据
        </p>
        <li
          v-for="(item, index) in processList"
          :key="'role' + index"
          class="role-list__item"
          :class="{ active: item.id == activeId }"
          @click="!isBtnDisabled && switchRoleHandle(index)"
        >
          {{ item.process_name }}
          <i v-if="isBtnDisabled && item.id == activeId" class="el-icon-loading" />
        </li>
      </ul>
      <div class="rule-view fr">
        <div class="rule-list" style="padding: 0 16px">
          <ex-table
            v-loading="loading"
            :table="table"
            :data="tableData"
            :columns="columns"
            :page="pageInfo"
            :size="size"
            @page-curr-change="handlePageChange"
            @page-size-change="handleSizeChange"
            @screen-reset="
              pageInfo.curr = 1;
              searchList();
            "
            @screen-submit="
              pageInfo.curr = 1;
              searchList();
            "
          >
            <template #table-header="{}">
              <div style="width: 100%; padding: 0 0 0 80px">
                <el-row>
                  <el-col :span="24">
                    <el-col :span="5" style="width: 130px">
                      <el-select
                        v-model="parmValue.action_type"
                        filterable
                        clearable
                        :size="size"
                        @change="
                          pageInfo.curr = 1;
                          searchList();
                        "
                        placeholder="节点类型"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in action_type_list"
                          :key="'action_type' + item.value"
                          :label="item.label"
                          :value="item.value"
                        /> </el-select
                    ></el-col>
                    <el-col :span="5" style="width: 140px; padding: 0 0 0 10px">
                      <el-select
                        v-model="parmValue.operation_type"
                        filterable
                        clearable
                        :size="size"
                        @change="
                          pageInfo.curr = 1;
                          searchList();
                        "
                        placeholder="操作类型"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in operation_type_list"
                          :key="'operation_type' + item.value"
                          :label="item.label"
                          :value="item.value"
                        /> </el-select
                    ></el-col>
                    <el-col :span="3" style="width: 66px; float: right">
                      <el-button
                        type="primary"
                        :size="searchSize"
                        style="float: right"
                        @click="searchList"
                      >
                        刷新
                      </el-button>
                    </el-col>
                    <el-col
                      :span="3"
                      style="width: 66px; float: right"
                      v-if="powers.some((i) => i == '003')"
                    >
                      <el-button
                        :size="searchSize"
                        type="success"
                        style="float: right"
                        @click="openModal('add', false)"
                      >
                        添加
                      </el-button>
                    </el-col>
                  </el-col>
                </el-row>
              </div>
            </template>
            <template #action_type="{ scope }">
              <el-tag
                :size="tablebtnSize"
                :type="
                  (
                    action_type_list.find(
                      (item) => item.value == scope.row.action_type + ''
                    ) || {}
                  ).type || '--'
                "
                v-text="
                  (
                    action_type_list.find(
                      (item) => item.value == scope.row.action_type + ''
                    ) || {}
                  ).label || '--'
                "
              ></el-tag>
            </template>
            <template #operation_type="{ scope }">
              <el-tag
                :size="tablebtnSize"
                :type="scope.row.operation_type == '1' ? 'success' : ''"
                v-text="
                  (
                    operation_type_list.find(
                      (item) => item.value == scope.row.operation_type
                    ) || {}
                  ).label || '--'
                "
              ></el-tag>
            </template>
            <template #next_actions="{ scope }">
              <el-tag
                :size="tablebtnSize"
                :type="''"
                v-text="si"
                v-for="(si, sii) in scope.row.next_actions"
                :key="si + sii"
              ></el-tag>
            </template>

            <template #is_master="{ scope }">
              <el-tag
                :size="tablebtnSize"
                :type="scope.row.is_master === '0' ? 'warning' : ''"
                v-text="scope.row.is_master === '0' ? '否' : '是'"
                :key="si + sii"
              ></el-tag>
            </template>

            <template #status="{ scope }">
              <el-tag
                :size="tablebtnSize"
                :type="scope.row.status == '0' ? 'warning' : ''"
                v-text="
                  (statusOptions.find((item) => item.id == scope.row.status) || {})
                    .label || '--'
                "
              ></el-tag>
            </template>

            <template #operation="{ scope }">
              <el-tooltip
                v-if="powers.some((i) => i == '007')"
                effect="dark"
                content="详情"
                placement="top"
              >
                <i
                  class="el-icon-view tb-icon"
                  @click="openModal(scope.row.id, true)"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-if="powers.some((i) => i == '005')"
                effect="dark"
                content="修改"
                placement="top"
              >
                <i
                  class="el-icon-edit tb-icon"
                  @click="openModal(scope.row.id, false)"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-if="powers.some((i) => i == '004') && scope.row.status === '1'"
                effect="dark"
                content="禁用"
                placement="top"
              >
                <i
                  class="el-icon-video-pause tb-icon"
                  @click="changeStatus(scope.row.id, scope.row.status)"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-if="powers.some((i) => i == '004') && scope.row.status === '0'"
                effect="dark"
                content="启用"
                placement="top"
              >
                <i
                  class="el-icon-video-play tb-icon"
                  @click="changeStatus(scope.row.id, scope.row.status)"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-if="powers.some((i) => i == '006')"
                effect="dark"
                content="删除"
                placement="top"
              >
                <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
              </el-tooltip>
            </template>
          </ex-table>
        </div>
      </div>
    </div>

    <no-auth v-else></no-auth>
    <!-- 弹窗 新增/修改 -->
    <add-edit
      :id="modelId"
      :show-model="showModel"
      :is-detail="isDetail"
      :activeId="activeId"
      @refresh="searchList"
      @cancel="showModel = false"
    />
  </div>
</template>
<script>
import addEdit from "./addEdit";
import asyncRequest from "@/apis/service/serviceParam/setActionProcess";
import mixinPage from "@/mixins/elPaginationHandle";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import { action_type_list, listCol, operation_type_list } from "./columns";
export default {
  name: "setActionProcess",
  mixins: [mixinPage, resToken],
  components: {
    addEdit,
  },
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "setActionProcess"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      loading: false,
      showModel: false,
      isDetail: false,
      isBtnDisabled: false,
      // 流程列表
      processList: [],
      action_data: [],
      activeId: "",
      modelId: 0,
      // 状态
      statusOptions: [
        { id: 0, label: "禁用" },
        { id: 1, label: "启用" },
      ],
      parmValue: {
        page: 1, // 页码
        size: 15, // 每页显示条数
        process_id: "",
        action_type: "",
        operation_type: "",
      },
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: listCol,
      action_type_list,
      operation_type_list,
    };
  },
  mounted() {
    this.initprocessList();
  },
  methods: {
    // 初始化流程列表
    async initprocessList() {
      const model = {
        status: "",
        process_name: "",
        creater: "",
        addtime_start: "",
        addtime_end: "",
        page: 1,
        size: 10000,
      };
      const { code, data, message } = await asyncRequest.processList(model);
      if (code === 0) {
        const { list } = data ?? [];
        this.processList = list ?? [];
        if (this.processList.length > 0) {
          await this.switchRoleHandle(0);
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      }
    },
    async deleteItem(id) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const model = {
            id,
            is_del: "1",
          };
          const { code, data, message } = await asyncRequest.delete(model);
          if (code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          } else if (code >= 100 && code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 切换流程
    switchRoleHandle(index) {
      this.activeId = this.processList[index].id;
      this.$nextTick(async () => {
        await this.searchList();
      });
    },
    // 新建/编辑/详情
    openModal(id, isDetail) {
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
    },
    /**
     * 启用/禁用
     * @param {String} id id
     * @param {String} status 0-禁用 1-启用
     */
    async changeStatus(id, status) {
      await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const model = {
            id: id,
            status: status === "1" ? "0" : "1",
          };
          const { code, data, message } = await asyncRequest.status(model);
          if (code === 0) {
            this.$notify.success({
              title: "状态修改成功",
              message: "",
            });
            this.searchList();
          } else if (code >= 100 && code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },

    // 刷新表格
    async searchList() {
      this.loading = true;
      this.parmValue.process_id = this.activeId;
      const { code, data, message } = await asyncRequest.list(this.parmValue);
      if (code === 0) {
        const { list, count } = data ?? [];
        this.tableData = list ?? [];
        this.pageInfo.total = Number(count);
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.setActionProcess {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .action_show_box {
    // position: relative;
    // height: calc(100% - 50px);
    // min-height: calc(100% - 50px);

    display: relative;
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    text-align: left;
    //左侧
    .role-list {
      height: 100%;
      overflow-y: auto;
      width: 200px;
      padding: 8px 16px;
      min-height: 100%;
      flex-shrink: 0;
      border-right: 2px solid #dfe6ec;
      @include scrollBar();
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 2px;
        background-color: #e4e7ed;
        z-index: 1;
      }
      .role-list__title {
        color: #b4b6c0;
        line-height: 32px;
      }
      .role-list__item {
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 32px;
        line-height: 32px;
        padding-left: 8px;
        color: rgb(48, 49, 51);
        cursor: pointer;
        i {
          position: absolute;
          right: 0;
          line-height: 32px;
        }
      }
      .role-list__item.active {
        color: #6954f0;
        background: #f7f7f7;
      }
    }
    //右侧
    .rule-view {
      height: calc(100% - 50px);
      width: calc(100% - 200px);
      overflow-y: auto;
      @include scrollBar();
      // padding: 0 0 0 16px;
      .ffff {
        width: 100%;
        display: flex;
        align-items: stretch;
        .ftitle {
          width: 110px;
          text-align: center;
          border-right: 1px solid #dfe6ec;
          border-bottom: 1px solid #dfe6ec;
          padding: 12px 14px;
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            width: 100%;
            font-size: 17px;
            text-align: center;
            color: #97a8be;
          }
        }
        .fbody {
          width: calc(100% - 110px);
          .fbody-item {
            border-right: 1px solid #dfe6ec;
            border-bottom: 1px solid #dfe6ec;

            .stitle {
              padding: 18px 18px 12px 18px;
              border-bottom: 1px dashed #dfe6ec;
              font-size: 14px;
              color: #97a8be;
              ._h2 {
                display: inline-block;
                // width: 100px;
              }
            }
            .scheck {
              padding: 15px 0 10px 0;
              display: flex;
              width: 100%;
              .checkAll {
                width: 140px;
                text-align: right;
                padding: 0 35px 0 0;
              }
              .checkItem {
                width: calc(100% - 140px);
              }
            }
            .sfield {
              padding: 0 0 10px 0;
              display: flex;
              width: 100%;
              .checkAll {
                width: 140px;
                text-align: right;
                padding: 0 35px 0 0;
              }
              .checkItem {
                width: calc(100% - 140px);
              }
            }
          }
        }
      }
    }
  }
}
</style>
